理解JavaScript的DOM操作与应用

4星 · 超过85%的资源需积分: 9 179 浏览量更新于2024-07-27 收藏 554KB PDF 举报

"JavaScript文档对象模型(DOM)是Web开发中的一个重要概念，它是一个标准，允许程序员通过JavaScript来动态地访问和更新HTML或XML文档的内容、结构和样式。DOM最初由W3C制定，旨在解决不同浏览器之间的兼容性问题。在DOM中，HTML或XML页面的每个部分都被表示为一个节点，这些节点可以通过DOM API进行操作。本章主要讨论的是HTML DOM。 DOM的核心包括JavaScript语言基础、核心对象、浏览器对象和文档对象。JavaScript语言参考涉及数据类型、运算符、基本语句和函数等。核心对象如String、Array、Math和Date提供了处理数据的方法。浏览器对象模型(BOM)包含像window、location、history和navigator这样的对象，允许开发者与浏览器的特性交互。文档对象模型(DOM)则专注于文档内容，包括document、images、forms等元素，使开发者能够操纵HTML元素和它们包含的文本。在JavaScript中，BOM和DOM虽然有所不同，但都是紧密相关的。BOM主要处理浏览器的非文档部分，如窗口大小调整、弹出新窗口等，而DOM则关注文档内容的处理，如添加、删除或修改HTML元素。例如，通过DOM，可以找到页面上的特定元素，改变它的样式，或者添加新的HTML元素。以下是一个简单的HTML代码示例，展示了DOM操作的基本应用： ```html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <title>DOM操作示例</title> </head> <body> <h1 id="myTitle">欢迎来到我的网站</h1> <button onclick="changeTitle()">点击修改标题</button> <script> function changeTitle() { var titleElement = document.getElementById('myTitle'); titleElement.innerHTML = '标题已更改'; } </script> </body> </html> ``` 在这个例子中，`changeTitle`函数通过DOM的`getElementById`方法找到了id为`myTitle`的`h1`元素，并改变了它的内容。这就是DOM的强大之处，它使开发者能够用JavaScript与HTML页面进行交互，实现动态效果和丰富的用户体验。理解并熟练掌握DOM对于任何想要进行前端开发的程序员来说都是至关重要的，因为它提供了一种标准化的方式来操作网页内容，无论是在哪个浏览器环境下。通过DOM，开发者可以构建出响应式、交互性强的Web应用程序，极大地提升了Web开发的灵活性和可维护性。

all[]

对象包含的所有标记的集合

children[]

对象直接派生的标记的集合

innerHTML

包含由对象的标记中包含的HTML内容的字符串，对多数HTML标记可写

innerText

包含由对象的标记中包含的文本内容的字符串，对多数HTML标记可写

outerHTML

包含标记中包含的HTML内容的字符串，对多数HTML标记可写

outerText

包含标记中包含的文本内容的字符串，对多数HTML标记可写

parentElement

对父对象的引用

className

包含对象的CSS类的字符串

style

包含对象的CSS属性的style对象

tagName

包含与对象相关的HTML标记名字的字符串

表 5.6 IE4 中文本对象的新方法

方法附加说明

Click()

模拟鼠标单击，触发onClick()事件处理器

getAttribute()

返回所指标记的HTML属性的参数

setAttribute()

设置所指标记的HTML属性的参数

removeAttribute()

从标记中删除HTML属性的参数

insertAdjacentHTML()

在标记的前面、后面或当中插入HTML语句

insertAdjacentText()

在标记的前面、后面或当中插入文本

IE4 对象模型结构如图 5.6 所示，其中灰色框内的为 IE4 中 document 对象新增内容。

图 5.6 IE4 对象模型结构

下面一段代码综合了 IE4 中文本对象操作的新方法：

//源程序 5.3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"

"http://www.w3.org/TR/REC-html140/strict.dtd">

<html>

<head>

<title>Sample</title>

</head>

<body>

<br>

