获取节点方法
1.直接获取(id/className/tagName)(主要3种)(上文)
2.间接获取:访问关系获取(4种)本文
访问关系一共有四种:
body案例
<div class="box1">
<ul>
<li>1</li>
<li>2</li>
<li id="box">3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
1.父节点
一个节点只有一个父节点.节点的父亲,兼容性好
用法:子节点.parentNode
var box = document.getElementById("box");
console.log(box.parentNode);//<ul>...</ul>
2.兄弟节点
有两个,前一个兄弟节点|后一个兄弟节点
火狐、谷歌、IE9+支持(不会获取文本节点):
previousElementSibling
nextElementSibling
IE678支持。火狐谷歌IE9+也支持他,但功能性更强,能够获取文本节点:
previousSibling
nextSibling
var box = document.getElementById("box");
//火狐、谷歌、IE9+下测试:
console.log(box.previousElementSibling);//<li>2</li>
console.log(box.previousSibling);//#text
兼容写法:
var aaa = box.previousElementSibling || box.previousSibling;
var bbb = box.nextElementSibling || box.nextSibling;
注意:这两者前后顺序不可交换!因为previousSibling都兼容,把它放前面会直接选用它。
3.单个子节点
有两个,第一个节点|最后一个节点。 调用者是父节点。
火狐、谷歌、IE9+支持(不会获取文本节点):
firstElementChild
nextElementChild
IE678支持。火狐谷歌IE9+也支持他,但功能性更强,能够获取文本节点:
firstChild
nextChild
//兼容写法:
box = box.parentNode;
var aaa = box.firstElementChild || box.firstChild;
var bbb = box.lastElementChild || box.lastChild;
4.所有子节点
有两个。childNodes|children
childNodes:(w3c亲儿子,嫡出✘)
(返回指定元素的子元素集合,包括HTML节点,所有属性,文本节点。火狐、谷歌等高本版会把换行也看做是子节点。)
w3c支持它,功能性更强,能够获取文本节点。获取的元素不能直接使用,需要和nodeType(元素节点1、属性节点2、文本节点3)连用。
children:(侧室所生,庶出✔)
只返回HTML节点,不会获取文本节点。在IE678中能够获取注释节点。
这两者返回值是数组。所以要小心使用数组中的每一个元素。
以上主要使用两个:children、parentNode
前一个子节点: 自己.children[0]
前一个兄弟节点: 自己parentNode.children[对应的索引值]
未完待续…