前端开发_JavaScript_DOM之Node接口

最新推荐文章于 2024-07-09 14:21:19 发布

魔笛手7

最新推荐文章于 2024-07-09 14:21:19 发布

阅读量350

点赞数 1

分类专栏：前端文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/u013185175/article/details/122523912

版权

前端专栏收录该内容

75 篇文章 9 订阅

订阅专栏

DOM之Node接口

1.引入

上一节课，我们讲解介绍了关于DOM的一些基本操作，下面我们来讲解DOM关于节点的操作，并带着大家一起来写一个简单的级联操作的练习。节点的操作我们需要学习一下Node接口。

2.Node接口

(1).概述

Node 是一个接口，各种类型的 DOM API 对象会从这个接口继承。它允许我们使用相似的方式对待这些不同类型的对象；比如, 继承同一组方法，或者用同样的方式测试。

我们在编程的时候如果需要访问某一个元素的父子元素，但是又没有办法通过之前学习的id/class这样的方式获取，那么这一个时候我们就可以根据DOM树的层级关系查找出对应的元素。

(2).Node接口相关属性

①:Node.parentNode：返回指定的节点在DOM树中的父节点.

语法:

语法:
parentNode = node.parentNode

说明:
parentNode是指定节点的父节点.一个元素节点的父节点可能是一个元素(Element )节点,也可能是一个文档(Document )节点,或者是个文档碎片(DocumentFragment)节点。

②:Node.childNodes:Node.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合（live collection）。

语法:

语法:
var ndList = elementNodeReference.childNodes;

参数说明:
ndList变量为 NodeList 类型，且为只读。

③:Node.firstChild:Node.firstChild 只读属性返回树中节点的第一个子节点，如果节点是无子节点，则返回 null。

语法:

语法:
var childNode = node.firstChild;

参数说明:
如果有一个子节点, childNode 是节点的第一个子节点的引用，否则为null。

④:Node.lastChild：Node.lastChild 是一个只读属性，返回当前节点的最后一个子节点。如果父节点为一个元素节点，则子节点通常为一个元素节点，或一个文本节点，或一个注释节点。如果没有子节点，则返回 null。

语法:

语法:
var last_child = element.lastChild

⑤:Node.previousSibling:返回当前节点的前一个兄弟节点,没有则返回null。

语法:

语法:
previousNode = node.previousSibling

⑥:Node.nextSibling:Node.nextSibling 是一个只读属性，返回其父节点的 childNodes 列表中紧跟在其后面的节点，如果指定的节点为最后一个节点，则返回 null。

语法:

语法:
nextNode = node.nextSibling

代码实现:

<html>
	<head>
		<meta charset="utf-8">
		<title>Node对象</title>
		<style type="text/css">
			.box {
				height: 100px;
				width: 150px;
				line-height: 50px;
				border: 1px solid black;
				border-radius: 10px;
				margin-top: 20px;

				font-size: 28px;
				font-family: "宋体";
				color: white;
			}

			.left {
				background-color: #008000;
			}

			.center-top {
				background-color: #DD910E;
			}

			.center-bottom {
				background-color: #55ff00;
			}

			.right {
				background-color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div class="contianner" id="nodeTest">
			<div class="left box">
				左侧内容
			</div>
			<div class="center box">
				<div class="center-top">
					中间上
				</div>
				<div class="center-bottom">
					中间下
				</div>
			</div>
			<div class="right box" >
				右侧内容
			</div>
		</div>

		<div>
			<p>
				<input type="button" value="子节点" onclick="getChildNodeTest()" />
				<input type="button" value="父节点" onclick="getParentNodeTest()" />
			</p>
		</div>

		<script type="text/javascript">
			//获取子节点测试
			function getChildNodeTest() {
				var getDiv = document.getElementById("nodeTest");
				var getChildNodes = getDiv.childNodes;
				//遍历获取节点信息
				for (var i = 0; i < getChildNodes.length; i++) {
					//判断是否是元素节点
					if (getChildNodes[i].nodeType == 1) {
						getChildNodes[i].style.color = "blue";
					}
				}
				
				//获取设置第一个子节点
				var getFirstNode = getDiv.firstChild;
				console.log("----" + getFirstNode.nodeType);
				
				//获取设置最后一个节点
				var getLastNode = getDiv.lastChild;
				console.log("----" + getLastNode.nodeName);
			}

			//获取父节点测试
			function getParentNodeTest() {
				var getDiv = document.getElementById("nodeTest");
				var getParentNodes = getDiv.parentNode;
				getParentNodes.style.backgroundColor = "red"
			}
		</script>
	</body>
</html>

(3).动态操作节点

我们知道一个html页面就是一棵document树，可以使用document对象创建、添加和删除DOM树的节点。这样我们就可以动态的操作树的节点。

①:Document.createElement()

在 HTML 文档中，Document.createElement() 方法用于创建一个由标签名称 tagName 指定的 HTML 元素。如果用户代理无法识别 tagName，则会生成一个未知 HTML 元素 HTMLUnknownElement。

语法:

语法:
var element = document.createElement(tagName[, options]);

参数说明:
tagName
        指定要创建元素类型的字符串,创建元素时的 nodeName 使用 tagName 的值为初始化，该方法不允许使用限定名称(如:"html:a")，在 HTML 文档上调用 createElement() 方法创建元素之前会将tagName 转化成小写，在 Firefox、Opera 和 Chrome 内核中，createElement(null) 等同于 createElement("null")

options可选
       一个可选的参数 ElementCreationOptions 是包含一个属性名为 is 的对象，该对象的值是用 customElements.define() 方法定义过的一个自定义元素的标签名。为了向前兼容较老版本的 Custom Elements specification, 有一些浏览器会允许你传一个值为自定义元素的标签名的字符串作为该参数的值。可以参考本页下方的 Web component example Google 的 Extending native HTML elements 文档仔细了解如何使用该参数。

返回值
新建的元素（Element）。

②:Node.appendChild

Node.appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中，那么 appendChild() 只会将它从原先的位置移动到新的位置（不需要事先移除要移动的节点）。

语法:

语法:
element.appendChild(aChild)

参数说明:
aChild
      要追加给父节点（通常为一个元素）的节点。

返回值
      返回追加后的子节点 （aChild），除非 aChild 是一个文档片段（DocumentFragment），这种情况下将返回空文档片段（DocumentFragment）。

③:Node.removeChild

Node.removeChild() 方法从DOM中删除一个子节点。返回删除的节点。

语法:

语法:
et oldChild = node.removeChild(child);
element.removeChild(child);

说明:
child 是要移除的那个子节点.
node 是child的父节点.
oldChild保存对删除的子节点的引用. oldChild === child.

代码实现:

<body>
		
		<input type="button"  value="添加节点" onclick="AddNode()"/>
		<input type="button"  value="删除节点" onclick="removeNode()"/>
		
		<script type="text/javascript">
			//创建初始化节点信息
			var node = document.createElement("p");
			node.style="color:red;font-size:23px"
			node.innerHTML="添加的节点"
			
			//添加函数
			function AddNode(){
				document.body.appendChild(node)
			}
			
			//移除函数
			function removeNode(){
				document.body.removeChild(node)
			}
			
		</script>
</body>

实现效果: