S08L04 - DOM选择器 - 按类、ID和标签选择元素

html

揭示 JavaScript 中 DOM Selectors 的强大功能
目录

介绍 ................................................................. 1
理解文档对象模型 (DOM) .................... 3
JavaScript 中的 DOM Selectors ............................................. 6

getElementByTagName .............................................. 7
getElementsByClassName .......................................... 10
getElementById ..................................................... 13


实践应用与示例 ................................... 16
结论 ................................................................... 21

介绍
欢迎阅读这本关于 DOM Selectors in JavaScript 的全面指南。无论你是刚进入网页开发领域的初学者，还是希望提升技能的经验丰富的开发者，理解 DOM selectors 都至关重要。本电子书深入探讨了从网页中提取信息的三种基本方法：getElementByTagName、getElementsByClassName 和 getElementById。通过掌握这些 selectors，你将增强动态操作网页元素的能力，为创建更具互动性和响应性的网页铺平道路。
DOM Selectors 的重要性
Document Object Model (DOM) 作为网页与 JavaScript 之间的桥梁，允许脚本动态访问和更新文档的内容、结构和样式。DOM selectors 使你能够精确定位 DOM 中的特定元素，从而更容易与它们进行交互。无论是更改文本、修改样式还是处理事件，高效使用 DOM selectors 都是必不可少的。
优缺点


优点
缺点


能够精确选择 HTML 元素
误用可能导致大型文档中的性能问题


简化网页内容的操作
过度依赖 selectors 可能使代码难以维护


增强互动性和动态内容的创建
不正确的使用可能导致意外的行为或错误


何时何地使用 DOM Selectors
当你需要时，DOM selectors 是不可或缺的：

根据用户交互动态修改 HTML 元素。
操作样式或类以创建响应式设计。
从特定元素中检索数据以进行处理或验证。

它们通常用于表单验证、创建交互式菜单以及在不重新加载页面的情况下更新内容等任务中。
理解文档对象模型 (DOM)
在深入了解 DOM selectors 之前，掌握 DOM 的概念至关重要。Document Object Model (DOM) 是用于网页文档的编程接口。它以树状结构表示页面，使程序能够更改文档的结构、样式和内容。DOM 提供了文档的结构化表示，便于导航和操作。
关键概念

节点：DOM 树的构建块。每个元素、属性和文本片段都是一个节点。
元素：像 <div>、<p> 和 <h1> 这样的 HTML 元素以元素节点表示。
属性：HTML 元素的属性（例如 id、class）以属性节点表示。

理解这些概念是有效使用 JavaScript 中 DOM selectors 的基础。
JavaScript 中的 DOM Selectors
JavaScript 提供了多种方法来选择和操作 DOM 元素。本节探讨了三种主要的 selectors：

getElementByTagName
getElementsByClassName
getElementById

每种方法都有其独特的使用场景、优势和局限性。
getElementByTagName
概述
getElementByTagName 方法用于检索具有指定标签名称的所有元素。它返回一个 HTMLCollection，这是一个实时的、有序的集合。
语法




		
		
			
			
Java
			
			
document.getElementsByTagName(tagName);

			
				
					
				
					1
2
3
				
						 
document.getElementsByTagName(tagName);
 
					
				
			
		



tagName：表示要搜索的标签名称的字符串（例如 "div"、"p"、"h1"）。

实际示例
让我们通过一个实际的例子来了解如何使用 getElementsByTagName。
HTML 结构 (index.html)




		
		
			
			
Java
			
			
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;DOM Selectors Example&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1 id="greeting"&gt;Welcome to DOM Selectors&lt;/h1&gt;
    &lt;h2&gt;Subheading Example&lt;/h2&gt;
    &lt;p class="para"&gt;This is the first paragraph.&lt;/p&gt;
    &lt;p class="para"&gt;This is the second paragraph.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
				
						 
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;DOM Selectors Example&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1 id="greeting"&gt;Welcome to DOM Selectors&lt;/h1&gt;
    &lt;h2&gt;Subheading Example&lt;/h2&gt;
    &lt;p class="para"&gt;This is the first paragraph.&lt;/p&gt;
    &lt;p class="para"&gt;This is the second paragraph.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
 
					
				
			
		


JavaScript 实现 (index.js)




		
		
			
			
Java
			
			
// 通过标签名称选择元素
let elements = document.getElementsByTagName('h2');
console.log(elements); // 输出 h2 元素的 HTMLCollection

