本文介绍了DOM操作中节点的概念，包括元素节点、属性节点和文本节点，强调了节点操作在提升效率方面的重要性。通过案例分析，展示了如何利用节点的children和parentNode属性实现导航栏下拉菜单效果，以及如何通过节点操作动态创建和添加元素。此外，还探讨了在JavaScript中通过事件监听实现元素的显示与隐藏，进一步说明了节点操作在实际开发中的应用。
节点（node）
前面我们聊到，一篇DOM就够了章节，我们掌握了常用的操纵元素方法…接下里我们聊聊节点是如何高效操作的…
那么什么是节点呢？(都有哪些类型，以及如何判断)
其实页面上的所有看得到的，看不到的：都叫节点，看不到的这里举个栗子（换行,元素的属性等）。
这么多节点，那一定有分类了，那你猜对了;确实有：并且分为1号标签节点，2号属性节点，3号文本节点；为什么有1.2.3号呢？这个是程序之初设置好的，我们可以这么理解，1就代表标签节点，2就代表… 3就代表文本节点…
如果我们获取的节点，不知道是什么类型节点的话，怎么办？那么就可以在获取该节点的后面加上this.nodeType看他的返回值来确定他的节点类型。
那么现在就搞懂了，都有哪些节点类型，以及怎么去判断他们…
元素节点的操作，获取
我们在开发中最想要用的还是元素的节点，那么这里我们也就只聊聊元素节点的操作，这个时候有两个问题（1，为什么要用节点获取元素标签，之前不已经学了获取标签的方式了么？，2，为什么只聊元素的节点操作）
- 我们之前在DOM部分学习了如何使用操作语句操作标签元素来完成我们想要的效果，其实并不高效，因为我们会发现，只要你想操作的元素你就必须先获取到这个元素，否则就操作失败，那么这个时候也就体现了元素节点操作的重要性，因为他可以通过
.chlidren来获取子元素标签（伪数组），可以通过.parentNode来获取父亲元素标签，真的是非常方便，也就省去了我们之前繁琐的不断的获取操作，也显得节点操作更加高效… - 节点方法有很多但是，我们需要的却很少，因为兼容性问题，比如方法中带有Element的，都老版本浏览器都不支持，另外我们接触的最多的还是元素标签的操作，让他们完成一些我们想要的效果，因此其他的作为了解，这个熟练掌握。
那么如何获取标签元素呢？
我们通过两个案例来聊：（导航栏下拉菜单效果的案例）
案例一：
案例目标：熟练children,parentNode;的用法
案例需求：
- 鼠标放到哪个导航li的上面，谁的下方就显示一个新的列表
- 鼠标离开后，下方新的列表消失
案例分析：
- 结构方面：使用父ul包裹li,此时的li，我们叫做父li；父li中包裹一个a与新的ul，新的ul中再放li。如下结构：
<ul class="nav"> // 父ul
<li> // 父li
<a href="#">微博</a>
<ul> // 子ul
<li> // 子li
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
- 样式方面：让子ul，也就是下拉菜单放到父li的正下方（如下图）
- 行为：先获取父ul，通过
children的节点操作获取父li,然后遍历获取到的父li,给每一个父绑定鼠标移入onmouseover与鼠标移出事件onmouseout;在事件内部让父li中的第二个节点标签（this.children）显示隐藏，操作语句为：this.children[1].style.display = 'block或者给他的值设为none;
具体案例实现看下面的代码：
样式：
<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>
结构：
<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>
// 获取元素
var nav = document.querySelector('.nav');
// 获取四个小li
var lis = nav.children;
// 遍历小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>
案例二：
结构：
<textarea name="" id=""></textarea>
<button>发布</button>
<ul> // 这里是把ul直接物理创建好了，也可以在js中进行创建，创建的方法与下方创建li的方法一致
</ul>
样式：
<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: rgb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
}
</style>
行为：
<script>
// 获取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
// 给按钮添加事件
btn.onclick = function() {
// 判断输入框中的内容是否为空，为空弹出请输入内容
if (text.value == '') {
alert('傻瓜,不写内容你发表个毛毛虫喔...');
return false;
} else {
// 创建元素li
var li = document.createElement('li');
// 把输入框中的内容传给这个li
li.innerHTML = text.value;
// 把创建的元素添加给ul（下面是两种添加方式）
// ul.appendChild(li); // 把li添加到最后面
ul.insertBefore(li, ul.children[0]); // 把li添加到最前面
}
}
</script>
效果在这里就不做也演示了，复制到自己的编译环境中试试吧…
不断复盘，不断优秀，让自己成为镜子里想成为的那个人.关注三连，持续更新~~~
扫一扫
2747
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
