【整理】JavaScript中DOM操作全面解析与实践指南

1 // 返回当前文档中第一个类名为 "myclass" 的元素
2 var el &＃61; document.querySelector(".myclass");
3
4 // 返回一个文档中所有的class为"note"或者 "alert"的div元素
5 var els &＃61; document.querySelectorAll("div.note, div.alert");
6
7 // 获取元素
8 var el &＃61; document.getElementById(&＃39;xxx&＃39;);
9 var els &＃61; document.getElementsByClassName(&＃39;highlight&＃39;);
10 var els &＃61; document.getElementsByTagName(&＃39;td&＃39;);
11 Element也提供了很多相对于元素的DOM导航方法&＃xff1a;
12
13 // 获取父元素、父节点
14 var parent &＃61; ele.parentElement;
15 var parent &＃61; ele.parentNode;//只读&＃xff0c;没有兼容性问题
16 var offsetParent&＃61;ele.offsetParent;//只读&＃xff0c;找到最近的有定位的父节点。
17 　　　　　　　　　　　　　　　　　　　　　//没有定位父级时&＃xff0c;默认是body;但在IE7以下&＃xff0c;如果当前元素没有定位属性&＃xff0c;返回body&＃xff0c;如果有&＃xff0c;返回HTML;
18 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 //如果当前元素某个父级触发了haslayout&＃xff0c;则返回触发了haslayout这个元素。
19
20 // 获取子节点&＃xff0c;子节点可以是任何一种节点&＃xff0c;可以通过nodeType来判断
21 var nodes &＃61; ele.children;//标准下、非标准下都只含元素类型&＃xff0c;但对待非法嵌套的子节点&＃xff0c;处理方式与childNodes一致。
22 var nodes &＃61; ele.childNodes;//非标准下&＃xff1a;只包含元素类型&＃xff0c;不会包含非法嵌套的子节点。
23 　　　　　　　　　　　　　　　　//标准下&＃xff1a;包含元素和文本类型&＃xff0c;会包含非法嵌套的子节点。
24
25 //获取元素属性列表
26 var attr &＃61; ele.attributes;
27
28 // 查询子元素
29 var els &＃61; ele.getElementsByTagName(&＃39;td&＃39;);
30 var els &＃61; ele.getElementsByClassName(&＃39;highlight&＃39;);
31
32 // 当前元素的第一个/最后一个子元素节点
33 var el &＃61; ele.firstChild;//对待标准和非标准模式&＃xff0c;如childNods
34 var el &＃61; ele.lastChild;
35 var el &＃61; ele.firstElementChild;//非标准不支持
36 var el &＃61; ele.lastElementChild;
37 // 下一个/上一个兄弟元素节点
38 var el &＃61; ele.nextSibling;
39 var el &＃61; ele.previousSibling;
40 var el &＃61; ele.nextElementSibling;
41 var el &＃61; ele.previousElementSibling;

1 var first&＃61;ele.firstElementChild||ele.children[0];

1 // 添加、删除子元素
2 ele.appendChild(el);
3 ele.removeChild(el);
4
5 // 替换子元素
6 ele.replaceChild(el1, el2);
7
8 // 插入子元素
9 parentElement.insertBefore(newElement, referenceElement);
10
11 //克隆元素
12 ele.cloneNode(true) //该参数指示被复制的节点是否包括原节点的所有属性和子节点

1 // 获取一个{name, value}的数组
2 var attrs &＃61; el.attributes;
3
4 // 获取、设置属性
5 var c &＃61; el.getAttribute(&＃39;class&＃39;);
6 el.setAttribute(&＃39;class&＃39;, &＃39;highlight&＃39;);
7
8 // 判断、移除属性
9 el.hasAttribute(&＃39;class&＃39;);
10 el.removeAttribute(&＃39;class&＃39;);
11
12 // 是否有属性设置
13 el.hasAttributes();