S08L01 - DOM对象

html

理解 DOM：初学者和开发人员的全面指南
目录

DOM简介 ...................1
DOM结构 .......................3
导航 DOM 树 .................6
使用 JavaScript 修改 DOM .......9
DOM 方法和属性 ..........12
实用示例 ...........................15
结论 .............................................18


DOM简介
欢迎阅读这份关于文档对象模型（DOM）的全面指南。无论您是刚踏入网页开发领域的初学者，还是想要提升知识的资深开发人员，理解 DOM 对于创建动态和交互式网页至关重要。
什么是 DOM？
DOM 是您 HTML 或 XML 文档的对象表示，作为网页与像 JavaScript 这样的编程语言之间的桥梁。它将网页组织成一个层次结构的树形结构，使开发人员能够动态地导航、修改和操控内容。
DOM的重要性

交互性：通过在不重新加载页面的情况下启用动态内容更新，增强用户体验。
灵活性：允许实时更改网页结构、样式和内容。
集成性：作为 JavaScript 与网页交互和修改的基础。

使用 DOM 的优缺点


优点
缺点


促进动态内容操作
误用可能导致性能问题


增强用户互动
文档规模增大时复杂性增加


实现无需重新加载的实时更新
需要理解树结构


何时及何处使用 DOM

动态 Web 应用程序：构建诸如表单、游戏或仪表板等交互功能时。
实时内容更新：需要实时数据更新的应用程序，如聊天应用或实时资讯。
操控网页内容：根据用户操作或事件，需即时添加、移除或修改元素时。


DOM结构
理解 DOM 的结构是有效操控网页的基础。DOM 将文档表示为一个树形结构，其中每个节点都是表示文档一部分的对象。
DOM 树
DOM 的核心是DOM 树，这是一个层次结构的树状结构，反映了您的 HTML 文档的结构。
DOM 树示例




		
		
			
			
Java
			
			文档
│
├── HTML
    │
    ├── 头部
    │   └── 标题
    │
    └── 主体
        ├── H1
            └── 文本节点
        └── A 标签
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
				
						文档
│
├── HTML
    │
    ├── 头部
    │   └── 标题
    │
    └── 主体
        ├── H1
            └── 文本节点
        └── A 标签
					
				
			
		


关键组成部分

文档：表示整个 HTML 或 XML 文档的根节点。
元素节点：表示 HTML 元素如 <html>, <head>, <body>, <h1>, <a> 等。
文本节点：包含元素内的文本内容。
属性：元素的属性，例如 class, id, href 等。

层次表示
DOM 树中的每个元素都可以有子节点、父节点和兄弟节点，形成一个结构化且可导航的框架。

导航 DOM 树
有效的 DOM 操控依赖于能够在 DOM 树中导航，以访问和修改特定的元素。
访问节点
JavaScript 提供了几种方法来访问 DOM 中的节点：

document.getElementById(): 通过其 id 选择一个元素。
document.getElementsByClassName(): 选择所有具有特定 class 的元素。
document.getElementsByTagName(): 选择所有具有特定标签名的元素。
document.querySelector(): 选择与 CSS 选择器匹配的第一个元素。
document.querySelectorAll(): 选择与 CSS 选择器匹配的所有元素。

遍历 DOM
一旦选择了一个节点，您可以遍历其关系：

父节点：使用 parentNode 访问元素的父节点。
子节点：使用 childNodes 访问所有子节点，或使用 children 访问元素子节点。
兄弟节点：使用 nextSibling 和 previousSibling 在兄弟节点之间导航。

示例：访问和遍历节点




		
		
			
			
Java
			
			// Selecting the body element
const body = document.body;

// Accessing the parent node of body (which is HTML)
const parent = body.parentNode;

// Accessing the first child of body (e.g., an h1 tag)
const firstChild = body.firstElementChild;

// Logging the elements
console.log(parent);      // Outputs: <html>...</html>
console.log(firstChild);  // Outputs: <h1>...</h1>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
				
						// Selecting the body element
const body = document.body;
 
// Accessing the parent node of body (which is HTML)
const parent = body.parentNode;
 
// Accessing the first child of body (e.g., an h1 tag)
const firstChild = body.firstElementChild;
 
// Logging the elements
console.log(parent);      // Outputs: <html>...</html>
console.log(firstChild);  // Outputs: <h1>...</h1>
					
				
			
		



使用 JavaScript 修改 DOM
JavaScript 利用 DOM 动态更新网页的内容、结构和样式。本节探讨如何创建、修改和操控 DOM 元素。
创建元素
使用 document.createElement() 创建新元素。




		
		
			
			
Java
			
			// Creating a new paragraph element
const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph.';
			
				
					
				
					1
2
3
				
						// Creating a new paragraph element
const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph.';
					
				
			
		


附加元素
使用 appendChild() 或 append() 将新创建的元素添加到 DOM。




		
		
			
			
Java
			
			// Appending the new paragraph to the body
