HTML DOM文档对象查找元素的方法

最新推荐文章于 2022-07-15 17:33:01 发布

原创最新推荐文章于 2022-07-15 17:33:01 发布 · 7.3k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#getElementByName #getElementByTagName #getElementByClassName #getElementById

JavaScript 同时被 2 个专栏收录

6 篇文章

订阅专栏

HTML+CSS

5 篇文章

订阅专栏

本文详细介绍了HTML DOM文档对象查找元素的四种方法：getElementsByName(), getElementsByTagName(), getElementsByClassName()和getElementById()，包括它们的定义、语法、参数及实例，帮助理解如何通过这些方法在HTML文档中定位和操作元素。" 106343816,880985,树莓派GPIO端口详解与CentOS应用,"['物联网', '嵌入式开发', '硬件接口', '通信协议']

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

一、HTML DOM 节点

在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点:

文档是一个文档节点。
所有的HTML元素都是元素节点。
所有 HTML 属性都是属性节点。
文本插入到 HTML 元素是文本节点。
注释是注释节点。

二、Document 对象

当浏览器载入 HTML 文档, 它就会成为 Document 对象。
　　Document 对象是 HTML 文档的根节点。
　　Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
　　提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

三、HTML DOM 定义的查找对象的方法

HTML文档常见的方法:

getElementsByName()
getElementsByTagName()
getElementsByClassName()
getElementById()

（一）、getElementsByName()

1、定义和用法
　　getElementsByName() 方法可返回带有指定名称的对象的集合。

2、语法
　　document.getElementsByName(name)

3、参数
　　name 必须。元素的名称。

4、实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>getElementsByName()实例</title>
	<script>
		function getElements(){
			var f=document.getElementsByName("fruit");
			alert(f.length);
		}
	</script>
</head>
<body>
	苹果:<input name="fruit" type="radio" value="苹果">
	香蕉:<input name="fruit" type="radio" value="香蕉">
	<input type="button" onclick="getElements()" value="name为 'fruit'的元素数量?">
</body>
</html>

5、效果图
这里写图片描述

（二）、getElementsByTagName()

1、定义和用法
　　getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
　　提示：参数值 “*” 返回文档的所有元素。

2、语法
　　document.getElementsByTagName(tagname)

3、参数
　　tagname String 必须。你要获取元素的标签名。

4、返回值
　　NodeList 对象指定标签名的元素集合

5、实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>getElementsByTagName()实例</title>
</head>
<body>
	<p id="demo">单击按钮来改变这一段中的文本。</p>
	<button onclick="myFunction()">点我</button>
	<script>
		function myFunction(){
			document.getElementsByTagName("P")[0].innerHTML="Hello World";
		};
	</script>
</body>
</html>

6、效果
　单击按钮前：
这里写图片描述

单击按钮后：
这里写图片描述

（三）、getElementsByClassName()

1、定义和使用
　　getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。NodeList 对象代表一个有顺序的节点列表。NodeList 对象我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
　　提示：你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。
　　注意: Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。

2、语法
　　document.getElementsByClassName(classname)

3、参数
　　classname String 必须。你需要获取的元素类名。
　　多个类名使用空格分隔，如 “test demo”。

4、实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>getElementsByClassName()实例</title>
	<style>
		div {
		    border: 1px solid black;
		    margin: 5px;
		}
		.example {
		    border: 1px solid black;
		    margin: 5px;
		}
	</style>
</head>
<body>
<h1>实例一</h1>
<div class="nocolor">
	<p>P 元素在在第一个样式为 class="example" 的 Div 元素中。Div 的索引值为 0。</p>
</div>
<div class="color red">
	<p>P 元素在在第一个样式为 class="example color" 的 Div 元素中。Div 的索引值为 0。</p>
</div>
<div class="color yellow">
	<p>P 元素在在第二个样式为 class="example color" 的 Div 元素中。Div 的索引值为 1。</p>
</div>
<p>点击按钮修改第一个类为 "example" 的 div 元素的背景颜色。</p>
<p>获取到的对象的长度（数量）：<span id="demo"></span></p>
<hr/>
<h1>实例二</h1>
<div class="example">样式 class="example" 的 Div 元素</div>
<div class="example">另外一个样式 class="example" 的 Div 元素</div>
<p class="example">样式为 class="example" 的 p 元素。</p>
<p>这是一个插入在 p 元素中样式 class="example" 的<span class="example">span</span> 元素 。</p>
<p>点击按钮修改所有样式 class="example" 的背景颜色。</p>
<button onclick="myFunction()">点我</button>
<p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
<script>
	function myFunction() {
	    var x = document.getElementsByClassName("color");
	    x[0].style.backgroundColor = "red";
		x[1].style.backgroundColor = "yellow";
		document.getElementById("demo").innerHTML = x.length;
		
		//for循环改变
		var x = document.getElementsByClassName("example");
	    var i;
	    for (i = 0; i < x.length; i++) {
	        x[i].style.backgroundColor = "red";
	    }
	}
</script>

</body>
</html>

5、效果图
单击按钮前：
这里写图片描述

单击按钮后：
这里写图片描述

（四）、getElementsById()

1、定义和使用
　　getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。
　　NodeList 对象代表一个有顺序的节点列表。NodeList 对象我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
　　提示：你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。

2、方法
　　getElementsById()

3、语法
　　document.getElementsById(id)

4、参数
　　id String 必须。你需要获取的元素id。

5、实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>getElementById()</title>
</head>
<body>
	<p id="demo">单击按钮来改变这一段中的文本。</p>
	<button onclick="myFunction()">点我</button>
	<script>
		function myFunction(){
			document.getElementById("demo").innerHTML="Hello World";
		};
	</script>
</body>
</html>