JavaScript学习之DOM常用

最新推荐文章于 2025-05-20 13:59:53 发布

原创最新推荐文章于 2025-05-20 13:59:53 发布 · 301 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JavaScript

本文介绍如何使用JavaScript进行DOM操作，包括创建、插入、删除DOM元素的方法。通过实例演示了createElement、appendChild、insertBefore和removeChild等API的具体应用。

JavaScript学习之DOM

创建、插入和删除元素

创建DOM元素
createElement （标签名）----- 创建一个节点

appendChild（节点） --------追加一个节点

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>DOM应用</title>
	<script type="text/javascript">
		window.onload = function (){
			var oBtn = document.getElementById('btn1');
			var oUl = document.getElementById('ul1');
			var oTxt = document.getElementById('txt1');
			oBtn.onclick = function (){
				//创建li
				var oLi = document.createElement('li');
				//将文本框的内容添加到li
				oLi.innerHTML = oTxt.value;
				//将li添加到ul，父级.appendChild(子节点)
				oUl.appendChild(oLi);
			}
		}
	</script>
</head>
<body>
	<!-- 输入文本框 -->
	<input id="txt1" type="text"></input>
	<!-- 点击按钮创建li -->
	<button id="btn1">创建li</button>
	<ul id="ul1">		
	</ul>
</body>
</html>

插入元素

insertBefore（原有节点）----- 在已有的元素前插入

如上例，想要新增的li放到最前面就需要采用插入元素

			oBtn.onclick = function (){
				//创建li
				var oLi = document.createElement('li');
				//获取ul中有的li，以便插入，我们需要知道在哪里插入
				var aLi = document.getElementsByTagName('li');
				//将文本框的内容添加到li
				oLi.innerHTML = oTxt.value;
				//将li添加到ul，父级.appendChild(子节点)
				//oUl.appendChild(oLi);
				//插入操作
				oUl.insertBefore(oLi,aLi[0]);
			}

考虑到浏览器兼容性问题，更进一下

			oBtn.onclick = function (){
				//创建li
				var oLi = document.createElement('li');
				//获取ul中有的li，以便插入，我们需要知道在哪里插入
				var aLi = document.getElementsByTagName('li');
				//将文本框的内容添加到li
				oLi.innerHTML = oTxt.value;
				//将li添加到ul，父级.appendChild(子节点)
				//oUl.appendChild(oLi);
				//确保有第一个li元素
				if(aLi.length > 0){
					//插入操作
					oUl.insertBefore(oLi,aLi[0]);					
				}else{
					oUl.appendChild(oLi);
				}

			}

删除DOM元素

removeChild（节点） ------- 删除一个节点

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>DOM删除元素</title>
	<script type="text/javascript">
		window.onload = function(){
			var aA = document.getElementsByTagName('a');
			var oUl = document.getElementById('ul1');
			for(var i = 0; i < aA.length; i++){
				aA[i].onclick = function (){
					//把父节点li正行删除
					oUl.removeChild(this.parentNode);
				};
			}
		}
	</script>
</head>
<body>
	<ul id="ul1">
		<li>111<a href="#">删除</a></li>
		<li>222<a href="#">删除</a></li>
		<li>333<a href="#">删除</a></li>
		<li>444<a href="#">删除</a></li>
		<li>555<a href="#">删除</a></li>
	</ul>
</body>
</html>

删除前