document.body.appendChild(newParagraph);
			
				
					
				
					1
2
				
						// Appending the new paragraph to the body
document.body.appendChild(newParagraph);
					
				
			
		


修改现有元素
更改现有元素的内容或属性。




		
		
			
			
Java
			
			// Changing the text of an existing h1 element
const header = document.querySelector('h1');
header.textContent = 'Updated Heading';

// Modifying an attribute of an anchor tag
const link = document.querySelector('a');
link.setAttribute('href', 'https://www.example.com');
			
				
					
				
					1
2
3
4
5
6
7
				
						// Changing the text of an existing h1 element
const header = document.querySelector('h1');
header.textContent = 'Updated Heading';
 
// Modifying an attribute of an anchor tag
const link = document.querySelector('a');
link.setAttribute('href', 'https://www.example.com');
					
				
			
		


移除元素
使用 removeChild() 或 remove() 从 DOM 中删除元素。




		
		
			
			
Java
			
			// Removing the newly added paragraph
document.body.removeChild(newParagraph);

// Alternatively, using remove()
newParagraph.remove();
			
				
					
				
					1
2
3
4
5
				
						// Removing the newly added paragraph
document.body.removeChild(newParagraph);
 
// Alternatively, using remove()
newParagraph.remove();
					
				
			
		



DOM 方法和属性
DOM 提供了大量的方法和属性，使开发人员能够有效地与网页交互和操控网页。
常用 DOM 方法


方法
描述


getElementById(id)
通过其 id 检索一个元素。


getElementsByClassName(class)
检索所有具有指定 class 的元素。


getElementsByTagName(tag)
检索所有具有指定标签的元素。


querySelector(selector)
检索与选择器匹配的第一个元素。


querySelectorAll(selector)
检索所有与选择器匹配的元素。


createElement(tag)
创建一个具有指定标签名称的新元素。


appendChild(child)
将一个子节点添加到指定的父节点。


removeChild(child)
从指定的父节点移除一个子节点。


setAttribute(attr, value)
在指定元素上设置属性的值。


常用 DOM 属性


属性
描述


innerHTML
获取或设置元素内的 HTML 内容。


textContent
获取或设置元素内的文本内容。


parentNode
引用元素的父节点。


childNodes
引用元素的所有子节点。


nextSibling
引用元素的下一个兄弟节点。


previousSibling
引用元素的上一个兄弟节点。


attributes
引用元素的所有属性。


style
允许修改元素的内联样式。



实用示例
为了巩固您对 DOM 的理解，让我们通过一个实用示例来演示如何访问、修改和操控 DOM 元素。
示例场景
假设您有以下 HTML 结构：




		
		
			
			
Java
			
			<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p id="intro">This is an introductory paragraph.</p>
    <a href="https://www.original.com" id="myLink">Visit Original</a>
</body>
</html>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
				
						<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p id="intro">This is an introductory paragraph.</p>
    <a href="https://www.original.com" id="myLink">Visit Original</a>
</body>
</html>
					
				
			
		


目标

更改标题文本。
更新段落内容。
修改链接的 URL 和文本。
动态添加一个新段落。

逐步实施
1. 访问并修改标题




		
		
			
			
Java
			
			// Selecting the h1 element
const heading = document.querySelector('h1');

// Updating the text content
heading.textContent = 'Discover Amazing Web Development!';
			
				
					
				
					1
2
3
4
5
				
						// Selecting the h1 element
const heading = document.querySelector('h1');
 
// Updating the text content
heading.textContent = 'Discover Amazing Web Development!';
					
				
			
		


2. 更新段落内容




		
		
			
			
Java
			
			// Selecting the paragraph by its ID
const paragraph = document.getElementById('intro');

// Changing the text content
paragraph.textContent = 'Learn how to manipulate the DOM to create dynamic web pages.';
			
				
					
				
					1
2
3
4
5
				
						// Selecting the paragraph by its ID
const paragraph = document.getElementById('intro');
 
// Changing the text content
paragraph.textContent = 'Learn how to manipulate the DOM to create dynamic web pages.';
					
				
			
		


3. 修改链接的 URL 和文本




		
		
			
			
Java
			
			// Selecting the anchor tag by its ID
const link = document.getElementById('myLink');

// Updating the href attribute
link.setAttribute('href', 'https://www.example.com');

// Changing the link text
link.textContent = 'Visit Example';
			
				
					
				
					1
2
3
4
5
6
7
8
				
						// Selecting the anchor tag by its ID
const link = document.getElementById('myLink');
 
// Updating the href attribute
link.setAttribute('href', 'https://www.example.com');
 
// Changing the link text
link.textContent = 'Visit Example';
					
				
			
		


4. 动态添加一个新段落




		
		
			
			
Java
			
			// Creating a new paragraph element
const newParagraph = document.createElement('p');

// Setting the text content
newParagraph.textContent = 'This paragraph was added dynamically using JavaScript.';

