本文详细介绍了DOM5节点操作的重要性，包括节点类型、层级关系、创建与添加、删除和克隆。通过实例演示了如何利用节点操作实现动态添加和删除元素，以及利用HTMLTreeGenerator插件查看DOM结构。
文章目录
DOM
5 节点操作
5.1为什么学节点操作
获取元素通常使用两种方式 :
1.利用DOM提供的方法获取元素
- document.getElementByld()
- document.getElementsByTagName()
- document.querySelector 等
- 逻辑性不强、 繁琐
2.利用节点层级关系获取元素
- 利用父子兄节点关系获取元素
- 逻辑性强,但是兼容性稍差
这两种方式都可以获取元素节点,我们后面都会使用,但是节点操作更简单
5.2 节点概述
网页中的所有内容 都是 节点(标签、属性、文本、注释等) , 在DOM中,节点使用node来表示。
HTML DOM树中的所有节点均可通过JavaScript进行访问, 所有HTML元素(节点)均可被修改, 也可以 创建或删除。
一般地， 节点至少拥有nodeType (节点类型)、nodeName (节点名称)和nodeValue (节点值)这三个基本属性。
eg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>我是div</div>
<span>我是span</span>
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<div class="box">
<span class="erweima">x</span>
</div>
<script>
var box = document.querySelector('.box');
console.dir(box);
</script>
</body>
</html>
- 元素节点nodeType 为1
- 属性节点nodeType 为2
- 文本节点nodeType 为3 (文本节点包含文字、空格、换行等)
我们在实际开发中,节点操作主要操作的是元素节点
5.3 节点层级
利用DOM树可以把节点划分为不同的层级关系,常见的是父子兄层级关系。
1 父级节点
node.parentNode
- parentNode属性可返回某节点的父节点 , 注意是最近的一个父节点
- 如果指定的节点没有父节点 则返回null
eg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>我是div</div>
<span>我是span</span>
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<div class="demo">
<div class="box">
<span class="erweima">x</span>
</div>
</div>
<script>
// 1 父节点 parentNode
var erweima = document.querySelector('.erweima'); // 获取二维码
// var box = document.querySelector('.box'); // 获取box
// 可以通过parentNode获取box
// 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点 就返回为空 null
console.log(erweima.parentNode);
</script>
</body>
</html>
2 子节点
1. parentNode.childNodes (标准)
parentNode. childNodes 返回包含 指定节点的子节点的集合, 该集合为即时更新的集合。
注意 : 返回值里面包含了所有的子节点,包括元素节点,文本节点等。
如果只想要获得里面的元素节点,则需要专门处理。所以我们一般不提倡使用childNodes
var ul = document.querySelector('ul');
for(var i = 0; i < ul.childNodes.length; i++) {
if (ul.childNodes[i].nodetype = 1) {
// ul.childNodes[i]是元素节点
console.log(ul.childNodes[i]);
}
2. parentNode.children(非标准)
parentNode. children是一个只读属性 , 返回所有的子元素节点。它只返回子元素节点 , 其余节点不返回( 这个是我们重点掌握的)。
虽然children是一个非标准 , 但是得到了各个浏览器的支持 , 因此我们可以放心使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>我是div</div>
<span>我是span</span>
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<ol>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ol>
<div class="demo">
<div class="box">
<span class="erweima">x</span>
</div>
</div>
<script>
// DOM 提供的方法 （API）获取
var ul = document.querySelector('ul'); // 得到ul
var lis = ul.querySelectorAll('li'); // 再去得到ul 里面的li
// 1 子节点 childNodes所有的子节点 包含 元素节点 文本节点等等
console.log(ul.childNodes); // 9 li有四个，换行是文本 五个 一共9
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);
// 2 children 获取所有的子元素节点 也是我们实际开发常用的
console.log(ul.children);
</script>
</body>
</html>
3. parentNode.firstChild
firstChild返回第一个子节点 , 找不到则返回null , 同样 , 也是包含所有的节点。
4. parentNode.lastChild
lastChild返回最后一个子节点 , 找不到则返回null . 同样 , 也是包含所有的节点
5. parentNode.firstElementChild
firstElementchild返回第一个子元素节点 , 找不到则返回null
6. parentNode.lastElementChild
lastElementChild返回最后一个子元素节点 , 找不到则返回null。
注意:这两个方法有兼容性问题, IE9以上才支持。
实际开发中, firstChild和lastChild 包含其他节点 , 操作不方便,而firstElementChild和lastElementchild又有兼容性问题 , 那么我们如何获取第一个子元素 节点或最后一个子元素节点呢?
解决方案:
如果想要第一个子元素节点,可以使用parentNode.chilren[0]
eg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是li5</li>
</ol>
<script>
var ol = document.querySelector('ol'); // 获取ol
// 1 firstChild 第一个子节点 不管是文本节点还是元素节点
console.log(ol.firstChild); // #text 第一个子节点，换行算文本节点
console.log(ol.lastChild); // #text
// 2 firstElementChild返回第一个子元素节点 ie9才支持
console.log(ol.firstElementChild);
console.log(ol.lastElementChild);
// 3 实际开发的写法 即没有兼容性问题 又返回第一个子元素
console.log(ol.children[0]); // 第一个孩子
console.log(ol.children[ol.children.length - 1]); // 最后一个孩子
</script>
</body>
</html>
3 兄弟节点
1. node.nextSibling
nextsibling 返回当前元素的下个兄弟节点 , 找不到则返回null。同样 , 也是包含所有的节点。
2. node.previousSibling
previoussibling 返回当前元素上一个兄弟节点 , 找不到则返回null。同样 , 也是包含所有的节点。
3. node.nextElementSibling
nextElementsibling返回当前元素下一个兄弟元素节点 , 找不到则返回null。
4. previousElementsibling
previousElementsibling返回当前元素上一个兄弟节点,找不到则返回null。
注意 : 这两个方法有兼容性问题，IE9 以上才支持。
问：如何解决兼容性问题？
答：自己封装一个兼容性的函数
function getNextElementsibling (element) {
var el = element;
while (el = el.nextSibling) {
if(el.nodeType=====1){
return el;
}
return null;
}
eg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>我是div</div>
<span>我是span</span>
<script>
var div = document.querySelector('div');
// 1 nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
console.log(div.nextSibling);
console.log(div.previousSibling);
// 2 nextElementSibling 得到下一个兄弟元素节点
console.log(div.nextElementSibling);
console.log(div.previousElementSibling);
</script>
</body>
</html>
5.4 创建节点
document. createElement ( 'tagName ')
document. createElement() 方法创建由 tagName 指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的 , 所以我们也称为动态创建元素节点。
5.5 添加节点
1. node.appendChild(child)
node . appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的 after 伪元素。
2. node.insertBefore (child,指定元素)
node.insertBefore ()方法将一个节点添加到父节点的指定子节点前面。类似于css里面的before伪元素。
注意：想要页面添加一个新的元素：1 创建元素 2 添加元素
eg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>123</li>
</ul>
<script>
// 1 创建节点元素节点
var li = document.createElement('li'); // 此时没有li, 要 添加节点
// 2 添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素 类似于数组中的 push
var ul = document.querySelector('ul');
ul.appendChild(li);
// 3 添加节点 node.insertBefore(child,指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili,ul.children[0]);
// 4 想要页面添加一个新的元素：1 创建元素 2 添加元素
</script>
</body>
</html>
案例：简单版发布留言案例
案例分析
- 核心思路 : 点击按钮之后 , 就动态创建一个li ,添加到 ul里面。
- 创建 li 的同时 , 把文本域里面的值通过li.innerHTML赋值给 li
- 如果想要新的留言后面显示就用appendChild 如果想要前面显示就用insertBefore
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
background-color: pink;
width: 300px;
height: 30px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<textarea name="" id="" cols="30" rows="10">123</textarea>
<button>发布</button>
<ul>
</ul>
<script>
// 1 获取元素
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 {
// （1）创建元素
var li = document.createElement('li');
// （2）添加内容 先有li 才能赋值
li.innerHTML=text.value;
// （3）添加元素
//ul.appendChild('li');
ul.insertBefore(li,ul.children[0]);
}
}
</script>
</body>
</html>
5.6 删除节点
node.removeChild(child)
node. removeChild()方法从DOM中删除一个 子节点,返回删除的节点。
eg. 点击按钮删除里面的孩子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>删除</button>
<ul>
<li>熊大</li>
<li>熊二</li>
<li>光头强</li>
</ul>
<script>
// 1 获取元素
var ul = document.querySelector('ul');
var btn = document
// 2 删除元素
// ul.removeChild(ul.children[0]);
// 3 点击按钮依次删除里面的孩子 单击按钮时执行 JavaScript
btn.onclick = function() { // onclik 干一个事情，执行一个操作
if(ul.children.length == 0) {
this.disabled = true;
} else {
ul.removeChild(ul.children[0]);
}
}
</script>
</body>
</html>
点击删除后
案例：删除留言案例
案例分析
- 当我们把文本域里面的值赋值给Ii的时候,多添加一一个删除的链接
- 需要把所有的链接获取过来,当我们点击当前的链接的时候,删除当前链接所在的Ii
- 阻止链接跳转需要添加 javascript:void(0);或者javascript:;
在之前简单版发布留言案例基础上修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
background-color: pink;
width: 300px;
height: 30px;
margin-bottom: 10px;
}
li a {
float: right;
}
</style>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<ul>
</ul>
<script>
// 1 获取元素
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 {
// （1）创建元素
var li = document.createElement('li');
// 添加内容 先有li 才能赋值
li.innerHTML=text.value + "<a href = 'javascript:;'>删除</a>";
// （2）添加元素
//ul.appendChild('li');
ul.insertBefore(li,ul.children[0]);
// (3) 删除元素 删除的是当前链接的li 它的父亲
var as = document.querySelectorAll('a');
for(var i = 0; i < as.length; i++) {
as[i].onclick = function() {
// node.removeChild(child); 删除的是 li 当前a 所在的li this.parentNode;
ul.removeChild(this.parentNode);
}
}
}
}
</script>
</body>
</html>
5.7 复制节点（克隆节点）
node.cloneNode()
node.cloneNode()方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点
注意:
- 如果括号参数为空或者为false , 则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点。
- 如果括号参数为true , 则是深度拷贝,会复制节点本身以及里面所有的子节点。
eg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>111</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector('ul');
// 1 node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签 不复制里面的内容
// 1 node.cloneNode(true); 括号为true深拷贝复制标签复制里面的内容
// var lili = ul.children[0].cloneNode();
var lili = ul.children[0].cloneNode(true);
ul.appendChild(lili);
</script>
</body>
</html>
插件HTML Tree Generato
推荐一个插件HTML Tree Generator 可以看到整个HTML 结构，标签等
可以自己下（很简单），也可以(用我这个下载好的压缩包)[https://download.csdn.net/download/weixin_51249285/85190349]
扫一扫
409
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