<h1 id="MyTest" align="center">My Test String!<h1><br>

<input type="button" value="改变字符串内容"

onclick="document.all['MyTest'].innerText=document.MyTestForm.userText.value"><br>

</form>

</body>

</html>

IE5 文档对象模型中与 IE4 极其相似，但对 IE4 进行了功能扩展，增加了对象的可用属

性和方法，使得它更为强大，具有更强的文档操作能力。同时，IE5 中的事件处理器数目也

大大增加，达到 40 多种，从专门的鼠标和键盘事件到进行剪贴、复制的事件。IE5 中支持

两种新的功能部件：DHTML 行为和 HTML 应用程序，前者允许程序员定义可被任何元素

反复使用的 DHTML 成分，后者则表现得更像真正的程序而不是 Web 应用程序。

IE5.5、6、7 在继续 IE4 文档对象模型的基础上，在实现 W3C DOM 规范的同时，继续

添加只能在 IE 内核浏览器中运行的功能部件，包括新的属性、方法和事件处理程序。从 IE6

开始，完全符合 CSS1 和 DOM Level 1 标准。

较之其他浏览器，IE 对 W3C DOM 标准贯彻得不是很完全，尚有许多有待完善的地方。

3．Opera、Mozilla 和其他浏览器

由于 IE 的漏洞及运行速度问题，很多工程专业的使用者采用 Opera、Mozilla 及其它的

浏览器。这些浏览器一般非常严格执行 W3C 和 ECMA 标准，而不采用 IE 和 NN 的特有对

象模型(一些也提供对 NN2 和 IE3 对象模型的支持)，主要致力于在 W3C 标准基础上进行开

发。

在针对内容和样式的 HTML 和 CSS 的公用规范推出后，DOM 承诺建立统一的范例，

用于生成不仅能和网络，而且能和离线的商业或者技术系统进行交互的文档。Netscape 承诺

并已经在 NN6 中彻底贯彻了这一标准。Mozilla 具有最好的 DOM 支持，实现了完整的 DOM

Level 1、几乎所有的 DOM Level 2 以及部分 DOM Level 3。在 Mozilla 之后，Opera 和 Safari

也在完全支持该标准上做出了相当的努力，极大缩小了与标准之间的差距，支持几乎所有的

DOM Level 1 和大部分 DOM Level 2。

5.1.3 W3C DOM

客户端 Web 应用程序开发人员面对的最大障碍在于 DOM 有很多不同的版本，同时在

浏览器版本更替过程中，对象模型又不是统一的，如果需要在不同浏览器环境中运行该网页，

将会发现对象的很多属性或方法，甚至某些对象都不起作用。W3C 文档对象模型(DOM)是

一个中立的接口语言平台，为程序以及脚本动态地访问和更新文档内容，结构以及样式提供

一个通用的标准。它将把整个页面(HTML 或 XML)规划成由节点分层构成的文档，页面的

每个部分都是一个节点的衍生物，从而使开发者对文档的内容和结构具有空前的控制力，用

DOM API 可以轻松地删除、添加和替换指定的节点。

DOM 规范必须适应 HTML 的已知结构，同时适应 XML 文档的未知结构。DOM 的概

念主要有：

z 核心 DOM：指定类属类型，将带有标记的文档看成树状结构并据此对文档进行相

剩余37页未读，继续阅读

lxlcaat

粉丝: 0
资源: 3

理解JavaScript的DOM操作与应用

JavaScrip文档对象模型(DOM).

AJAX文档对象模型DOM

DOM（文档对象模型）是一种编程接口，用于在JavaScript中访问HTML文档的元素和内容

什么是文档对象模型？能做什么？

出五道和JavaScript的DOM和BOM有关的五道判断题

BOM和DOM的主要作用是什么？

javascriptdom编程艺术pdf

javascript学习手册十三：html dom——文档元素的操作（一）

什么叫jQuery对象，什么是js，什么是dom对象，有什么区别

最新资源