这篇博客详细介绍了DOM中的节点基础知识，包括节点类型、节点层级，如获取父级、子级和兄弟节点的方法，并通过案例展示了下拉菜单的实现。接着，文章探讨了DOM中的节点操作，如创建、添加、删除节点以及复制节点，提供了具体的代码示例和最佳实践建议。
节点基础
1.什么是节点
HTML文档可以看作是一个节点树，网页中的所有内容都是节点，一般来说，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这3个基本属性。
下面列举常见的节点类型：
- 元素节点，nodeType为1
- 属性节点，nodeType为2
- 文本节点，nodeType为3，文本节点包含文字、空格、换行等
2.节点层级
DOM根据HTML中各节点的不同作用，可将其分别划分为标签节点（元素节点）、文本节点和属性节点。
- 根节点：< html >标签是整个文档的根节点，有且仅有一个
- 父节点：指的是某一个节点的上级节点
- 子节点：指的是某一个节点的下级节点
- 兄弟节点：两个节点同属于一个父节点
（1）获取父级节点
在JavaScript中，可以使用parentNode属性来获得离当前元素的最近的一个父节点，如果找不到父节点就返回为 null，语法格式为：obj.parentNode，obj是一个DOM对象。
<body>
<div>
<span class="child"></span>
</div>
<script>
var child = document.querySelector(".child");
console.log(child.parentNode);
</script>
</body>
（2）获取子级节点
在JavaScript中，可以使用childNodes属性或者children属性两种方式来获得当前元素的所有子节点的集合，接下来我们就分别介绍这两种方式的用法。
- childNodes属性获得的是当前元素的所有子节点的集合，该集合为即时更新的集合。下面通过案例的形式演示如何获取当前元素子节点。
- children是一个可读的属性，返回所有子元素节点。children只返回子元素节点，其余节点不返回，目前各大浏览器都支持该属性，在实际开发中推荐使用children。
<body>
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>赵六</li>
</ul>
<script>
var ul = document.querySelector("ul");
var lis = ul.querySelectorAll("li");
console.log(lis);
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);
console.log(ul.children);
</script>
</body>
注意：childNodes属性与children属性虽然都可以获取某元素的子元素，但是两者之间有一定的区别。前者用于节点操作，返回值是NodeList对象集合，后者用于元素操作，返回的是HTMLCollection对象集合。
- 使用firstChild属性和lastChild属性获取子节点，前者返回第一个子节点，后者返回的是最后一个子节点，如果找不到则返回null。需要注意的是它们的返回值包括文本节点和元素节点等。
- 使用firstElementChild属性和lastElementChild属性获取子元素节点，前者返回第一个子元素节点，后者返回最后一个子元素节点，如果找不到则返回null。需要注意的是，这两个属性有兼容性问题，IE9以上才支持。
注意：实际开发中，firstChild 和lastChild 包含其他节点，操作不方便，而firstElementChild和lastElementChild又有兼容性问题，为了解决兼容性问题，在实际开发中通常使用“obj.children[索引] ”的方式来获取子元素节点。
obj.children[0] // 获取第一个子元素节点
obj.children[obj.children.length - 1] // 获取最后一个子元素节点
（3）获取兄弟节点
在JavaScript中，可以使用nextSibling属性获得下一个兄弟节点，或者使用previousSibling属性获得上一个兄弟节点，它们的返回值包含元素节点或者文本节点等。如果找不到，就返回null。
3.【案例】下拉菜单
<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>
效果图如下：
节点操作
1.创建节点
在DOM中，使用document.createElement(‘tagName’)方法创建由tagName指定的HTML元素，也称为动态创建元素节点。
动态创建元素节点的3种常见方式如下：
- document.write()创建元素，如果页面文档流加载完毕，再调用会导致页面重绘
- element.innerHTML将内容写入某个DOM节点，不会导致页面全部重绘
- document.createElement()创建多个元素效率稍微低一点，但是结构更加清晰
2.添加和删除节点
DOM中，提供了node.appendChild()和node.insertBefore()方法用于添加节点，node. removeChild(child)用于删除节点。
- appendChild()方法，将一个节点添加到指定父节点的子节点列表末尾
- insertBefore(child, 指定元素)方法，将一个节点添加到父节点的指定子节点前面
- removeChild(child)用于删除节点，该方法从DOM中删除一个子节点，返回删除的节点
3.【案例】简易留言板
<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下的li
var as = document.querySelectorAll('a');
for(var i=0;i<as.length;i++){
as[i].onclick = function(){
ul.removeChild(this.parentNode);//删除当前a标签的父节点--li
}
}
}
}
</script>
</body>
4.复制节点
在DOM中，提供了node.cloneNode()方法，返回调用该方法的节点的一个副本，也称为克隆节点或者拷贝节点。语法为“需要被复制的节点.cloneChild(true/false) ”。如果参数为空或false，则是浅拷贝，即只复制节点本身，不复制里面的子节点；如果括号参数为true，则是深拷贝，即会复制节点本身及里面所有的子节点。
<body>
<ul id="mylist">
<li>苹果</li>
<li>橙子</li>
<li>橘子</li>
</ul>
<ul id="op"></ul>
<button onclick="fun()">克隆</button>
<script>
function fun(){
//1.找到mylist的第一子节点
var item = document.getElementById('mylist')
//2.复制子节点
var cloneItem = item.cloneNode(true);
//3.将复制的节点添加到op中
document.getElementById('op').appendChild(cloneItem)
}
</script>
</body>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
