DOM节点

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（增删改查)
document 的模型
把文档映射成一个文档模型，通过 模型 可以操作文档的 任何节点

DOM树:浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。

DOM树:浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。

节点的属性

nodeType
nodeType属性返回一个整数值，表示节点的类型。
元素节点 (element) 1
属性节点 (attribute) 2
文本节点 (text) 3
注释节点 (Comment) 8
文档节点 (document) 9
文档类型节点 (DocumentType) 10
文档片断节点 (DocumentFragment) 11

nodeName
nodeName 返回节点的名称
元素节点 (element) 大写的标签名
属性节点 (attribute) 属性的名称
文本节点 (text) #text
注释节点 (Comment) #comment
文档节点 (document) #document
文档类型节点 (DocumentType) 文档的类型
文档片断节点 (DocumentFragment) #document-fragment

nodeValue
nodeValue 返回节点的文本值，可读可写(只有文本节点才能有文本值)

textContent
textContent 返回当前节点和他所有后代节点的文本。忽略标签。
同样textContent也是一个可读可写的属性。如果写入的内容包含标签， 也会把标签当做文本

nextSibling
返回当前节点的下一个兄弟节点
previousSibling
返回当前节点的上一个兄弟节点
回车也是一个文本节点 换行符

parentNode
返回当前节点的父级节点。只可能是document文档节点或元素节点
html的父节点是document html没有父级元素节点

parentElement
返回当前节点的父级元素节点。没有返回null

firstChild返回当前节点中的第一个子节点。
lastChild 返回当前节点中的最后一个子节点。
没有则返回null

childNodes
childNodes返回当前节点的所有子节点。是一个nodelist数据

children
children返回当前节点的所有元素子节点。返回的是一组nodelist数据

节点的方法
appendChild()
用来插入节点 (只能传一个参数,向后插入)

createElement()
创建元素节点

append()
向当前元素最后添加一个或多个子节点

prepend()
向当前元素最前面添加一个或多个子节点

after()
向当前节点后面添加一个或多个节点

before()
向当前节点前面添加一个或多个节点

removeChild()
表示从父元素中移除该子节点。 (移除一个子节点)

insertBefore()
用来将一个节点插入到指定位置
要传入两个值。第一个值为要添加的节点。第二个值为将新节点插入到此值的前面。
如果第二个值为null，就会插入到当前元素的最后。

replaceChild()
表示替换当前节点的某一个子节点
传入两个值。第一个值是新节点。第二个值是被替换的节点

replaceWith()
替换当前节点。

hasChildNodes()
用来判断一个节点是否有子节点
该方法返回一个布尔值。表示当前节点是否有子节点。

cloneNode()
用来克隆一个节点
该方法可以传入一个布尔值。值为true，表示复制指定元素和指定元素的子节点。默认(flase)不复制子节点。
复制的元素不包括添加在该元素上的事件。要用appendChild把复制的节点，添加到文档中去。