节点操作

HTML DOM 节点
在 HTML DOM （文档对象模型）中，每个部分都是节点：
文档本身是文档节点
所有 HTML 元素是元素节点
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点
注释是注释节点
换行符也是节点

节点操作
object.parentNode: 获取该元素父节点
object.childNodes: 获取对象所有的子节点,只包含次级节点
object.firstChild: 获取该元素第一个子节点
object.lastChild: 获取该元素最后一个子节点
object.nextSibling: 获取该下一个兄弟节点
object.previousSibling: 获取该元素上一个兄弟节点

NODE属性
节点中文 nodeType(节点类型) nodeName(节点名) nodeValue(节点值)
元素 1 TagName null
属性 2 attr 属性值
文本 3 #text 文本值
注释 8 #comment 注释文字
文档 9 #document null

<ul id="ul"><li>balabala</li><li id="li2">xiuxiuxiu</li><li>bombombom</li></ul>

<script type="text/javascript">
//节点操作
console.log(document.getElementById("li2").parentNode);//获取该元素父节点
console.log(document.getElementById("ul").childNodes);//获取对象所有的子节点
console.log(document.getElementById("ul").firstChild);//获取该元素第一个子节点
console.log(document.getElementById("ul").lastChild);//获取该元素最后一个子节点
console.log(document.getElementById("li2").nextSibling);//获取该元素下一个兄弟节点
console.log(document.getElementById("li2").previousSibling);//获取该元素上一个兄弟节点
//属性操作
console.log(document.getElementById("ul").nodeType);//节点类型
console.log(document.getElementById("ul").nodeName);//节点名称
console.log(document.getElementById("ul").nodeValue);//节点值
</script>