// 访问第一个 h2 元素
let firstH2 = elements[0];
console.log(firstH2.textContent); // 输出: Subheading Example

			
				
					
				
					1
2
3
4
5
6
7
8
9
				
						 
// 通过标签名称选择元素
let elements = document.getElementsByTagName('h2');
console.log(elements); // 输出 h2 元素的 HTMLCollection
 
// 访问第一个 h2 元素
let firstH2 = elements[0];
console.log(firstH2.textContent); // 输出: Subheading Example
 
					
				
			
		


分步解释

选择元素:

    getElementsByTagName('h2') 方法检索文档中所有的 <h2> 元素。在我们的 HTML 中，有一个 <h2> 元素。
  
理解 HTMLCollection:

    返回的 elements 变量是一个 HTMLCollection，它是 DOM 元素的实时集合。需要注意的是，虽然可以使用索引（例如 elements[0]）访问元素，但不能直接对 HTMLCollection 使用类似 forEach 这样的数组方法。
  
访问特定元素:

    通过访问 elements[0]，我们检索到第一个 <h2> 元素。使用 textContent，我们记录其文本内容："Subheading Example"。
  

局限性

不支持 forEach 迭代:

    HTMLCollections 不支持 forEach 方法。尝试使用会导致错误。

    



		
		
			
			
Java
			
			
elements.forEach(element =&gt; {
    console.log(element.textContent);
});
// 错误: elements.forEach 不是一个函数
    
			
				
					
				
					1
2
3
4
5
6
				
						 
elements.forEach(element =&gt; {
    console.log(element.textContent);
});
// 错误: elements.forEach 不是一个函数
    
					
				
			
		


  
实时集合:

    由于 HTMLCollections 是实时的，对 DOM 的任何更改都会自动反映在集合中。如果在选择后操作 DOM，可能会导致意外行为。
  

getElementsByClassName
概述
getElementsByClassName 方法用于获取所有具有指定类名的元素。与 getElementsByTagName 类似，它也返回一个 HTMLCollection。
语法




		
		
			
			
Java
			
			
document.getElementsByClassName(className);

			
				
					
				
					1
2
3
				
						 
document.getElementsByClassName(className);
 
					
				
			
		



className：表示要搜索的类名的字符串（例如 "container"、"btn-primary"）。

实际示例
继续使用我们之前的 HTML 结构，让我们使用 getElementsByClassName 来选择所有段落。
JavaScript 实现 (index.js)




		
		
			
			
Java
			
			
// 通过类名选择元素
let paras = document.getElementsByClassName('para');
console.log(paras); // 输出类名为 'para' 的元素的 HTMLCollection

// 访问第一个段落
let firstPara = paras[0];
console.log(firstPara.textContent); // 输出: This is the first paragraph.

			
				
					
				
					1
2
3
4
5
6
7
8
9
				
						 
// 通过类名选择元素
let paras = document.getElementsByClassName('para');
console.log(paras); // 输出类名为 'para' 的元素的 HTMLCollection
 
// 访问第一个段落
let firstPara = paras[0];
console.log(firstPara.textContent); // 输出: This is the first paragraph.
 
					
				
			
		


分步解释

选择元素:

    getElementsByClassName('para') 方法检索所有具有类名 "para" 的元素。在我们的 HTML 中，有两个带有该类的 <p> 元素。
  
访问特定元素:

    通过访问 paras[0]，我们检索到第一个段落。使用 textContent，我们记录其文本内容："This is the first paragraph."。
  

相对于标签选择器的优势

特异性:

    类选择器相比标签选择器允许更具体的目标定位。例如，多个标签可以共享相同的类，使得跨不同元素类型的选择成为可能。
  
类名无需前缀:

    不同于 CSS 选择器中类名前的点 (.)（例如 .para），getElementsByClassName 方法接受不带任何前缀的类名。
  

处理多个类
如果一个元素有多个类，只要其中一个类匹配，getElementsByClassName 仍然可以检索到它。




		
		
			
			
Java
			
			
&lt;p class="para highlight"&gt;This is a highlighted paragraph.&lt;/p&gt;

			
				
					
				
					1
2
3
				
						 
&lt;p class="para highlight"&gt;This is a highlighted paragraph.&lt;/p&gt;
 
					
				
			
		






		
		
			
			
