使用 jQuery 时间长了，对 dom 的基本操作难免生疏，总结些常用的，免得使用时捉急。
DOM 创建
1
2
| document.createElement('div');
document.createTextNode('wxnacy');
|
DOM 查询
1
2
3
4
5
6
| document.querySelector(".myclass");
document.querySelectorAll("div.note, div.alert");
document.getElementById('id');
document.getElementsByClassName('className');
document.getElementsByTagName('td');
|
Element 查询
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| // 获取父元素、父节点
var parent = ele.parentElement;
var parent = ele.parentNode;
// 获取子节点，子节点可以是任何一种节点，可以通过nodeType来判断
var nodes = ele.children;
// 查询子元素
var els = ele.getElementsByTagName('td');
var els = ele.getElementsByClassName('highlight');
// 当前元素的第一个/最后一个子元素节点
var el = ele.firstElementChild;
var el = ele.lastElementChild;
// 下一个/上一个兄弟元素节点
var el = ele.nextElementSibling;
var el = ele.previousElementSibling;
|
删除元素
1
| ele.parentNode.removeChild(ele);
|
class
1
2
3
4
| element.classList
element.classList.add(c1, c2)
element.classList.remove(c1, c2)
element.classList.contains(className)
|