DOM全称为 文档对象模型（Document Object Model）。
是JS操作网页的接口，它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作。
一、层级节点
DOM的最小组成单位叫做节点（node）。文档的树形结构（DOM树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。节点的类型有七种：Document、DocumentType、Element、Text、Comment、DocumentFragmen。
document 节点表示每个文档的根节点。而根节点的唯一子节点是<html>元素，我们称之为文档元素（documentElement）。文档元素始终都是<html>元素。
- document 文档节点
- Element 元素节点
- Attribute 属性节点
- Text 文本节点
- DocumentType doctype标签
- Comment 注释节点
- DocumentFragment 文档片段
二、Node类型
Node接口是由所有DOM节点类型实现。Node接口在js中作为Node类型实现，所有节点类型都继承Node类型。所有类型都共享相同的基本属性和方法。
1、属性
属性使用法：（例：console.log(text.nodeType) // 返回：3; 其返回值是3表示文本节点）
（例： console.log(div.nodeValue); // null；其返回值为null表示该节点没有文本值）
nodeType 返回值为一个整数值，以此表示节点的类型
nodeName 返回节点名称
nodeValue 返回一个字符串，表示当前节点本身的文本值，该属性只读写text（文本节点）、comment（注释节点）、attr（属性节点）。
textContent 返回当前节点和它的所有后代节点的内容
nextSibling 返回紧跟在当前节点后面的第一个同级节点，如果没有同级节点，则返回null。
prevIoUsSibling 返回当前节点前面的、距离最近的一个同级节点。如果没有，则返回null。
parentNode 返回当前节点的父节点（一个节点的父节点只会有元素节点、文档节点、文档片段节点这三种类型）
parentElement 返回当前节点父元素节点（注意：与父节点不一定相同，父元素节点的节点类型是元素），如果当前节点没有父节点，或者父节点类型不是元素节点，则返回null。
firstChild 返回当前节点的第一个子节点，如没有返回null。
lastChild 返回当前节点的最后一个节点，如没有则返回null。
childNodes 返回一个NodeList几何（类似数组的对象），其成员是当前节点的所有子节点。
2、方法
appendChild 将一个节点作为最后一个节点插入当前节点, 参数为要插入的新节点。
<script>
var a1 = document.createElement('a'); // 创建元素节点p
a1.innerHTML = 'a标签链接'; // 向a标签插入内容
document.body.appendChild(a1); // 将节点插入到body中
</script>insertBefore 将某个节点插入父节点内部的指定位置，参数为两个：分别为新节点 、要插入位置的后面节点（因为新节点将会插入到此节点的前面；此节点为父节点内部的一个子节点）。
var insertednode = parentNode.insertBefore(newNode, referenceNode);removeChild 将一个子节点作为参数，用于从当前节点移除该子节点。返回值是移除的子节点。
var 克隆生成的副本节点名称 = 将要被克隆的节点 . cloneNode(deep);
如果deep的位置是true则该节点的所有后代节点也都会被克隆，如果为false,则只克隆该节点本身。
三、Document类型
getElementById 方法
通过id查找元素
innerHTML 属性
| 方法 | 描述 |
|---|---|
| document.getElementById(id) | 通过元素 id 来查找元素 |
| document.getElementsByTagName(name) | 通过标签名来查找元素 |
| document.getElementsByClassName(name) | 通过类名来查找元素 |
| document.querySelector() | 返回文档中匹配指定的CSS选择器的第一元素 |
| document.querySelectorAll() | document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表 |
document.createElement(element) 创建一个新元素
要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
document.write() 写入
向文档写入文本或 HTML 表达式 或 JavaScript 代码。
原文地址：https://www.jb51.cc/wenti/3281305.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
