DOM 节点操作 在dom中,节点与节点之间的关系可以有哪几种

网页中的所有内容都是节点（标签、注释、文本、属性），在DOM中，节点使用node表示。

DOM树中的所有节点都可以通过JS访问，所有元素也可被修改、删除、创建。

节点类型（nodeType ）、节点名称（nodeName）、节点值（nodeValue）

元素节点nodeType :1;

属性节点nodeType:2;

文本节点nodeType:3; //包含文字 空格 换行等

节点层级

1. 父节点：node.parentNode

返回的最近的一个父节点；找不到的时候返null；

2.子节点：

• parentNode.childNodes 、

返回所有的子节点 （包括 元素节点 文本节点）

• parentNode.childe（非标准，开发是常用）

获取所有的子元素节点

• parentNode.firstChild parentNode.lastChild

返回的的是第一个/最后一个字元素节点（包括其他节点）

• parentNode.firstElementChild parentNode.lastElementChild //IE9以上才支持

实际开发中的写法：

console.log (ol.children[ol.children.length-1])

3.兄弟节点

• node.nextSibling 返回下一个兄弟节点 包括文本节点或其他节点；
• node.previousSibling 返回上一个兄弟节点 包括文本节点或其他节点；
• node.nextElementSibling 返回下一个兄弟元素节点 找不到返回null （IE9以上支持）
• node.previousElementSibling 返回上一个兄弟元素节点 找不到返回null （IE9以上支持）

4.创建节点

document.createElement('tagName') 动态创建元素节点

5.添加节点

• node.appendChild(child) node 父级 child 子级 后面追加元素 类似于数组中的push
• node.insertBefore(childe,指定元素) 添加节点到指定子节点的前面

6.删除节点

node.removeChilde(child)