Java
			
			
let highlightedParas = document.getElementsByClassName('highlight');
console.log(highlightedParas); // 输出包含高亮段落的 HTMLCollection

			
				
					
				
					1
2
3
4
				
						 
let highlightedParas = document.getElementsByClassName('highlight');
console.log(highlightedParas); // 输出包含高亮段落的 HTMLCollection
 
					
				
			
		


局限性

不支持 forEach 迭代:

    类似于 getElementsByTagName，HTMLCollections 不支持 forEach 方法。
  

getElementById
概述
getElementById 方法基于元素的唯一 id 属性选择单个元素。与之前的方法不同，它返回一个 单一的 DOM 元素，而不是 HTMLCollection。
语法




		
		
			
			
Java
			
			
document.getElementById(id);

			
				
					
				
					1
2
3
				
						 
document.getElementById(id);
 
					
				
			
		



id：表示要检索元素的 id 的字符串（例如 "header"、"submitBtn"）。

实际示例
使用相同的 HTML 结构，让我们选择 id 为 "greeting" 的标题。
JavaScript 实现 (index.js)




		
		
			
			
Java
			
			
// 通过 ID 选择元素
let greeting = document.getElementById('greeting');
console.log(greeting); // 输出 id 为 'greeting' 的 h1 元素

console.log(greeting.textContent); // 输出: Welcome to DOM Selectors

// 尝试选择具有相同 ID 的多个元素
document.body.innerHTML += '<h1 id="greeting">Another Greeting</h1>';
let allGreetings = document.getElementById('greeting');
console.log(allGreetings.textContent); // 仍然输出第一个 'greeting' 的文本

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
				
						 
// 通过 ID 选择元素
let greeting = document.getElementById('greeting');
console.log(greeting); // 输出 id 为 'greeting' 的 h1 元素
 
console.log(greeting.textContent); // 输出: Welcome to DOM Selectors
 
// 尝试选择具有相同 ID 的多个元素
document.body.innerHTML += '<h1 id="greeting">Another Greeting</h1>';
let allGreetings = document.getElementById('greeting');
console.log(allGreetings.textContent); // 仍然输出第一个 'greeting' 的文本
 
					
				
			
		


分步解释

选择元素:

    getElementById('greeting') 方法检索具有 id "greeting" 的元素。在我们的 HTML 中，它是 <h1> 元素。
  
访问内容:

    使用 textContent，我们记录文本内容："Welcome to DOM Selectors"。
  
处理重复的 ID:

    即使多个元素共享相同的 id（不推荐），getElementById 总是返回第一个出现的元素。
  

唯一 ID 的重要性

唯一性:

    id 属性在 HTML 文档中必须是唯一的。这种唯一性确保 getElementById 始终检索到预期的元素。
  
CSS 和 JavaScript 目标定位:

    唯一的 ID 对于精确的样式和脚本操作至关重要，允许在没有歧义的情况下进行目标定位的交互。
  

局限性

只能选择单个元素:

    由于 ID 必须是唯一的，getElementById 只能返回一个元素。它不适用于基于相似特征选择多个元素。
  
不支持多个类:

    不像类选择器，ID 不适用于多个类或类似的分组。
  

实践应用与示例
为了巩固你的理解，让我们通过一个综合示例来使用所有三种 DOM selectors。
项目结构

index.html：包含 HTML 结构。
index.js：存放用于 DOM 操作的 JavaScript 代码。
styles.css：(可选) 用于样式目的。

示例场景
想象一个包含多个段落和标题的简单网页。我们将使用 DOM selectors 来：

更改特定标题的文本。
修改段落的内容。
根据用户操作处理动态交互。

步骤 1：设置 HTML (index.html)




		
		
			
			
Java
			
			
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;DOM Selectors Demo&lt;/title&gt;
    &lt;script defer src="index.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1 id="greeting"&gt;Welcome!&lt;/h1&gt;
    &lt;h2&gt;Introduction&lt;/h2&gt;
    &lt;p class="para"&gt;This is the first paragraph.&lt;/p&gt;
    &lt;p class="para"&gt;This is the second paragraph.&lt;/p&gt;
    &lt;p class="para"&gt;This is the third paragraph.&lt;/p&gt;
    &lt;button id="changeContent"&gt;Change Content&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
				
						 
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;DOM Selectors Demo&lt;/title&gt;
    &lt;script defer src="index.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1 id="greeting"&gt;Welcome!&lt;/h1&gt;
    &lt;h2&gt;Introduction&lt;/h2&gt;
    &lt;p class="para"&gt;This is the first paragraph.&lt;/p&gt;
    &lt;p class="para"&gt;This is the second paragraph.&lt;/p&gt;
    &lt;p class="para"&gt;This is the third paragraph.&lt;/p&gt;
    &lt;button id="changeContent"&gt;Change Content&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;
 
					
				
			
		


