当前位置：文江博客话题详情

什么是 DOM？（总结和重要性）

发布于 2024-10-17 05:28:45 字数 225 浏览 5 评论 0原文

什么是文档对象模型 (DOM)？

我问这个问题是因为我主要从事 .NET 工作，经验有限，但我经常听到更有经验的开发人员谈论/提到它。我在线阅读教程，但无法理解整个情况。我知道这是一个API！

更具体的问题是：

目前在哪里使用？
哪些领域的开发人员使用它（前 .NET 开发人员）？
对于所有开发人员来说，理解它的相关性如何？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

仄言 2024-10-24 05:28:45

一般来说，DOM 是结构化文档的模型。
它是当今 IT 的核心概念，任何开发人员都不能选择退出 DOM。无论是在 .net、HTML、XML 还是其他使用它的域中。
它适用于所有文档（word 文档、HTML 页面、XML 文件等）。在开发人员领域，它主要应用于 HTML 和 XML 领域，含义略有不同。

HTML

在 HTML 领域，DOM 的引入是为了支持 90 年代末所谓的“动态 HTML”革命。在 IE4 和 Netscape 4.0 之前，HTML 文档在浏览器内是不可更改的（在这些遥远的时代，你用来绘制网页的全部就是“动画 GIF”!!!! 而 HTML 是 3.2 版）。
因此，在浏览器内部动态操作服务器发送的文档是一场巨大的革命，并引发了向我们今天看到的有吸引力的网站的迈进。

Javascript 是由 Netscape 引入的（命名为 javascript 是为了适应新的 Java 趋势，但无关），并且受到 Netscape HTTP 服务器和 Netscape 浏览器的支持，而 Internet Explorer 也热切地关注着浏览器内部的发展。然而，当使用 javascript 操作文档内容时，您需要一种简单的方法来指定要与之交互的文档部分。这就是 DOM 的用武之地。尽管 HTML 4 不是“格式良好”，但浏览器会以分层组织（子节点、父节点、节点属性等）。 DOM 是支持 API 的模型，允许导航此层次结构。

由于 Netscape 和 IE 浏览器都是相互竞争的解决方案，因此 NS 和 IE DOM 融合的可能性很小。 W3C 介入，允许较小的浏览器供应商参与竞争，并努力标准化 DOM。因此就有了 W3C DOM。它所做的只是引入了另一种方言，众所周知，它花了数年时间和两个强有力的竞争对手才迫使微软遵守标准。

尽管 JQuery 等更现代的导航技术具有 DOM 的简写符号，但它们在内部依赖于 DOM。

XML

HTML 使对文档的“格式良好”表现出宽松的缺点变得明显，并由此引发了新的热潮：XML。在 Web 领域，XML 和 XSLT 首先由 IE5 支持，并在更多领域中采用，而不仅仅是显示页面。
要解析 XML，主要是在 Java Word 中，您需要开发一个 SAX 解析器，它基本上是 SAX 引擎的一个插件，您可以在其中描述引擎应该对它在 XML 中遇到的所有 XML 事件（标签...）执行什么操作。已解析的文档。开发 SAX 解析器并不简单，但却是一种占用资源少的解决方案。
但是，您必须为每种新文档类型开发一个特定的文档...
因此，不久之后，库就开始出现，可以解析任何文档并构建其层次结构的内存映射。因为它也具有相同的根、父级和子级概念（通过 HTML 从 SGML 继承），所以它也被称为 DOM，并且该名称适用于任何库。

其他领域

DOM 的概念不限于 HTML 或 XML，甚至不限于 HTML 或 XML。 DOM 是一个通用概念，适用于任何文档，尤其是那些显示需要导航的层次结构的文档（绝大多数文档都是如此）。您可以谈论 MS-Word 文档的 DOM，并且也有 API 可以导航这些文档。

In general terms a DOM is a model for a structured document.
It is a central concept in today's IT and no developer can opt out of DOM. Be it in .net, in HTML, in XML or other domains where it is used.
It applies to all documents (word documents, HTML pages, XML files, etc). In the developer sphere it applies mainly in the HTML and the XML domains with slightly different meanings.

HTML

In the HTML arena, the DOM was introduced to support the revolution called in the late 90ies "dynamic HTML". Before IE4 and Netscape 4.0, HTML documents where not changeable inside the browser (all you had in these remote times to sprite up a web page was "animated GIF" !!!! and HTML was version 3.2).
Therefore dynamically manipulating inside the browser the document sent by the server was a huge revolution and initiated the march towards the attractive web sites we see today.

Javascript had been introduced by Netscape (baptised javascript to surf on the new Java trend, but unrelated) and was supported by both Netscape HTTP servers and Netscape browsers, with Internet Explorer eagerly following the move inside the browser. However When javascript is used to manipulate the content of a document, you need an easy way to designate the part of the document you want to interact with. That's where the DOM comes in. Although HTML 4 is not "well formed", browsers build an internal representation of the page with the "body" element at its top and plenty of html tags below, in a hierarchical organisation (child nodes, parent nodes attributes etc). The DOM is the model underpinning the API that allows to navigate this hierarchy.

