节点（属性、层级、操作）

一、节点

HTML文档可以看作是一个节点树，网页中的所有内容都是节点。

1.节点的属性

（1）节点类型：nodeType

元素节点 ---1

属性节点 ---2

文本节点 ---3 （文字、空格、换行）

（2）节点名称：nodeName

（3）节点值：nodeValue

2.节点层级

一个HTML文件可以看作是所有元素组成的一个节点树，各元素节点之间有级别的划分。

（1）根节点：<html>就是根节点，有且只有一个

（2）父节点：一个节点的上级节点

（3)子节点：一个节点的下级节点

（4）兄弟节点：具有相同父节点的节点

3.节点的操作

（1）获取父节点：element.parentNode

<body><div class="demo"><div class="box"><span class="child">西安邮电大学</span></div></div><script>var child = document.querySelector('.child');console.log(child.parentNode);</script>
</body>

(2)获取子节点

在JavaScript中，可以使用childNodes属性或者children属性两种方式来获得当前元素的所有子节点的集合。

children是一个可读的属性，返回所有子元素节点。children只返回子元素节点，其余节点不返回，目前各大浏览器都支持该属性，在实际开发中通常使用“obj.children[索引] ”的方式来获取子元素节点。。

element.childNodes：获取使用电子节点

element.children:获取子元素节点

firstChild:获取第一个子节点

lastChild:获取最后一个子节点

firstElementChild:获取第一个子元素节点

lastElementChild:获取最后一个子元素节点

（3）获取兄弟节点

在JavaScript中，可以使用nextSibling属性获得下一个兄弟节点，或者使用previousSibling属性获得上一个兄弟节点，它们的返回值包含元素节点或者文本节点等。如果找不到，就返回null。

nextSiBling：获取下一个兄弟节点

previousSiBling：获取上一个兄弟节点

nextElementSiBling：获取下一个元素的兄弟节点

previElementSiBling：获取下一个元素的兄弟节点

<body><div class="demo"><div class="box"><h2>德云</h2><span class="child">西安邮电大学</span><p>西安交通大学</p></div></div><div><ul><li>红楼梦</li><li>西游记</li><li>水浒传</li><li>三国演义</li></ul></div><script>var child = document.querySelector('.child');console.log(child.parentNode);var ul = document.querySelector('ul');var lis = ul.querySelectorAll('li');console.log(lis)console.log("childNodes获取ul的子节点：", ul.childNodes)//九个，包括换行console.log("children获取ul的子节点：", ul.children)//console.log("ul的第一个子节点类型：",ul.childNodes[0].nodeType) //文本console.log("ul的二个子节点类型：",ul.childNodes[1].nodeType)   //元素 （标签）console.log("ul的第一个子节点：",ul.firstChild);console.log("ul的最后一个子节点：",ul.lastChild);console.log("ul的第一个子元素节点：",ul.firstElementChild);console.log("ul的最后一个子元素节点：",ul.lastElementChild);var span = document.querySelector('.child');console.log("span的下一个兄弟节点：",span.nextSibling.nextSibling)console.log("span的上一个兄弟节点：",span.previousSibling.previousSibling)</script>
</body>

【案例】下拉菜单

案例需求：鼠标指针经过菜单时，显示当前下拉框中的内容同时隐藏其他下拉菜单内容

