js中DOM节点

最新推荐文章于 2024-07-17 22:20:08 发布

正在努力...

最新推荐文章于 2024-07-17 22:20:08 发布

阅读量337

点赞数 2

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_58830590/article/details/126253661

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

前言

本文讲解了什么是节点以及操作，如果觉得本文有点东西请三连击博主点个关注，你的支持是我更新的动力，先赞后看养成习惯。

一.什么是节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
(1)整个文档是一个文档节点 document
(2)每个 HTML 元素是元素节点
(3)HTML 元素内的文本是文本节点
(4)每个 HTML 属性是属性节点
(5)注释是注释节点

二.关于节点

在这里插入图片描述

说明：父节点、子节点和同胞节点
节点树中的节点彼此拥有层级关系。
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。
父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点
注:为保证兼容性,书写html的时候必须写成一行

三. 节点概述

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。
HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除
在这里插入图片描述
一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

1.nodeName属性

nodeName 是只读的 
元素节点的 nodeName 与标签名相同 
属性节点的 nodeName 与属性名相同 
文本节点的 nodeName 始终是 #text 
文档节点的 nodeName 始终是 #document

2.nodeValue属性

元素节点的 nodeValue 是 undefined 或 null 
文本节点的 nodeValue 是文本本身 
属性节点的 nodeValue 是属性值

3.nodeType属性

nodeType 属性返回节点的类型。nodeType 是只读的。
比较重要的节点类型有：
在这里插入图片描述
元素节点 nodeType 为 1
属性节点 nodeType 为 2
文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）
我们在实际开发中，节点操作主要操作的是元素节点

四.节点操作

获取元素通常使用两种方式：
1.1. 利用 DOM 提供的方法获取元素

document.getElementById()
document.getElementsByTagName()
document.querySelector 等
  逻辑性不强、繁琐

1.2. 利用节点层级关系获取元素

利用父子兄节点关系获取元素
逻辑性强， 但是兼容性稍差

这两种方式都可以获取元素节点，后面都会使用，但是节点操作更简单

五.节点层级

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

1. 父级节点

node.parentNode

parentNode 属性可返回某节点的父节点，注意是最近的一个父节点
如果指定的节点没有父节点则返回 null

<div class="news">
			<div class="box">
				<span class="erweima">X</span>
			</div>
		</div>
		<script>
		    //1.父节点 parentNode
			var erweima = document.querySelector(".erweima");
			//var box = document.querySelector(".box");
			//得到的是里元素最近的父节点(亲爸爸) 如果找不到父节点就返回null
			console.log(erweima.parentNode)
		</script>

2. 子节点

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]);
}}

parentNode.children（非标准）

parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回（这个是我们重点掌握的）。
虽然children 是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用

parentNode.firstChild

firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。

parentNode.lastChild

lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点

parentNode.firstElementChild

firstElementChild 返回第一个子元素节点，找不到则返回null。

parentNode.lastElementChild

lastElementChild 返回最后一个子元素节点，找不到则返回null。
注意：这两个方法有兼容性问题，IE9 以上才支持

实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便
而 firstElementChild 和lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？
解决方案：

如果想要第一个子元素节点，可以使用 parentNode.chilren[0]
如果想要最后一个子元素节点，可以使用

parentNode.chilren[parentNode.chilren.length - 1]

3.兄弟节点

node.nextSibling

nextSibling 返回当前元素的下一个兄弟节点，找不到则返回null，同样，也是包含所有的节点。

node.previousSibling

previousSibling返回当前元素的上一个兄弟节点，找不到则返回null，同样，也是包含所有的节点。
注意：这两个方法有兼容性问题，IE9 以上才支持
问：如何解决兼容性问题
答：自己封装一个兼容性的函数

  function getNextElementSibling(element){
				var el =element
				while(el=el.nextSibling){
					if(el.nodeType ===1){
						return el;
					}
				}
				return null;
			}

4.创建节点

document.createElement('tagName')

document.createElement()方法创建由tagName指定HTML元素，因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
5.添加节点（插入节点）

node.appendChild（child）

node.appendChild（）方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素。

node.insertBefore（child，指定元素）

node.insertBefore（）方法将一个节点添加到指定子节点前面。类似于css里面的before伪元素。
6.删除节点和替换节点

parentDOM.replaceChild(newNode,oldNode);

node.removeChild(child)

node.removeChild()方法从DOM中删除一个子节点，返回删除的节点。
7. 复制节点（克隆节点）

node.cloneNode（）

node.cloneNode（）方法返回调用该方法的节点的一个副本。也成为克隆节点/拷贝节点
注意：
（1）如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
（2）如r果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点。
以下是一个案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>1111</li>
			<li>2</li>
			<li>3</li>
		</ul>
		<script>
		    var ulObj=document.querySelector("ul")
			//1.node.cloneNode();括号为空或者为false，浅拷贝，只复制标签不复制里面的内容。
			//2.node.cloneNode(true)括号为true，深拷贝，复制标签复制里面的内容
			var liObj=ulObj.children[0].cloneNode(true)
			ulObj.appendChild(liObj)
		</script>
	</body>
</html>

输出结果：
在这里插入图片描述
8 属性相关操作

8.1 getAttribute获取属性**

 如: nodeDOM. getAttribute(“属性”);

8.2 setAttribute设置属性

如: nodeDOM. setAttribute (“属性”,”属性值”);

8.3 creatAttribute建立属性
案例：

<div id="parent">元素</div>
			<script>
			    var parentDOM =document.getElementById("parent");   //1获取元素节点
			    var oAttr=document.createAttribute("class");          //2 建立属性节点--class
			    oAttr.value="red";                                // 3 属性赋值
			    parentDOM.setAttributeNode(oAttr);
		 </script>

8.4 removeAttribute删除属性

parentDom.removeAttribute(“属性”)   //删除属性的同时删除属性值

案例：

<script>
			window.onload = function() { //绑定页面加载完毕时的事件处理函数
				var table = document.getElementById("tab"); //获取表格外框的引用
				var del = document.getElementById("del");
				var reset = document.getElementById("reset");
				del.onclick = function() {
					table.removeAttribute("border");
				}
				reset.onclick = function() {
					table.setAttribute("border", "2");
				}
			}
		</script>
		<table width="100%" border="2" id="tab">
			<tr>
				<td>数据表格</td>
			<tr>
		</table>
		<button id="del">删除</button>
		<button id="reset">恢复</button>