常见DOM操作

1.查

1.节点的基本属性

1.1 nodeType:返回当前节点的类型

节点.nodeType

1：标签节点
2：属性节点
3：文本节点
8：注释节点

1.2 nodeName ：节点名称 （li）

1.3 nodeValue ： 节点内容

2.获取子节点

2.1 父节点.children 只获取标签

2.2 父节点.childrenNodes 会获取到标签/文本注释

3.获取父节点

3.1 子节点.parentNode 查询直接父节点

3.2 获取定位父节点

子节点.offsetParent :如果没有定位父节点，直接获取到body
（有定位的父节点：position）

4.获取兄弟节点

4.1 获取首节点 父节点.firstChild

4.2 获取尾结点 父节点.lastChild 、父节点.lastElementChild

5. 获取下一个兄弟节点

参考节点.nextsibling
参考节点.nextElementSibling

6.获取上一个

参考节点.previousSibling
参考节点.previousELementSibling

2.加

2.1 父节点.appendChild(子节点)

2.2 在某个元素之前添加 父节点.insertBefore(newChild新节点,refChild参考节点)

3. 删除节点

节点.remove():删除节点本身
父节点.removeChild(子节点)

4.替换

父节点.replaceChild(newChild,refChild)

5. 复制节点

被复制的节点.cloneNode(boolean)
boolean:默认是false：复制标签，没有内容
true:复制标签和内容

6.查

document.querySelectort(css选择器)：获取符合的第一个元素
document.querySelectortAll(css选择器)：获取符合的所有元素