初学JavaScript的操作DOM节点(三)

最新推荐文章于 2025-04-08 14:42:11 发布

不贰过先生

最新推荐文章于 2025-04-08 14:42:11 发布

阅读量634

点赞数

分类专栏： HTML/JS 文章标签： DOM节点处理事件修改DOM节点删除DOM节点增加DOM节点 DOM节点修改CSS样式

本文链接：https://blog.youkuaiyun.com/u013132035/article/details/54985550

版权

HTML/JS 专栏收录该内容

9 篇文章

订阅专栏

DOM全程Document Object Model，即文档对象模型。当浏览器网页被加载时，浏览器自身会创建页面的文档对象模型。HTML DOM模型会被构造成树。

下面是HTML DOM树。JS可以操作HTML的元素、属性、CSS样式以及对页面中的所有事件作出反应。

下面是一个简单JavaScript处理DOM事件代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript处理DOM事件</title>
<script type="text/javascript">
	function fun1(){
		alert("要开心哦!");
	}
</script>
</head>
<body>
	<input type="button" value="点我一下" οnclick="fun1()"/>
</body>
</html>

一般JS可以查找HTML元素可以通过两种方法：1：通过HTML元素的ID查找HTML元素，这是最常用的一种方法。2：通过HTML元素标签找到HTML元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS查找HTML元素</title>
<script type="text/javascript">
	x = document.getElementById("h1");
	document.write(x.innerHTML);
	document.write("ahha");
</script>
</head>
<body>
	<p id="h1">hello, JS小哥！</p>
	<script type="text/javascript">
		var str = document.getElementById("h1");
		document.write("JS中通过ID获取HTML元素："+str.innerHTML);
	</script>
	<hr/>
	<div id = "s1">
		<h3>哈哈</h3>
		<h3>呵呵</h3>
	</div>
	<script type="text/javascript">
		var st1 = document.getElementById("s1");
		var st2 = st1.getElementsByTagName("h3");
		document.write("JS通过标签获取HTML元素（第二个h3标签）："+st2[1].innerHTML);
	</script>
</body>
</html>

下面来说说JS来修改DOM节点的CSS样式。在HTML DOM中允许JS来修改HTML元素中的CSS的样式。其语法为：

document.getElementById(id).style.property = new style

一般修改CSS样式通过ID修改CSS样式。代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS修改CSS样式</title>
<script type="text/javascript">
	function fun1(){
		document.getElementById("p3").style.fontFamily="Arial";
	}

</script>
</head>
<body>
	<h3 id="p1">你好，JS小哥！</h3>
	<script type="text/javascript">
		document.getElementById("p1").style.color="blue";
	</script>
	<h3 id="p2">你好，JS小妹！</h3>
	<input type="button" value="修改样式" οnclick="document.getElementById('p2').style.color='red' " />
	<h3 id="p3">hello，JS！</h3>
	<input type="button" value="修改样式" οnclick="fun1()"/>	
</body>
</html>

下面来说一说JS处理DOM节点。JS修改DOM节点的事件有3种，第一种：增加DOM节点；第二种：修改DOM节点；第三种：删除DOM节点。下面用代码来详细说明

第一种：修改DOM节点。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>修改DOM节点</title>
<script type="text/javascript">
	function modifyDom(){
		document.getElementById("txt").innerHTML="用户名:";
		document.getElementById("userName").value="Peter";
	}

</script>
</head>
<body>
	<font id="txt">:</font>
	<input type="text" name="userName" id="userName"/>
	<input type="button" value="修改DOM节点" οnclick="modifyDom()"/>
</body>
</html>

第二种：增加DOM节点。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>增加DOM节点</title>
<script type="text/javascript">

	function addBeforeDom(){
		var fatherNode = document.getElementById("d1");
		var sonNode = document.getElementById("d2");
		var param = document.createElement("p");
		var node = document.createTextNode("前置节点...");
		param.appendChild(node);
		fatherNode.insertBefore(param, sonNode);
	}
	
	function addAfterDom(){
		var fatherNode = document.getElementById("d1");
		var sonNode = document.getElementById("d2");
		var param = document.createElement("p");
		var node = document.createTextNode("后置节点...");
		param.appendChild(node);
		fatherNode.appendChild(param);
	}
</script>
</head>
<body>
	<div id="d1">
		<div id="d2">	
			<p>这是一个节点</p>
		</div>
	</div>
	<input type="button" value="增加前置DOM节点" οnclick="addBeforeDom()" />
	<input type="button" value="增加后置DOM节点" οnclick="addAfterDom()" />
</body>
</html>

第三种：删除DOM节点。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>删除DOM节点</title>
<script type="text/javascript">
	function deleteDom(){
		var father = document.getElementById("d1");
		var son = document.getElementById("d2");
		father.removeChild(son);
		
	}
</script>
</head>
<body>
	<div id = "d1">
		<div id = "d2">
			<p>这是一个节点</p>
		</div>
	</div>
	<input type="button" value="删除DOM节点" οnclick="deleteDom()" />
</body>
</html>

好了，这就是JS中对DOM节点的基本操作。