JavaScript（js)节点--父节点、子节点、兄弟节点

JavaScript（js)节点–父节点子节点

一般节点至少拥有nodeType（结点类型），nodeName（节点名称）和nodeValue(节点值)这三个基本属性。

元素节点 nodeType为1。

属性节点 nodeType为2。

文本节点 nodeType为3。（文本节点包含文字、空格、换行等）

实际开发中节点操作主要操作元素节点。

<ul>
    <li>我是li1</li>
    <li>我是li2</li>
    <li>我是li3</li>
    <li>我是li4</li>
</ul>
<ol>
    <li>我是li1</li>
    <li>我是li2</li>
    <li>我是li3</li>
    <li>我是li4</li>
</ol>
<div class="box">
    <span class="erwetma">x</span>
</div>

父节点：node.parentNode 得到的是离元素最近的父级节点，如果找不到父节点节返回为null

<script>
	var erweima = document.querySelector('.erweima');
    console.log(erweima.parentNode);
</script>

子节点：node.childNode 得到的是所有的子节点，包括元素节点，文本节点等。

node.children 获取所有的子元素节点，也是实际开发常用的方法。

<script>
	var ul =document.querySelector('ul');
    console.log(ul.childNodes);//得到9个子节点，五个文本节点，四个元素节点。
    console.log(ul.children);//得到4个li。
</script>

第一个子节点firstChild和最后一个子节点lastChild

firstChild和lastChild返回的是第一个和最后一个子节点，不管是文本节点还是元素节点。

firstElementChild和lastElementChild返回第一个和最后一个元素子节点。(IE9以上支持)

<script>
	var ul = document.querySelector('ul');
    console.log(ul.firstChild);//输出结果为:#text
    console.log(ul.lastChild);//输出结果为:#text
    console.log(ul.firstElementChild);//输出结果为:我是li1
    console.log(ul.lastElementChild);//输出结果为:我是li4
    console.log(ul.children[2]);//输出结果为：我是li3；无兼容性，实际开发常用
    console.log(ul.children[0]);//输出第一个子元素节点
    console.log(ul.children[ul.children.length-1]);//输出最后一个子元素节点
</script>

---

兄弟节点：

返回上/下一个兄弟节点，包含元素节点、文本节点等。

下一个兄弟节点node.nextSibling

上一个兄弟节点node.previousSibling

返回上/下一个兄弟元素节点（IE9以上兼容）

下一个兄弟元素节点node.nextElementSibling

上一个兄弟元素节点node.previousElementSibling