DOM中的四个基本方法

最新推荐文章于 2024-05-13 09:15:38 发布

lishichengyan

最新推荐文章于 2024-05-13 09:15:38 发布

阅读量522

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/lishichengyan/article/details/77758164

JavaScript 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了DOM编程中的四个关键方法：1) document.getElementById，用于根据id获取元素对象；2) getElementsByTagName，返回指定标签名的所有元素组成的数组；3) getAttribute，用于获取元素的属性值；4) setAttribute，用于修改元素的属性值。需要注意，DOM操作不会立即改变源代码，只有页面动态刷新后才能看到效果。

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

来自《Javascript DOM编程艺术》那本书。

示例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>Shopping List</title>
	</head>
	<body>
		<h1>What to buy</h1>
		<p title="a gender remainder">Don't forget to buy this stuff.</p>
		<ul id="perchases">
			<li>A tin of beans</li>
			<li>Cheese</li>
			<li>Milk</li>
		</ul>
	<script type="text/javascript">
		alert(typeof document.getElementById("perchases"));
	</script>
	</body>
</html>

1）getElementById：

在标签中可以设置id属性，使用这个函数会返回与这个id匹配的对象。（DOM中的每个节点都是对象）

2）getElementsByTagName：

返回的是一个数组。（所以Element都是复数。。）参数可以是通配符。例如：

var items=document.getElementsByTagName("*");返回的是包含整个页面上的对象的数组。

3）getAtrribute：

只能通过某个具体的对象调用，无法用document调用，例如：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>Shopping List</title>
	</head>
	<body>
		<h1>What to buy</h1>
		<p title="a gender remainder">Don't forget to buy this stuff.</p>
		<ul id="perchases">
			<li>A tin of beans</li>
			<li>Cheese</li>
			<li>Milk</li>
		</ul>
	<script type="text/javascript">
		var paras=document.getElementsByTagName("p");
		for(var i=0;i<paras.length;i++){
			alert(paras[i].getAttribute("title"));
		}
	</script>
	</body>
</html>

运行效果：

4）setAtrribute：

修改属性值，setAtrribute(attribute,value)，例如：

		var paras=document.getElementsByTagName("p");
		for(var i=0;i<paras.length;i++){
			if(paras[i].getAttribute("title")){
				paras[i].setAtrribute("title","a GENDER remainder!!!");
				alert(paras[i].getAttribute("title"));
			}
		}

更改了p标签的title属性，原来的a gender remainder变成了a GENDER remainder!!!

注：

view source后看到的仍然是改动之前的内容，因为DOM先加载静态的文档再动态刷新。