步骤 2：实现 JavaScript (index.js)




		
		
			
			
Java
			
			
// 通过标签名称选择元素
let headings = document.getElementsByTagName('h2');
console.log(headings); // 输出 h2 元素的 HTMLCollection

// 访问并修改第一个 h2 元素
let firstHeading = headings[0];
firstHeading.textContent = 'Updated Introduction';
console.log(firstHeading.textContent); // 输出: Updated Introduction

// 通过类名选择元素
let paragraphs = document.getElementsByClassName('para');
console.log(paragraphs); // 输出段落元素的 HTMLCollection

// 修改所有段落的文本
for (let i = 0; i < paragraphs.length; i++) {
    paragraphs[i].textContent = `This is updated paragraph ${i + 1}.`;
}

// 通过 ID 选择元素
let greeting = document.getElementById('greeting');
console.log(greeting); // 输出 id 为 'greeting' 的 h1 元素

// 更改 greeting 文本
greeting.textContent = 'Hello, JavaScript!';
console.log(greeting.textContent); // 输出: Hello, JavaScript!

// 处理按钮点击以重置内容
let button = document.getElementById('changeContent');

button.addEventListener('click', () =&gt; {
    // 重置标题
    firstHeading.textContent = 'Introduction';

    // 重置段落
    for (let i = 0; i < paragraphs.length; i++) {
        paragraphs[i].textContent = `This is the first paragraph.`;
    }

    // 重置 greeting
    greeting.textContent = 'Welcome!';
});

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
				
						 
// 通过标签名称选择元素
let headings = document.getElementsByTagName('h2');
console.log(headings); // 输出 h2 元素的 HTMLCollection
 
// 访问并修改第一个 h2 元素
let firstHeading = headings[0];
firstHeading.textContent = 'Updated Introduction';
console.log(firstHeading.textContent); // 输出: Updated Introduction
 
// 通过类名选择元素
let paragraphs = document.getElementsByClassName('para');
console.log(paragraphs); // 输出段落元素的 HTMLCollection
 
// 修改所有段落的文本
for (let i = 0; i < paragraphs.length; i++) {
    paragraphs[i].textContent = `This is updated paragraph ${i + 1}.`;
}
 
// 通过 ID 选择元素
let greeting = document.getElementById('greeting');
console.log(greeting); // 输出 id 为 'greeting' 的 h1 元素
 
// 更改 greeting 文本
greeting.textContent = 'Hello, JavaScript!';
console.log(greeting.textContent); // 输出: Hello, JavaScript!
 
// 处理按钮点击以重置内容
let button = document.getElementById('changeContent');
 
button.addEventListener('click', () =&gt; {
    // 重置标题
    firstHeading.textContent = 'Introduction';
 
    // 重置段落
    for (let i = 0; i < paragraphs.length; i++) {
        paragraphs[i].textContent = `This is the first paragraph.`;
    }
 
    // 重置 greeting
    greeting.textContent = 'Welcome!';
});
 
					
				
			
		


步骤 3：解释 JavaScript 代码

选择并修改 <h2> 元素:

选择: getElementsByTagName('h2') 检索所有 <h2> 元素。
修改: 第一个 <h2> 元素的文本更新为 "Updated Introduction"。


选择并修改 <p> 元素:

选择: getElementsByClassName('para') 获取所有带有类 "para" 的段落。
修改: 使用 for 循环遍历每个段落，更新其文本内容以反映其顺序。


选择并修改 <h1> 元素:

选择: getElementById('greeting') 目标是 <h1> 元素。
修改: greeting 文本更改为 "Hello, JavaScript!"。


与按钮的动态交互:

事件监听器: 为 id 为 "changeContent" 的按钮添加事件监听器。
功能: 点击时，恢复标题、段落和 greeting 的原始内容，演示动态的 DOM 操作。



步骤 4：预期输出
加载页面时，初始内容显示原始文本。JavaScript 执行后：

