js节点和描述节点之间的关系及应用
节点 : Node(页面中所有东西都是节点)
节点集合： NodeList （getElementsByName / querySelectorAll获取的都是节点集合）
- 元素节点（元素标签）
- nodeType： 1
- nodeName： 大写的标签名
- nodeValue: null
- 文本节点
- nodeType： 3
- nodeName： ’#Text’
- nodeValue: 文本内容
- 注释节点
- nodeType：8
- nodeName： ’#comment’
- nodeValue: 注释内容
- 文档节点
- nodeType： 9
- nodeName： ’#document’
- nodeValue: null
- ……
描述这些节点之间的关系属性
- parent：获取父级节点
- childNodes ： 获取所有子节点
- firstChild:获取第一个子节点
- lastChild：获取最后一个子节点
- children： 获取所有的元素子节点（子元素标签）
- firstElementChild/lastElementChild:获取第一个/最后一个元素子节点（不兼容ie678）
- previousSibling:获取上一个兄弟节点
- previousElementSibling/nextElementSibling:获取上/下一个兄弟元素节点（不兼容ie678）
节点的应用
<ul id="box">
<li>git,npm操作</li>
<li>面相对象和原型</li>
<li>闭包作用域，堆栈内存处理</li>
<li>es6从入门到放弃</li>
<li>Dom事件</li>
</ul>
<script>
let box=document.getElementById("box")//<li>git,npm操作</li>
console.log(box.firstElementChild);//
console.log(box.firstElementChild.nextElementSibling)//<li>面相对象和原型</li>
</script>
封装元素子节点children
//封装元素子节点children
function children(content){
//现获取所有子节点
let res=[],
nodeList=content.childNodes;
//循环所有子节点
for (let i = 0; i < array.length; i++) {
var item=NodeList;
item.nodeType===1?res.push(item):null
}
return res;
封装获取上一个兄弟元素节点
//获取上一个兄弟元素节点
function prev(content){
//先找上一个兄弟节点
var pre=content.previousSibling;
while(pre.nodeType !== 1){
pre=pre.previousSibling;
}
return pre
}
