DOM介绍
DOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作（比如增删内容）。
DOM提供了一种表述形式将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说，它将web页面和脚本或编程语言连接起来了。
DOM可以理解成网页的编程接口。
1.节点
DOM最小的单位叫做节点。文档的树形结构（DOM树），就是各种不同类型的节点组成的。
节点类型有七种：Document、DocumentType、Element、Text、Comment、DocumentFragment。
常用节点
文档节点（Document）
整个HTML文档document对象作为window对象的属性存在，不用获取直接使用
元素节点（Element）
HTML文档中的标签
属性节点（Attribute）
标签里面的属性，非元素节点的子节点，而是元素节点的一部分。
文本节点（Text）
HTML文档中的文本内容
其他节点
DocumentType
doctype标签（如）。
Comment
注释
DocumentFragment
文档的片段
节点数
一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是DOM。
除了根节点外，其他节点对于周围的节点都存在三种关系：
1.父节点关系（parentNode）：当前元素的那个上级节点
2.子节点关系（childNode）：当前元素的下级节点
3.同级节点（sibling）：用有同一个父节点的节点
DOM提供操作接口，其中，子节点接口包括firstChild（第一个节点）和lastChild（最后一个节点）等属性，同级节点接口包括nextSibling（紧挨着在后面的那个同级节点）和previousSilbling（紧邻在前面的那个同级节点）属性。
2.Node类型
nodeType
nodeType属性返回一个整数值，表示节点的类型，如下图
| 节点类型 | 值 | 对应常量 |
|---|---|---|
| 文档节点（document） | 9 | Node.DOCUMENT_NODE |
| 元素节点（element） | 1 | Node.ELEMENT_NODE |
| 属性节点（attr） | 2 | Node.ATTRIBUTE_NODE |
| 文本节点（text） | 3 | Node.TEXT_NODE |
| 文档类型节点（DocumentType） | 10 | Node.DOCUMENT_TYPE_NODE |
| 注释节点（Comment） | 8 | Node.COMMENT_NODE |
| 文档片断节点（DocumentFragment） | 11 | Node.DOCUMENT_FRAGMENT_NODE |
nodeName
nodeName属性返回节点的名称，返回的值都为大写
Hello World
nodeValue
nodeValue属性返回一个字符串，表示当前节点本身的文本值，该属性可读写只有文本（text）、注释节点（comment）、和属性节点（attr）有文本值。
Hello World
textContent
texContent属性返回当前节点和它的所有后代节点的文本内容
hello JavaScriptDOM
nextSibling
nextSibling属性返回紧跟在当前节点后面的第一同级节点。
如果当前节点后面没有同级节点则返回null
（注意：可能会获取到“空格”或“回车”这样的文本节点）
helloworld
previousSibling
previousSibling属性返回当前节点前面距离最近的一个同级节点。如果前面没有同级节点，则返回null
helloworld
parentNode
parentNode属性返回当前元素的父节点。
hello world
parentElement
parentElement属性返回当前节点的父元素节点。如果当前节点没有父节点，或者父节点类型不是元素节点，则返回null。
hello world
firstChild和lastChild
firstChild属性返回当前节点的第一个节点，如果当前节点没有子节点，则返回null，lastChild返回最后一子节点。
hello world我是子节点
我是子节点
childNodes
childNodes属性返回一个类似数组对象（NodeList集合），成员包括当前节点的所有子节点。
hello world我是子节点
可以使用for循环来遍历某个节点的所有子节点
var div = document.getElementById('div1');
var children = div.childNodes;
for (var i = 0; i < children.length; i++) {cosole.log(children[i]);
}3.方法
最常用的方法是appendChild()，用于在 childNodes 列表末尾添加节点。
appendChild()
appendChild方法接受一个子节点对象作为参数，将其作为最后一个节点，插入当前节点。该方法的返回值就是插入文档的子节点。
insertBefore()
insertBefore方法用于将某个节点插入父节点内部的指定位置。
var insertedNode = parentNode.insertBefore(newNode, referenceNode);
insertBefore方法接受两个参数，第一个参数是所要插入的节点newNode，第二个参数是父节点parentNode内部的一个子节点referenceNode。newNode将插在referenceNode这个子节点的前面。返回值是插入的新节点newNode
foo bar
removeChild()
removeChild方法接受一个子节点作为参数，用于从当前节点移除该子节点。返回值是移除的子节点。
我是span标签
replaceChild()
replaceChild方法用于将一个新的节点替换当前节点的某一个子节点。
var replacedNode = parentNode.replaceChild(newChild, oldChild);
replaceChild方法接受两个参数，第一个参数newChild是用来替换的新节点，第二个参数oldChild是将要替换走的子节点。返回值是替换走的那个节点oldChild。
我是span标签
其他方法
clone Node()
返回调用该方法的节点的一个副本
var dupNode = node.cloneNode(deep);
node
将要被克隆的节点
dupNode
克隆生成的副本节点
deep 可选
是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身。
var p=document.getElementById('para1');
var p_prime=p.cloneNode(true);本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！