// Appending the new paragraph to the body
document.body.appendChild(newParagraph);
			
				
					
				
					1
2
3
4
5
6
7
8
				
						// Creating a new paragraph element
const newParagraph = document.createElement('p');
 
// Setting the text content
newParagraph.textContent = 'This paragraph was added dynamically using JavaScript.';
 
// Appending the new paragraph to the body
document.body.appendChild(newParagraph);
					
				
			
		


完整代码示例




		
		
			
			
Java
			
			<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <script>
        document.addEventListener('DOMContentLoaded', () =&gt; {
            // Access and Modify the Heading
            const heading = document.querySelector('h1');
            heading.textContent = 'Discover Amazing Web Development!';

            // Update the Paragraph Content
            const paragraph = document.getElementById('intro');
            paragraph.textContent = 'Learn how to manipulate the DOM to create dynamic web pages.';

            // Modify the Link URL and Text
            const link = document.getElementById('myLink');
            link.setAttribute('href', 'https://www.example.com');
            link.textContent = 'Visit Example';

            // Add a New Paragraph Dynamically
            const newParagraph = document.createElement('p');
            newParagraph.textContent = 'This paragraph was added dynamically using JavaScript.';
            document.body.appendChild(newParagraph);
        });
    </script>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p id="intro">This is an introductory paragraph.</p>
    <a href="https://www.original.com" id="myLink">Visit Original</a>
</body>
</html>
			
				
					
				
					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
				
						<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <script>
        document.addEventListener('DOMContentLoaded', () =&gt; {
            // Access and Modify the Heading
            const heading = document.querySelector('h1');
            heading.textContent = 'Discover Amazing Web Development!';
 
            // Update the Paragraph Content
            const paragraph = document.getElementById('intro');
            paragraph.textContent = 'Learn how to manipulate the DOM to create dynamic web pages.';
 
            // Modify the Link URL and Text
            const link = document.getElementById('myLink');
            link.setAttribute('href', 'https://www.example.com');
            link.textContent = 'Visit Example';
 
            // Add a New Paragraph Dynamically
            const newParagraph = document.createElement('p');
            newParagraph.textContent = 'This paragraph was added dynamically using JavaScript.';
            document.body.appendChild(newParagraph);
        });
    </script>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p id="intro">This is an introductory paragraph.</p>
    <a href="https://www.original.com" id="myLink">Visit Original</a>
</body>
</html>
					
				
			
		


输出说明
JavaScript 执行后：

<h1> 文本更改为 "Discover Amazing Web Development!"
具有 id="intro" 的段落内容更新为 "Learn how to manipulate the DOM to create dynamic web pages."
锚标签的 href 属性更改为 "https://www.example.com"，且其文本更新为 "Visit Example"。
在主体末尾添加了一个新的段落，文本为 "This paragraph was added dynamically using JavaScript."


结论
文档对象模型（DOM）是从事网页开发的任何人必不可少的概念。它提供了网页文档的结构化表示，允许动态交互和实时内容操作。通过掌握 DOM，您可以创建更具交互性、响应性和用户友好的网页应用程序。
关键要点

DOM 结构：理解 DOM 的树状结构是导航和操控网页的基础。
访问元素：利用各种 DOM 方法，从您的网页文档中选择和访问特定的元素。
操控技术：学习如何创建、修改和移除元素，以增强网页的交互性。
实际应用：动手示例巩固了理论知识，使在实际场景中应用变得更容易。

拥抱 DOM 的力量，提升您的网页开发技能，创建引人入胜、动态独特的网站。
SEO 关键词：DOM, Document Object Model, 网页开发, JavaScript DOM manipulation, 动态网页, DOM methods, 初学者的 DOM 指南, JavaScript for beginners, 操控 DOM, 交互式网页
注意：本文由 AI 生成。
方法	描述
getElementById(id)	通过其 `id` 检索一个元素。
getElementsByClassName(class)	检索所有具有指定 `class` 的元素。
getElementsByTagName(tag)	检索所有具有指定标签的元素。
querySelector(selector)	检索与选择器匹配的第一个元素。
querySelectorAll(selector)	检索所有与选择器匹配的元素。
createElement(tag)	创建一个具有指定标签名称的新元素。
appendChild(child)	将一个子节点添加到指定的父节点。
removeChild(child)	从指定的父节点移除一个子节点。
setAttribute(attr, value)	在指定元素上设置属性的值。
优点	缺点
促进动态内容操作	误用可能导致性能问题
增强用户互动	文档规模增大时复杂性增加
实现无需重新加载的实时更新	需要理解树结构
属性	描述
innerHTML	获取或设置元素内的 HTML 内容。
textContent	获取或设置元素内的文本内容。
parentNode	引用元素的父节点。
childNodes	引用元素的所有子节点。
nextSibling	引用元素的下一个兄弟节点。
previousSibling	引用元素的上一个兄弟节点。
attributes	引用元素的所有属性。
style	允许修改元素的内联样式。