dom基础2

最新推荐文章于 2024-08-21 22:58:26 发布

原创最新推荐文章于 2024-08-21 22:58:26 发布 · 100 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#dom #js

dom 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript操作DOM，包括通过id、tagName和className获取页面元素的方法，以及如何利用这些方法进行页面动态更新。文章提供了具体示例，帮助读者理解DOM操作的基本原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DOM</title>
</head>
<body>
	<div id="d1">Hello DOM</div>
	<div>hello js</div>
	<div>hello dom</div>

	<h1 class="d">hello js</h1>
	<h2 class="d">hello dom</h2>
	<script type="text/javascript">
		function p(s){
			document.write(s);
			document.write("<br>");
			document.write("<br>");
		}
		//通过id获取节点
		var div1 = document.getElementById('d1');
		p(div1);//[object HTMLDivElement]

		//通过tageName获取节点,得到一个数组
		var divs = document.getElementsByTagName('div');
		for(i=0; i<divs.length;i++){
			p(divs[i]);
		}

		//通过className获取节点，得到一个数组
		var elements = document.getElementsByClassName('d');
		for(i=0;i<elements.length;i++){
			p(elements[i]);
		}
	</script>	

	用户名：<input name="user" /><br>
	密码：<input type="text" name="password"><br>
	<script type="text/javascript">
		//通过input中name属性获得节点。注意js是解释语言，是顺序执行的
		var elems = document.getElementsByName("user");
		for(i = 0; i < elems.length; i++){
			p(elems[i]);
		}
	</script>
</body>
</html>