原生DOM操作汇总

节点类型

1. Attr
2. Document
3. Element
4. Text
5. ……其他

节点之间的关系

1. 父节点：parentNode
2. 子节点：childNodes
3. 前一个兄弟节点：nextSibling
4. 后一个兄弟节点：previousSibling
5. 第一个子节点：firstChild
6. 最后一个子节点：lastChild

节点元素关系

1. children:返回所有元素子节点
2. nextElementSibling:返回元素的下一个兄弟元素节点；
3. previousElementSibling:返回元素的上一个兄弟元素节点；

创,增，删，改，查

创建

1. 创建元素：document.createElement(‘div’);
2. 创建文本节点：document.createTextNode(‘文本内容’);
3. element.cloneNode(true/false);

添加

1. append()
2. appendChild()
3. insertBefore()
4. replaceChild()

删除

1. removeChild()

更改

1. replaceChild()

查找

1. document.getElementById();
2. document.getElementsByTagName();
3. document.getElementsByName(“div2”);
4. document.document.getElementsByClassName(“one”);
5. document.getElementsByClassName(“one two”);
6. document.querySelector()
7. document.querySelectorAll()

属性操作

1. attributes
2. setAttribute()
3. getAttribute()
4. hasAttributes()
5. removeAttribute()

---

参考文章：

常见的原生javascript DOM操作

原生JavaScript的DOM操作汇总