Since both Netscape and IE browsers were competing solutions, there was little chance the NS and the IE DOM would converge. The W3C stepped in to allow smaller browser vendors to enter the competition and endeavoured to standardised the DOM. Hence the W3C DOM. All it did was just to introduce another dialect and as everybody knows it took years and two serious competitors to force MS to comply with the standards.

Even though more moderns navigating techniques like JQuery have shorthand notations for the DOM, they internally rely on the DOM.

XML

HTML made obvious the disadvantages of showing leniency towards the "well-formedness" of documents and this ushered a new craze : XML. In the web arena, XML and XSLT were first supported by IE5 and adopted in many more domains than just displaying pages.
To parse XML, in the Java Word mainly, you would develop a SAX parser which is basically a plugin to a SAX engine in which you describe what the engine should do of all the XML events (tags...) it will encounter in the parsed document. Developing a SAX parser is not straightforward but is a low footprint solution.
However you have to develop a specific one for each new document type...
So it was not long before libraries started to appear to parse any document and build an in-memory map of its hierarchy. Because it also had the same concepts of root, parents and children (inherited from SGML through HTML), it was also termed a DOM and the name applies regardless of the library.

Other domains

The concept of DOM is not restricted to or even invented for HTML or XML. A DOM is a general concept applicable to any document, especially those (the vast majority of them do) showing a hierarchical structure in which you need to navigate. You can speak about the DOM of a MS-Word document and there are APIs to navigate these as well.

回复收藏 0 原文

满天都是小星星 2024-10-24 05:28:45

DOM 是定义良好的 HTML 和 XML 结构的应用程序编程接口（根据 W3C 的文档）。它可用于与网页元素（任何元素 - 样式、文本、属性等）交互的任何地方。您会听到很多关于 JavaScript 和/或 JavaScript 库的 DOM，例如 jQuery（当然是 JavaScript）。 Java、ECMAScript、JScript 和 VBScript 也引用了它。

如果您正在进行 .NET 编程，那么如果您正在从事基于 Web 的工作，这一点很重要。如果您正在进行应用程序编程，那么它就不那么重要了。 DOM 绝对不是过去的东西——许多开发人员每天都在使用和工作它。话虽如此，跨 Web 浏览器的 DOM 标准化一直在努力。（同样，库可以帮助隐藏这些差异。这是 jQuery 如此受欢迎的原因之一。您不必担心浏览器的具体情况 - 您只需做您需要做的事情。）

我上面链接到的文档做了很好的贡献回答您所有的问题以及更多问题。我强烈推荐阅读它。如果您还有更多疑问，还可以查看以下链接：

什么是文档对象模型？ (W3C)
文档对象模型（维基百科）

回复收藏 0 原文

愁以何悠 2024-10-24 05:28:45

当浏览器加载 HTML 页面时，会将其转换为文档对象模型 (DOM)。

浏览器生成的 HTML DOM 构造为一棵树，其中包含作为对象的所有 HTML 页面元素。例如，假设您在浏览器上加载以下 HTML 页面：

<!DOCTYPE html>
<html>
    <head>
        <title>website title</title>
    </head>
    <body>
        <p id="js_paragraphId">I'm a paragraph</p>
        <a href="http://somewebsite.com">some website</a>
    </body>
</html>

加载后，浏览器将其转换为：

HTML DOM 上的脚本语言的一些功能包括：

1-更改页面中的所有 HTML 元素。

2-更改页面中的所有 HTML 属性。

3-更改页面上的所有CSS样式。

4- 删除现有的 HTML 元素和属性。

5- 添加新的 HTML 元素和属性。

6- 对页面中所有现有的 HTML 事件做出反应。

7- 在页面上创建新的 HTML 事件。

让我们回到您的问题：

1- 它目前在所有现代浏览器中使用。

2-前端开发人员。

3- 所有使用脚本语言尤其是 JavaScript 的前端开发人员。

When a browser loads an HTML page, its convert it to the Document Object Model (DOM).

The browser's produced HTML DOM, constructs as a tree that consists of all your HTML page element as objects. For example, assuming that you load below HTML page on a browser:

<!DOCTYPE html>
<html>
    <head>
        <title>website title</title>
    </head>
    <body>
        <p id="js_paragraphId">I'm a paragraph</p>
        <a href="http://somewebsite.com">some website</a>
    </body>
</html>

After loading, the browser converts it to:

Some of the ability of scripting languages on HTML DOM consists of:

1- Change all the HTML elements in the page.

2- change all the HTML attributes in the page.

3- Change all the CSS styles on the page.

4- Remove existing HTML elements and attributes.

5- Add new HTML elements and attributes.

6- React to all existing HTML events in the page.

7- create new HTML events on the page.

Let's back to your questions:

1- It currently used in all modern browsers.

2- Front-end developers.