DOM节点操作

最新推荐文章于 2022-11-07 14:17:09 发布

Program Debug

最新推荐文章于 2022-11-07 14:17:09 发布

阅读量120

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_46990454/article/details/111304818

版权

JavaScript 专栏收录该内容

28 篇文章 3 订阅

订阅专栏

如果编程时希望访问某个元素的父元素或子元素，但又不知道父元素的id、name和tag，这时可以根据层级关系进行查找，在DOM中每个节点都具有访问其他节点的属性。

节点属性
（1）parentNode
当前节点的父节点

<body>
	<div style="width: 100%; height:200px; background-color: orange;">
		<p id="text">hello world</p>
	</div>
	<input id="change" type="button" value="切换背景颜色"/>
	<script type="text/javascript">
		var obj = document.getElementById("text");
		function change(){
			obj.parentNode.style.backgroundColor = "red";
		}
		document.getElementById("change").onclick = change;
	</script>
</body>

（2）childNodes
当前节点的所有子节点
（3）firstChild
当前节点的第一个子节点
（4）lastChild
当前节点的最后一个子节点
（5）previousSibling
当前节点的前一个同级节点
（6）nextSibing
当前节点的后一个同级节点

动态添加和删除节点
1.createElement()添加节点
在父节点上使用appendChild(newnode)方法将制定节点加入到指定节点的父节点的末尾上。

<body>
	<select id="list"></select>
	<input id="btn" type="button" value="添加下拉框选项"/>
	<script type="text/javascript">
		document.getElementById("btn").onclick = function (){
			var newNode = document.createElement("option");
			newNode.className = "opt";
			newNode.innerHTML = "新节点";
			document.getElementById("list").appendChild(newNode);
		}
	</script>
</body>

2.使用removeChild删除节点

<body>
	<div id="box">
		<p>段落1</p>
		<p>段落2</p>
		<p>段落3</p>
	</div>
	<input id="btn" type="button" value="点击删除首行段落"/>
	<script type="text/javascript">
		document.getElementById("btn").onclick = function (){
			var obj = document.getElementById("box");
			var firstNode = obj.firstChild;
			obj.removeChild(firstNode);
		}
	</script>
</body>