节点操作相关_节点本身操作-CSDN博客

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

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

摘要由CSDN通过智能技术生成

■ 节点操作

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

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