javascript节点

最新推荐文章于 2024-11-09 09:45:11 发布

qq_37295810

最新推荐文章于 2024-11-09 09:45:11 发布

阅读量287

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_37295810/article/details/55043061

本文介绍了如何使用DOM API进行节点的获取与管理，包括获取子节点、父节点、兄弟节点等基本操作，以及如何通过JavaScript动态创建、插入、删除DOM元素。

1.获取子节点： children

2.获取父节点： paretNode

3.offsetParent：绝对相对定位后的父节点。没有相对定位盒子，则父
节点是body

4.获取手尾节点： firstChild IE获取第一个节点

firstElementChild FF获取第一个节点

llastChild IE获取最后一个节点

lastElementChild FF获取最后一个节点

5.获取兄弟节点：nextSibling IE获取下一个节点

nextElementSiblingFF获取下一个节点

previousSibling IE获取上一个节点

previousElementSibling FF获取上一个节点

<script>
	window.onload = function() {

		// var oUl=document.getElementById("ul");

		// var oLi=document.getElementById("li");

		// 从后面追加节点

		// var oSi=document.createElement("li");

		// oSi.innerHTML=4;

		// oUl.appendChild(oSi);

		// 从前面追加节点

		// var oLing=document.createElement("li");

		// oLing.innerHTML=0;

		// oUl.insertBefore(oLing,oLi);

		// 

		// var oBtn=document.getElementById("btn");

		// var oUl=document.getElementById("ul");

		// var aLi=oUl.getElementsByTagName("li");

		// 

		// oBtn.onclick = function(){

		// var oLi = document.createElement("li");

		//

		// 

		// if(aLi.length>0){

		// oUl.insertBefore(oLi,aLi[0]);

		// }

		// else{

		// oUl.appendChild(oLi);

		// }

		// 

		// }

		var oUl = document.getElementById("ul");

		var aA = oUl.getElementsByTagName("a");

		for(var i = 0; i < aA.length; i++) {

			aA[i].onclick = function() {

				oUl.removeChild(this.parentNode);

			}

		}

	}
</script>

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script>
			window.onload = function() {

				var oBtn = document.getElementById("btn1");

				var oUl = document.getElementById("ul");

				var aLi = oUl.getElementsByTagName("li");

				var oBtn2 = document.getElementById("btn2");

				oBtn.onclick = function() {

					var oLi = document.createElement("li");

					num = aLi.length + 1;

					oLi.innerHTML = num;

					if(aLi.length > 0) {

						oUl.insertBefore(oLi, aLi[0]);

					} else {

						oUl.appendChild(oLi);

					}

				}

				oBtn2.onclick = function() {

					oUl.removeChild(aLi[0]);

				}

			}
		</script>

	</head>

	<body>

		<input type="button" id="btn1" value="增加" />

		<input type="button" id="btn2" value="删除" />

		<ul id="ul">

		</ul>

	</body>

</html>