DOM节点操作

如果编程时希望访问某个元素的父元素或子元素,但又不知道父元素的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>
上一篇:二叉树的遍历


下一篇:写一个函数insert,用来向一个动态链表插入结点