Node对象

最新推荐文章于 2023-07-11 15:52:10 发布

star walkin

最新推荐文章于 2023-07-11 15:52:10 发布

阅读量574

点赞数 1

文章标签： java

本文链接：https://blog.csdn.net/qq_44336097/article/details/109828860

版权

* Node：节点对象，其他5个的父对象
	* 特点： 所有dom对象都可以被认为是一个节点
	* 方法：
		* CRUDdom树：
			* appendChild():向节点的子节点列表的结尾添加新的子节点。
			* removeChild():删除（并返回）当前节点的指定子节点。
			* replaceChild():用新节点替换一个子节点。
	* 属性：
		* parentNode: 返回节点的父节点

<!--Node对象-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Node对象</title>
	<style type="text/css">
		div{
			border: 1px solid red;
		}

		#div1{
			width: 200px;
			height: 200px;
		}

		#div2{
			width: 100px;
			height: 100px;
		}

		#div3{
			width: 100px;
			height: 100px;
		}


	</style>
</head>
<body>
	<div id="div1">
		<div id="div2">div2</div>
		div1
	</div>
	<a id="del" href="javascript:void(0);">删除子节点</a>
	<a id="add" href="javascript:void(0);">添加子节点</a>

	<input type="button" name="del" value="删除子节点">

	<script type="text/javascript">
		// 1. 获取超链接
		var element_a = document.getElementById("del");
		// 2. 绑定单击事件
		element_a.onclick = function(){
			var div1 = document.getElementById("div1");
			var div2 = document.getElementById("div2");
			div1.removeChild(div2);
		}

		/* 
			超链接功能：
				1. 可以被点击：样式
				2. 点击后跳转后跳转到href指定的url

			需求：保留1功能，去掉2功能
			实现：href="javascript:void(0);"
		*/

		// 1. 获取超链接
		var element_add = document.getElementById("add");
		// 2. 绑定单击事件
		element_add.onclick = function(){
			var div1 = document.getElementById("div1");
			// 给div1添加子节点
			// 创建div节点
			var div3 = document.createElement("div");
			div3.setAttribute("id","div3");

			div1.appendChild(div3);
		}

		var div2 = document.getElementById("div2");
		var div1 = div2.parentNode;
		alert(div1);

	</script>
</body>
</html>

star walkin

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Node对象

* Node：节点对象，其他5个的父对象 * 特点：所有dom对象都可以被认为是一个节点 * 方法： * CRUDdom树： * appendChild():向节点的子节点列表的结尾添加新的子节点。 * removeChild():删除（并返回）当前节点的指定子节点。 * replaceChild():用新节点替换一个子节点。 * 属性： * parentNode: 返回节点的父节点<!DOCTYPE html>&l
复制链接

扫一扫