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);//输出结果为:#textconsole.log(ul.lastChild);//输出结果为:#textconsole.log(ul.firstElementChild);//输出结果为:我是li1console.log(ul.lastElementChild);//输出结果为:我是li4console.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