<h2> 标题更改为 "Updated Introduction"。
所有段落的文本更新为 "This is updated paragraph 1."、"This is updated paragraph 2." 等。
<h1> greeting 更改为 "Hello, JavaScript!"。

点击 "Change Content" 按钮将所有更改重置为原始状态。
代码输出示意图




		
		
			
			
Java
			
			执行 JavaScript 之前:
---------------------------------
&lt;h1 id="greeting"&gt;Welcome!&lt;/h1&gt;
&lt;h2&gt;Introduction&lt;/h2&gt;
&lt;p class="para"&gt;This is the first paragraph.&lt;/p&gt;
&lt;p class="para"&gt;This is the second paragraph.&lt;/p&gt;
&lt;p class="para"&gt;This is the third paragraph.&lt;/p&gt;
&lt;button id="changeContent"&gt;Change Content&lt;/button&gt;

执行 JavaScript 之后:
---------------------------------
&lt;h1 id="greeting"&gt;Hello, JavaScript!&lt;/h1&gt;
&lt;h2&gt;Updated Introduction&lt;/h2&gt;
&lt;p class="para"&gt;This is updated paragraph 1.&lt;/p&gt;
&lt;p class="para"&gt;This is updated paragraph 2.&lt;/p&gt;
&lt;p class="para"&gt;This is updated paragraph 3.&lt;/p&gt;
&lt;button id="changeContent"&gt;Change Content&lt;/button&gt;

点击按钮之后:
---------------------------------
&lt;h1 id="greeting"&gt;Welcome!&lt;/h1&gt;
&lt;h2&gt;Introduction&lt;/h2&gt;
&lt;p class="para"&gt;This is the first paragraph.&lt;/p&gt;
&lt;p class="para"&gt;This is the second paragraph.&lt;/p&gt;
&lt;p class="para"&gt;This is the third paragraph.&lt;/p&gt;
&lt;button id="changeContent"&gt;Change Content&lt;/button&gt;
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
				
						执行 JavaScript 之前:
---------------------------------
&lt;h1 id="greeting"&gt;Welcome!&lt;/h1&gt;
&lt;h2&gt;Introduction&lt;/h2&gt;
&lt;p class="para"&gt;This is the first paragraph.&lt;/p&gt;
&lt;p class="para"&gt;This is the second paragraph.&lt;/p&gt;
&lt;p class="para"&gt;This is the third paragraph.&lt;/p&gt;
&lt;button id="changeContent"&gt;Change Content&lt;/button&gt;
 
执行 JavaScript 之后:
---------------------------------
&lt;h1 id="greeting"&gt;Hello, JavaScript!&lt;/h1&gt;
&lt;h2&gt;Updated Introduction&lt;/h2&gt;
&lt;p class="para"&gt;This is updated paragraph 1.&lt;/p&gt;
&lt;p class="para"&gt;This is updated paragraph 2.&lt;/p&gt;
&lt;p class="para"&gt;This is updated paragraph 3.&lt;/p&gt;
&lt;button id="changeContent"&gt;Change Content&lt;/button&gt;
 
点击按钮之后:
---------------------------------
&lt;h1 id="greeting"&gt;Welcome!&lt;/h1&gt;
&lt;h2&gt;Introduction&lt;/h2&gt;
&lt;p class="para"&gt;This is the first paragraph.&lt;/p&gt;
&lt;p class="para"&gt;This is the second paragraph.&lt;/p&gt;
&lt;p class="para"&gt;This is the third paragraph.&lt;/p&gt;
&lt;button id="changeContent"&gt;Change Content&lt;/button&gt;
					
				
			
		


结论
掌握 DOM selectors 对于使用 JavaScript 进行高效的网页开发是基础。通过利用 getElementByTagName、getElementsByClassName 和 getElementById，开发者可以精确定位并操作 HTML 元素，创建动态和交互式的用户体验。请记住，明智地使用这些 selectors，考虑性能和可维护性。在你持续构建和优化项目的过程中，这些 DOM 操作技术将成为你开发工具包中不可或缺的工具。
注意：本文由 AI 生成。
优点	缺点
能够精确选择 HTML 元素	误用可能导致大型文档中的性能问题
简化网页内容的操作	过度依赖 selectors 可能使代码难以维护
增强互动性和动态内容的创建	不正确的使用可能导致意外的行为或错误