JavaScript 获取节点，操作节点#

1p.nodeType == 1// true 判断是否存在节点 是不是一个元素
2// 1 元素节点 2 属性节点 3 文本节点
3
4p.nodeName
5// #text 文本节点的名字
6// P  元素节点的元素名 大写
7// #comment 注释节点的名字
8
9p.nodeValue // 文本节点的内容
10// 必须是文本节点，元素节点会返回 null
11
12父元素.children 获取子节点
13// IE9+ 正常
14// IE8-中 会获取 注释和元素节点
15
16// 父节点
17p.parentNode;// 获取直系父元素
18p.offsetParent;// 获取上一个带有定位的父元素，position:stalic不算
19/*
20兼容方法
21  firstchild 都有值，firstElementChild IE 会 undefined
22  短路运算
23  firstElementChild || firstchild;
24*/
25
26// 子节点
27p.firstChild;// 标准浏览器获取第一个 文本或换行 节点，IE 只获取第一个元素
28p.firstElementChild;// 标准浏览器只获取第一个元素，IE 为 undefined
29lastElementChild || lastChild; 最后一个子节点
30
31// 兄弟节点
32p.previousElementSibling || p.previousSibling;// 上一个兄弟节点
33p.nextElementSibling || p.nextSibling;// 下一个兄弟节点

1// 新建节点
2const li = document.createElement('p') // 新建li元素
3const text = document.createTextNode('wenben') // 新建文本
4
5// 插入节点
6父节点.appendChild(li) // 父节点的末尾插入
7父节点.insertBefore(li, 参照子节点) // 在参照子节点前插入
8
9// 替换节点
10// 替换之前的文本依然还在 ，但它在文档中已经没了自己的位置
11父节点.replaceChild(新节点, 被替换的子节点) // 替换
12
13// 删除节点
14// 移除的节点仍然为文档所有，只不过没有了自己的位置
15父节点.removeChild(子节点) // 删除子节点
16节点.remove() // 自己删除自己
17
18// 克隆节点
19节点.cloneNode(false) // 默认：只复制本身空标签
20节点.cloneNode(true) // 本身与所有子节点都复制