DOM节点操作详解-CSDN博客

本文链接：https://blog.csdn.net/shiliye_csdn/article/details/117423875

这篇博客详细介绍了DOM中的节点操作，包括节点的类型、层级关系、父节点、子节点、兄弟节点的获取，以及创建、添加、删除和复制节点的方法。特别讨论了动态创建元素的三种方式：document.write、innerHTML和createElement，并分析了它们的效率和适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

■ 节点操作

一般地，节点至少拥有以下三个基本属性

nodeType
nodeName
nodeValue

不同类型的节点，对应的nodeType值是不一样的

元素节点：nodeType=1
属性节点：nodeType=2
文本节点： nodeType=3，文本节点包含文字，空格，换行等

注：实际开发中，节点操作主要操作的是元素节点

■ 节点层级

利用DOM树可以把节点划分为不同的层级关系，常见是父子兄弟层级关系

■ 父节点

通过node.parentNode属性，可返回某节点的父节点
注意是最近的一个父亲节点, 找不到则返回null

<body>
	<div class='demo'>
		<div class='box'>
			<span class='sub_box'>x</span>
		</div>
	</div>
	<script>
		var sub_box = document.querySelector('.box');
		console.log(sub_box.parentNode); //输出：获取父节点box
	</script>
</body>

■ 子节点

通过childNodes属性，可以返回指定节点的子节点集合，该集合为即时更新的集合
返回值里面包含了所有的子节点，包括元素节点，文本节点等
如果只想要获得里面的元素节点，则需要专门处理，所以一般不提倡使用childNodes

<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
	<ol>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ol>
	<div class='demo'>
		<div class='box'>
			<span class='sub_box'>x</span>
		</div>
	</div>
	<script>
		var ul = document.querySelector('ul');
		console.log(ul.childNodes); //输出： nodeList(9),包含元素节点，文本节点，
		console.log(ul.childNodes[0].nodeType); //输出：3
		
		//只获取子节点中的元素节点
		for(var i = 0; i < ul.childNodes.length; i ++){
			if(ul.childNodes[i].nodeType == 1){
				console.log(ul.childNodes[i]); 
			}
		}
		
		console.log(ul.children); //输出：ul下的4个li
	</script>
</body>

注：chirldren属性可以返回指定节点的所有子节点中的元素节点集合，它是非标准的，但是获得了各浏览器的支持
开发中常用

□ 第一个子节点

通过firstChild属性，可以获取第一个子节点

var ul = document.querySelector('ul');
console.log(ul.firstChild);  //返回第一个节点，不管是文本节点还是元素节点

实际开发的写法

console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);

□ 最后一个子节点

通过lastChild属性，可以获取最后一个子节点

var ul = document.querySelector('ul');
console.log(ul.lastChild);  //返回最后一个节点，不管是文本节点还是元素节点

□ 第一个子元素节点

通过firstElementChild属性可以获取第一个子元素节点，找不到返回null

var ul = document.querySelector('ul');
console.log(ul.firstElementChild);  //返回第一个子元素节点

□ 最后一个子元素节点

通过firstElementChild属性可以获取第一个子元素节点，找不到返回null

var ul = document.querySelector('ul');
console.log(ul.lastElementChild);  //返回最后一个子元素节点

□ 兄弟节点

通过node.nextSibling属性，返回当前元素的下一个节点，找不到返回null，包括元素节点和文本节点等
通过node.previousSibling属性，返回当前元素的上一个节点，找不到返回null，包括元素节点和文本节点等
通过node.nextElementSibling属性，返回当前元素下一个兄弟元素节点，找不到返回null
通过node.previousElementSibling属性，返回当前元素上一个兄弟元素节点，找不到返回null

<body>
	<div>我是div</div>
	<span>我是span</span>
	<script>
		var div = document.querySelector('div');
		console.log(div.nextSibling); //输出：换行符
		console.log(div.previousSibling);
		console.log(div.nextElementSibling); //输出：<span>我是span</span>
		console.log(div.previousElementSibling);
		
		//兄弟节点有兼容性问题，通过以下函数解决
		function getNextElementSibling(element){
			var el = element;
			while(el = el.nextSibling){
				if(el.nodeType === 1){
					return el;
				}
			}
			return null;
		}
	</script>
</body>

■ 创建和添加节点

创建节点
同构document.createElement()方法，创建由tagname指定的HTML元素，因为这些元素原先不存在，是根据需求动态生成的，所以也称为动态创建元素节点
添加节点
通过node.appendChild()方法，将一个节点添加到指定父节点的子节点列表末尾，类似CSS里面的after元素
通过node.insertBefore()方法，将一个节点添加到父节点的指定节点前面，类似CSS里面的before伪元素

<body>
	<ul>
		<li>123</li>
	</ul>
	<script>
		var li = document.createElement('li');
		var ul = document.querySelector('ul');
		ul.appendChild(li); //在ul标签下所有的li标签的最后插入一个li，相当于数组里的push
		
		var li1 = document.createElement('li');
		ul.insertBefore(li1,ul.children[0]);  //在ul标签下所有的li标签最开始处插入一个li
	</script>
</body>

■ 删除节点

通过**node.removeChild()**方法，从DOM中删除一个子节点，返回删除的节点

<body>
	<button>删除</button>
	<ul>
		<li>张三</li>
		<li>李四</li>
		<li>王五</li>
	</ul>
	<script>
		var ul = document.querySelector('ul');
		var btn = document.querySelector('button');
		
		btn.onclick = function(){
			if(ul.children.length == 0){
				this.disabled = true;
			} else {
				ul.removeChild(ul.children[0]);
			}
		}
	</script>
</body>

■ 复制节点

通过node.cloneNode() 方法，返回调用该方法的节点的一个副本，也称为克隆节点或拷贝节点
如果括号参数为空或false，则是浅拷贝，即只复制节点本身，不复制里面的内容
如果括号参数为true，则是深拷贝，即复制节点本身及里面的内容

<body>
	<ul>
		<li>123</li>
	</ul>
	<script>
		var ul = document.querySelector('ul');
		var lili = ul.children[0].cloneNode();
		ul.appendChild(lili); //复制一个<li></li>并插入到ul标签下，浅拷贝
		
		var lili1 = ul.children[0].cloneNode(true);
		ul.appendChild(lili1);  //复制一个<li>123</li>并插入到ul标签下，深拷贝
	</script>
</body>

■ 三种动态创建元素区别

document.write
直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
innerHTML和createElement
将内容写入某个DOM节点，不会导致页面全部重绘

innerHTML创建多个元素效率更高，但注意不要拼接字符，采取数组形式拼接，结构稍微复杂
createElement创建多个元素效率稍微低一些，但是结构更清晰
总之，不同浏览器下，innerHTML效率要比createElement高

<body>
	<button>点击</button>
	<p>test</p>
	<script>
		var btn = document.querySelector('button');
		btn.onclick = function(){
			document.write('<div>123</div>');  //点击按钮，执行该代码后，页面既存的button和p标签都没有了，只有div标签，相当于重绘
		}
	</script>
</body>