动态HTML与W3C文档对象模型
立即解锁
发布时间: 2025-08-20 01:27:12 阅读量: 1 订阅数: 5 
JavaScript入门与实践指南
### 动态 HTML 与 W3C 文档对象模型
在网页开发中，动态 HTML（Dynamic HTML）和 W3C 文档对象模型（DOM）是非常重要的概念。它们允许开发者在网页加载后对其进行操作，从而实现丰富的交互效果。下面将详细介绍相关内容。
#### 1. DOM 节点创建与追加
在创建 DOM 节点时，创建节点的顺序并不重要。例如，可以先创建文本节点再创建元素节点，也可以反之。但为了性能考虑，追加节点的顺序至关重要。因为更新 DOM 是一个开销较大的过程，如果频繁对 DOM 进行更改，会影响性能。
例如，将完整的元素追加到文档的 body 中，只需要更新 DOM 两次；而如果先将元素追加到 body 中，再将文本节点追加到元素中，则需要更新四次。所以，应尽量将完整的元素节点（包括元素、其属性和任何文本）一次性追加到文档中。
#### 2. 操作 DOM
动态 HTML 指的是在 HTML 页面加载到浏览器后对其进行操作。到目前为止，我们已经了解了基本 DOM 对象的属性和方法，并学会了如何通过 JavaScript 遍历 DOM。
##### 2.1 访问元素
DOM 提供了查找和访问 HTML 元素的工具，其中 `getElementById()` 方法是最常用的。当我们想要操作特定元素时，为 HTML 元素分配 `id` 属性是找到这些元素最简单、最有效的方法。
##### 2.2 改变外观
改变元素外观是最常见的 DOM 操作之一。这种改变可以为网站访问者创造交互式体验，甚至可以用于提醒他们重要信息或要求他们执行某项操作。改变元素外观主要是通过 JavaScript 改变 HTML 元素的 CSS 属性，有两种方式：
- 使用 `style` 属性逐个更改 CSS 属性。
- 更改元素的 `class` 属性值。
##### 2.2.1 使用 `style` 属性
要更改特定的 CSS 属性，需要使用 `style` 属性。所有现代浏览器都实现了这个对象，它直接映射到元素的 `style` 属性。通过它可以更改浏览器支持的任何 CSS 属性。
示例代码如下：
```javascript
var divAdvert = document.getElementById("divAdvert"); // 获取所需元素
divAdvert.style.color = "blue"; // 将文本颜色更改为蓝色
```
需要注意的是，有些 CSS 属性名在 JavaScript 中与在 CSS 文件中的写法略有不同。例如，包含连字符（-）的 CSS 属性，在 JavaScript 中需要去掉连字符，并将连字符后面的单词首字母大写。
错误示例：
```javascript
divAdvert.style.background-color = "gray"; // 错误
```
正确示例：
```javascript
divAdvert.style.backgroundColor = "gray"; // 正确
```
此外，`style` 对象只能获取通过 `style` 属性（内联样式）或 `style` 对象设置的样式值。如果样式是在 `<style>` 块中设置的，则无法通过 `style` 对象获取该属性的值。
以下是一个使用 `style` 对象改变文本外观的简单示例：
```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>示例 4</title>
<style type="text/css">
#divAdvert
{
font: 12pt arial;
}
</style>
<script type="text/javascript">
function divAdvert_onMouseOver()
{
var divAdvert = document.getElementById("divAdvert");
divAdvert.style.fontStyle = "italic";
divAdvert.style.textDecoration = "underline";
}
function divAdvert_onMouseOut()
{
var divAdvert = document.getElementById("divAdvert");
divAdvert.style.fontStyle = "normal";
divAdvert.style.textDecoration = "none";
}
</script>
</head>
<body>
<div id="divAdvert" onmouseover="divAdvert_onMouseOver()"
onmouseout="divAdvert_onMouseOut()">
这里是一则广告。
</div>
</body>
</html>
```
将上述代码保存为 `ch12_examp4.htm`，在浏览器中运行。当鼠标悬停在文本上时，文本会变为斜体并加下划线；鼠标移开后，文本恢复正常。
这个示例的流程如下：
1. 在页面的 `<body>` 中定义一个 `id` 为 `divAdvert` 的 `<div>` 元素。
2. 将鼠标悬停和移出事件分别绑定到 `divAdvert_onMouseOver()` 和 `divAdvert_onMouseOut()` 函数。
3. 当鼠标指针进入 `<div>` 元素时，调用 `divAdvert_onMouseOver()` 函数。该函数首先使用 `getElementById()` 方法获取元素，然后通过 `fontStyle` 属性将文本设为斜体，再通过 `textDecoration` 属性为文本添加下划线。
4. 当鼠标移出时，调用 `divAdvert_onMouseOut()` 函数，将 `fontStyle` 属性设为 `normal`，`textDecoration` 属性设为 `none`，使文本恢复正常。
##### 2.2.2 更改 `class` 属性
可以通过元素的 `class` 属性为元素分配 CSS 类。在 DOM 中，这个属性通过 `className` 属性暴露，可以通过 JavaScript 更改它，从而为元素关联不同的样式规则。
使用 `className` 属性更改元素样式有两个优点：
- 减少需要编写的 JavaScript 代码量。
- 将样式信息从 JavaScript 文件中分离出来，放入 CSS 文件中，便于修改样式规则。
以下是使用 `className` 属性的示例：
```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>示例 5</title>
<style type="text/css">
.defaultStyle
{
font: normal 12pt arial;
text-decoration: none;
}
.newStyle
{
font: italic 12pt arial;
text-decoration: underline;
}
</style>
<script type="text/javascript">
function divAdvert_onMouseOver()
{
var divAdvert = document.getElementById("divAdvert");
divAdvert.className = "newStyle";
}
function divAdvert_onMouseOut()
{
var divAdvert = document.getElementById("divAdvert");
divAdvert.className = "defaultStyle";
}
</script>
</head>
<body>
<div id="divAdvert" class="defaultStyle" onmouseover="divAdvert_onMouseOver()"
onmouseout="divAdvert_onMouseOut()">
这里是一则广告。
</div>
</body>
</html>
```
将上述代码保存为 `ch12_examp5.htm`，该页面的行为与 `ch12_examp4.htm` 完全相同。
这个示例与使用 `style` 对象的示例有几个关键区别：
- 移除了 `#divAdvert` 样式规则，取而代之的是两个 CSS 类：`defaultStyle` 和 `newStyle`。
- `<div>` 元素的定义更改为使用 `defaultStyle` CSS 类。
- JavaScript 代码中，`divAdvert_onMouseOver()` 函数和 `divAdvert_onMouseOut()` 函数分别将 `className` 属性更改为 `newStyle` 和 `defaultStyle`。
#### 3. 定位和移动内容
改变元素外观是 DHTML 中的重要模式，但 DHTML 不仅仅局限于此，还可以使用 JavaScript 改变元素的位置。
使用 JavaScript 移动内容与使用 `style` 对象一样简单。可以使用 `position` 属性更改所需的定位类型，通过 `left` 和 `top` 属性来定位元素。
示例代码如下：
```javascript
var divAdvert = document.getElementById("divAdvert");
divAdvert.style.p
```
400次
会员资源下载次数
300万+
优质博客文章
1000万+
优质下载资源
1000万+
优质文库回答
0
0
复制全文
相关推荐
最低0.47元/天 解锁专栏
赠100次下载
百万级
高质量VIP文章无限畅学
千万级
优质资源任意下载
千万级
优质文库回答免费看
立即解锁
专栏目录
最新推荐
构建可扩展医疗设备集成方案：飞利浦监护仪接口扩展性深入解析
# 摘要
本文探讨了医疗设备集成的重要性和面临的挑战，重点分析了飞利浦监护仪接口技术的基础以及可扩展集成方案的理论框架。通过研究监护仪接口的技术规格、数据管理和标准化兼容性，本文阐述了实
【Matlab优化算法实战】：精通Matlab实现复杂问题优化的技巧
# 摘要
本文全面概述了Matlab优化算法的理论基础、实践操作以及高级应用。首先，介绍了数学优化问题的分类和优化
【机器人灵巧手医疗应用】：手术精度革命的新工具
# 摘要
随着医疗技术的进步，机器人灵巧手在手术精度和康复辅助方面展现出巨大潜力，已成为推动医疗领域创新的重要力量。本文首先介绍了机器人灵巧手在医疗领域的应用背景，随后深入探讨了其技术原理，包括机械结构设计、控制系统、以及传感技术。文章还通过具体应用案例，如外科手术、康复辅助以及医学教育与培训，分析了灵巧手的实际应
STM8点阵屏汉字显示：用户界面设计与体验优化的终极指南
# 摘要
STM8点阵屏技术作为一种重要的显示解决方案，广泛应用于嵌入式系统和用户界面设计中。本文首先介绍STM8点阵屏的技术基础，然后深入探讨汉字显示的原理，并着重分析用户界面设计策略，包括布局技巧、字体选择、用户交互逻辑及动态效果实现等。接着，本文详细阐述了STM8点阵屏的编程实践，涵盖开
【C#跨平台开发与Focas1_2 SDK】：打造跨平台CNC应用的终极指南
# 摘要
本文全面介绍了C#跨平台开发的原理与实践，从基础知识到高级应用，详细阐述了C#语言核心概念、.NET Core与Mono平台的对比、跨平台工具和库的选择。通过详细解读Focas1_2 SDK的功能与集成方法，本文提供了构建跨平台CNC应用的深入指南，涵盖CNC通信协议的设计、跨平台用户界面的开发以及部署与性能优化策略。实践案例分析部分则通过迁移现有应用和开发新应用的实战经验，向读者展示了具体的技术应用场景。最后，本文对
【游戏物理引擎基础】：迷宫游戏中的物理效果实现
# 摘要
本文详细探讨了基于wxWidgets的跨平台多媒体开发，涵盖了多媒体处理的基础理论知识、在wxWidgets中的实践应用，以及相关应用的优化与调试方法。首先介绍多媒体数据类型与
MATLAB程序设计模式优化：提升pv_matlab项目可维护性的最佳实践
# 摘要
本文全面探讨了MATLAB程序设计模式的基础知识和最佳实践，包括代码的组织结构、面向对象编程、设计模式应用、性能优化、版本控制与协作以及测试与质量保证。通过对MATLAB代码结构化的深入分析，介绍了函数与脚本的差异和代码模块化的重要性。接着，本文详细讲解了面向对象编程中的类定义、继承、封装以及代码重用策略。在设计模式部分，本文探讨了创建型、结构型和行为型模式在MATLAB编程中的实现与应用
【BT-audio音频抓取工具比较】：主流工具功能对比与选择指南
# 摘要
本文旨在全面介绍BT-audio音频抓取工具，从理论基础、功能对比、实践应用到安全性与隐私保护等多个维度进行了深入探讨。通过分析音频信号的原理与格式、抓取工具的工作机制以及相关法律和伦理问题，本文详细阐述了不同音频抓取工具的技术特点和抓取效率。实践应用章节进一步讲解了音频抓取在不同场景中的应用方法和技巧，并提供了故障排除的指导。在讨论工具安全性与隐私保护时，强调了用户数据安全的重要性和提高工具安全性的策略。最后，本文对音频抓取工具的未来发展和市场需求进行了展望，并提出了选择合适工具的建议。整体而言，本文为音频抓取工具的用户提供了一个全面的参考资料和指导手册。
# 关键字
音频抓取；
【调试与性能优化】：LMS滤波器在Verilog中的实现技巧
# 摘要
本文详细探讨了最小均方(LMS)滤波器的理论基础、硬件实现、调试技巧以及性能优化策略，并通过实际案例分析展示了其在信号处理中的应用。LMS滤波器作为一种自适应滤波器，在数字信号处理领域具有重要地位。通过理论章节，我们阐述了LMS算法的工作原理和数学模型，以及数字信号处理的基础知识。接着，文章介绍了LMS滤波器的Verilog实现，包括Verilog语言基础、模块
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
