动态HTML与W3C文档对象模型详解
立即解锁
发布时间: 2025-08-20 01:27:11 阅读量: 1 订阅数: 5 
JavaScript入门与实践指南
### 动态 HTML 与 W3C 文档对象模型详解
#### 1. JavaScript 标准与兼容性
当前所有 JavaScript 实现都应遵循 1999 年 12 月发布的 ECMAScript 第 3 版标准。截至 2006 年 11 月，ECMAScript 第 4 版正在开发中。尽管微软和网景的 JavaScript 方言过去存在诸多差异，但现在已足够相似，可视为同一种语言。Opera 和 Safari 浏览器也支持并提供对该标准的相同支持。不过，在使客户端对象脚本在主流浏览器之间兼容方面，仍存在一些不兼容性。
#### 2. 文档对象模型（DOM）概述
DOM 是一种独立于浏览器类型来表示文档的方式，它允许开发者通过一组通用的对象、属性、方法和事件访问文档，并使用脚本动态更改网页内容。由于不同脚本语言（如 JavaScript 和 VBScript）有不同语法，浏览器厂商通常会对通用语言（如 JavaScript）添加一些小的变体。为确保不出现特定实现问题，W3C 以 DOM 标准的形式提供了一组通用的对象、属性和方法。
#### 3. DOM 标准的不同级别
- **Level 0**：严格来说，并不存在真正的 Level 0 标准，它实际上指的是在 DOM 标准之前浏览器厂商实现的“旧方法”。例如，使用 `document.forms[0].elements[1].value = “button1”;` 这种更线性的方式访问表单属性和方法。这些方法已被新方法取代，本章不再详细介绍。
- **Level 1**：是标准的第一个版本，分为核心（可应用于 XML 和 HTML 的对象、属性和方法）和 HTML（特定于 HTML 的对象、属性和方法）两个部分。核心部分处理文档结构的导航和操作，对象、属性和方法较为抽象；HTML 部分提供与所有 HTML 元素对应的对象集合。2000 年，Level 1 进行了修订和修正，但仅形成了工作草案，未成为 W3C 的完整推荐标准。
- **Level 2**：已完成，如今许多浏览器已实现了其中的许多属性、方法和事件。它在核心和 HTML 特定属性及事件规范的基础上，增加了事件和样式表的规范。虽然还提供了关于视图和遍历范围的部分，但本书不做详细介绍。由于最新版本的浏览器已实现了该级别 DOM 的事件和样式部分的一些功能，后续会使用到这些特性。
- **Level 3**：2004 年达到推荐状态，旨在解决 Level 2 标准中事件模型仍存在的许多复杂问题，并增加了对 XML 特性的支持，如内容模型和将 DOM 保存为 XML 文档。只有少数浏览器支持 Level 3 的部分功能。
#### 4. 浏览器对标准的兼容性
几乎没有浏览器能 100% 符合任何标准，不过 Firefox、Opera 和 Safari/Chrome 等浏览器在 DOM 方面非常接近。因此，不能保证 DOM 标准的所有对象、属性和方法在给定版本的浏览器中都可用，尽管一些 Level 1 和 Level 2 的对象、属性和方法在所有浏览器中已经存在了一段时间。DOM 标准中的许多内容最近才得到明确，很多 DOM 特性和支持仅添加到了最新版本的浏览器中。所以，本章的示例仅保证在 IE、Firefox、Opera、Safari 和 Chrome 的最新版本中正常工作。虽然跨浏览器脚本是一个现实目标，但向后兼容支持目前还无法实现。
#### 5. DOM 与 BOM 的区别
- **覆盖范围不同**：DOM 仅涵盖网页的文档部分，而 BOM 提供对浏览器所有区域（从按钮到标题栏，包括页面的某些部分）的脚本访问。
- **特定于浏览器**：BOM 是特定于某个浏览器的，因为浏览器需要提供有竞争力的功能，所以无法对其进行标准化。因此，需要不同的属性、方法甚至对象来使用 JavaScript 对其进行操作。
#### 6. 将 HTML 文档表示为树结构
由于 HTML 是标准化的，网页只能包含该语言支持的标准特性（如表单、表格、图像等），因此需要一种通用的方法来访问这些特性，DOM 应运而生。它通过将整个 HTML 文档/网页表示为树结构，提供了对 HTML 文档的统一表示。要将 HTML 文档表示为树结构，文档必须格式良好。不同浏览器对未闭合标签或 HTML 表单控件未包含在 `<form/>` 元素内等问题的容忍程度不同，但为了准确描绘 HTML 文档的结构，必须能够始终预测文档的结构。像未闭合标签这样的结构滥用会阻止将结构描绘为真正的层次结构，因此是不允许的。通过 DOM 访问元素的能力取决于将页面表示为层次结构的能力。
##### 树结构示例
以下是一个简单的 HTML 页面及其对应的树结构示例：
```html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
</head>
<body>
<h1>My Heading</h1>
<p>This is some text in a paragraph.</p>
</body>
</html>
```
对应的树结构如下：
```mermaid
graph TD;
HTML --> HEAD;
HTML --> BODY;
BODY --> H1;
H1 --> "My Heading";
BODY --> P;
P --> "This is some text in a paragraph.";
```
#### 7. 核心 DOM 对象
##### 7.1 基础 DOM 对象
| 对象 | 描述 |
| ---- | ---- |
| Node | 文档中的每个节点都有自己的 Node 对象 |
| NodeList | 这是 Node 对象的列表 |
| NamedNodeMap | 它通过名称而非索引访问所有 Node 对象 |
与 BOM 对象不同，BOM 对象的名称与浏览器的特定部分相关（如窗口对象、表单和图像集合），而 DOM 为了以树的形式导航网页，使用抽象的方式，一切最终都只是一个节点。要在 HTML 元素之间、元素与属性之间移动，必须从一个节点移动到另一个节点，这样可以在不影响整体结构的情况下添加、替换或删除网页的部分内容。
##### 7.2 高级 DOM 对象
由于 DOM 中的一切都是节点，节点有多种类型，如元素、属性或纯文本。Node 对象有不同的对象来表示每种可能的节点类型，以下是可通过 DOM 访问的所有不同节点类型对象的完整列表：
| 对象 | 描述 |
| ---- | ---- |
| Document | 文档的根节点 |
| DocumentType | XML 文档的 DTD 或模式类型 |
| DocumentFragment | 文档部分的临时存储空间 |
| EntityReference | XML 文档中实体的引用 |
| Element | 文档中的元素 |
| Attr | 元素的属性 |
| ProcessingInstruction | 处理指令 |
| Comment | XML 文档或 HTML 文档中的注释 |
| Text | 必须构成元素子节点的文本 |
| CDATASection | XML 文档中的 CDATA 部分 |
| Entity | DTD 中未解析的实体 |
| Notation | DTD 中声明的符号 |
虽然本章不会详细介绍其中大部分对象，但在导航 XML 文档的 DOM 时，可能需要使用它们。每个对象都继承了 Node 对象的所有属性和方法，同时也有自己的一些属性和方法。
#### 8. DOM 对象及其属性和方法
为了更实际地使用 DOM，我们将重点关注三个对象：Node 对象、Element 对象和 Document 对象。
##### 8.1 Document 对象及其方法
Document 对象的方法对于脚本编写者非常重要，它允许查找单个或多个元素，以及创建新的元素、属性和文本节点。
- **查找元素**
- `getElementById(idValue)`：当提供元素的 id 属性值时，返回对该元素的引用（一个节点）。例如：
```html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>example</title>
</head>
<body>
<h1 id=”heading1”>My Heading</h1>
<p id=”paragraph1”>This is some text in a paragraph</p>
<script type=”text/javascript”>
var h1Element = document.getElementById(“heading1”);
h1Element.style.color = “red”;
</script>
</body>
</html>
```
- `getE
400次
会员资源下载次数
300万+
优质博客文章
1000万+
优质下载资源
1000万+
优质文库回答
0
0
复制全文
相关推荐
最低0.47元/天 解锁专栏
赠100次下载
百万级
高质量VIP文章无限畅学
千万级
优质资源任意下载
千万级
优质文库回答免费看
立即解锁
专栏目录
最新推荐
【评估情感分析模型】：准确解读准确率、召回率与F1分数
# 摘要
情感分析是自然语言处理领域的重要研究方向，它涉及从文本数据中识别和分类用户情感。本文首先介绍了情感分析模型的基本概念和评估指标，然后
【wxWidgets布局管理】：构建响应式设计的跨平台界面
# 摘要
wxWidgets是一个支持跨平台的C++库，它提供了一套丰富的界面布局管理工具，能够帮助开发者创建统一用户体验的应用程序。本文首先概述了wxWidgets的基本布局管理和核心理论，强调布局管理在界面响应性中的重要性。接着，文中探讨了响应式界面设计的实践技巧，包括设计步骤、多屏幕尺寸适配以及常见问题的解决策略。通过对跨平台界面实践案例的分析，文中揭示了在不同操作系统间实现布局兼容性的挑战与机遇，
【企业级应用高性能选择】：View堆栈效果库的挑选与应用
# 摘要
堆栈效果库在企业级应用中扮演着至关重要的角色，它不仅影响着应用的性能和功能，还关系到企业业务的扩展和竞争力。本文首先从理论框架入手，系统介绍了堆栈效果库的分类和原理，以及企业在选择和应用堆栈效果库时应该考虑的标准。随后通过实践案例，深入探讨了在不同业务场景中挑选和集成堆栈效果库的策略，以及在应用过程中遇到的挑战和解决方案。文章最后展望了堆栈效果库的未来发展趋势，包括在前沿技术中的应用和创新，以及企业
【确保Verilog算法正确性的秘诀】：LMS滤波器调试与测试
# 摘要
本文系统地介绍了最小均方(LMS)滤波器的理论基础、设计实现、调试方法、性能测试以及应用案例。首先阐述了LMS滤波器的基本工作原理及其自适应滤波和权重调整算法。其次，详细讨论了LMS滤波器设计过程中的系统需求分析和实现中的硬件与软件考量，以及优化算法和性能权衡的实现技巧。接着，文章讲述了调试LMS滤波
【游戏物理引擎基础】：迷宫游戏中的物理效果实现
# 摘要
本文综合探讨了冷却系统设计的基本原理及其在数据中心应用中的重要性，并深入分析了方波送风技术的理论基础、应用实践及优势。通过对比传统冷却技术，本文阐释了方波送风技术在提高能效比和增强系统稳定性方面的显著优势，并详细介绍了该技术在设计、部署、监测、维护及性能评估中的具体应用。进一步地，文章讨论了方波送风技术对数据中心冷却效率、运维成本以及可持续发展的影响，提出了优化方案
声纹识别故障诊断手册：IDMT-ISA-ELECTRIC-ENGINE数据集的问题分析与解决
# 摘要
声纹识别技术在信息安全和身份验证领域中扮演着越来越重要的角色。本文首先对声纹识别技术进行了概述，然后详细介绍了IDMT-ISA-ELECTRIC-ENGINE数据集的基础信息，包括其构成特点、获取和预处理方法，以及如何验证和评估数据集质量。接着，文章深入探
【BT-audio音频抓取工具比较】：主流工具功能对比与选择指南
# 摘要
本文旨在全面介绍BT-audio音频抓取工具，从理论基础、功能对比、实践应用到安全性与隐私保护等多个维度进行了深入探讨。通过分析音频信号的原理与格式、抓取工具的工作机制以及相关法律和伦理问题，本文详细阐述了不同音频抓取工具的技术特点和抓取效率。实践应用章节进一步讲解了音频抓取在不同场景中的应用方法和技巧，并提供了故障排除的指导。在讨论工具安全性与隐私保护时，强调了用户数据安全的重要性和提高工具安全性的策略。最后，本文对音频抓取工具的未来发展和市场需求进行了展望，并提出了选择合适工具的建议。整体而言，本文为音频抓取工具的用户提供了一个全面的参考资料和指导手册。
# 关键字
音频抓取；
MATLAB程序设计模式优化：提升pv_matlab项目可维护性的最佳实践
# 摘要
本文全面探讨了MATLAB程序设计模式的基础知识和最佳实践，包括代码的组织结构、面向对象编程、设计模式应用、性能优化、版本控制与协作以及测试与质量保证。通过对MATLAB代码结构化的深入分析，介绍了函数与脚本的差异和代码模块化的重要性。接着，本文详细讲解了面向对象编程中的类定义、继承、封装以及代码重用策略。在设计模式部分，本文探讨了创建型、结构型和行为型模式在MATLAB编程中的实现与应用
CListCtrl字体与颜色搭配优化：打造视觉舒适界面技巧
# 摘要
本文深入探讨了CListCtrl控件在Windows应用程序开发中的应用，涵盖了基础使用、字体优化、颜色搭配、视觉舒适性提升以及高级定制与扩展。通过详细分析CListCtrl的字体选择、渲染技术和颜色搭配原则，本文提出了提高用户体验和界面可读性的实践方法。同时，探讨了视觉效果的高级应用，性能优化策略，以及如何通过定制化和第三方库扩展List
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