<style>*{margin: 0;padding: 0;}li{list-style-type: none;}a{text-decoration: none;font-size: 14px;}.nav{margin: 100px;}.nav>li{position: relative;float: left;width: 80px;height: 41px;text-align: center;}.nav li a{display: block;width: 100%;height: 100%;line-height: 41px;color: #333;}.nav>li>a:hover{background-color: #eee;}.nav ul{display: none;position: absolute;top: 41px;left: 0;width: 100%;border-left: 1px solid #FECC5B;border-right: 1px solid #FECC5B;}.nav ul li{border-bottom: 1px solid #FECC5B;}.nav ul li a:hover{background-color: #FFF5DA;}
</style>
<body><ul class="nav"><li><a href="#">微博</a><ul><li><a href="#">私信</a></li><li><a href="#">评论</a></li><li><a href="#">@我</a></li></ul></li><li><a href="#">留言板</a><ul><li><a href="#">私信</a></li><li><a href="#">评论</a></li><li><a href="#">@我</a></li></ul></li><li><a href="#">电话</a><ul><li><a href="#">私信</a></li><li><a href="#">评论</a></li><li><a href="#">@我</a></li></ul></li><li><a href="#">邮箱</a><ul><li><a href="#">私信</a></li><li><a href="#">评论</a></li><li><a href="#">@我</a></li></ul></li></ul><script>//1.获取外层的ul及其子元素节点var nav = document.querySelector('.nav');var lis = nav.children;//2.给每个li(菜单项)绑定鼠标进入和鼠标离开的事件for(var i=0;i<lis.length;i++){lis[i].onmouseover = function(){this.children[1].style.display = 'block'}lis[i].onmouseout = function(){this.children[1].style.display = 'none'}}</script>
</body>

（4）创建节点（动态创建节点）

在DOM中，使用document.createElement('tagName')方法创建由tagName指定的HTML元素，也称为动态创建元素节点。

document.write（）：若页面加载完毕，再次调用该方法会导致页面重绘

element.innerHTML：将节点加入到某个元素中，会导致元素的部分重绘

document.createElement（）：创建节点，结构清晰，效率不高

（5）添加和删除节点

DOM中，提供了node.appendChild()和node.insertBefore()方法用于添加节点，node. removeChild(child)用于删除节点。

appendChild（）：将节点添加到指定父节点的已有子节点集合末尾

insertBefore（）：将节点添加到指定父节点的已有子节点集合前面

removeChild（child）：删除一个指定的节点

【案例】简易留言板

案例分析：利用节点的创建、添加和删除相关知识完成一个简易的留言板功能。

<style>*{margin: 0;padding: 0;}body{padding: 100px;}textarea{width: 200px;height: 100px;border: 1px solid pink;outline: none;resize: none;}ul{margin-top: 50px;}li{width: 300px;padding: 5px;background-color: #eee;font-size: 15px;margin: 15px 0;}li a{float: right;}
</style>
<body><textarea></textarea><button>发布</button><ul></ul><script>//1.获取元素var btn = document.querySelector('button');var txt = document.querySelector('textarea');var ul = document.querySelector('ul');//2.按钮绑定click事件btn.onclick = function(){if(txt.value === ''){alert("您没有输入内容")}else{//2.1 创建子元素(li)var li = document.createElement('li');//2.2 将文本区的内容放入li中li.innerHTML = txt.value + "<a href='javascript:;'>删除</a>"txt.value = ''//2.3 将li添加到ul的最前面ul.insertBefore(li,ul.children[0]);//2.4 当用户点击删除时，删除ul下的livar as = document.querySelectorAll('a');for(var i=0;i<as.length;i++){as[i].onclick = function(){ul.removeChild(this.parentNode);//删除当前a标签的父节点--li}}}}</script>
</body>

（6）复制节点（克隆节点）

在DOM中，提供了node.cloneNode()方法，返回调用该方法的节点的一个副本，也称为克隆节点或者拷贝节点。语法为“需要被复制的节点.cloneChild(true/false) ”。

true:深拷贝，复制节点本身和所有子节点

false（或空）：浅拷贝，只赋值节点本身

<body><ul id="mylist"><li>苹果</li><li>橘子</li><li>橙子</li></ul><ul id="op"></ul><button onclick="fun()">点我</button><script>function fun(){//找到mylist的第一个子节点var item = document.getElementById('mylist').firstElementChild;//复制子节点var cloneItem = item.cloneNode(true);//将复制的节点添加到op中document.getElementById('op').appendChild(cloneItem)}</script>
</body>