DOM是啥？

Posted 2023-04-16

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM是啥？相关的知识，希望对你有一定的参考价值。

什么是 DOM？
通过 javascript，您可以重构整个 html 文档。您可以添加、移除、改变或重排页面上的项目。

要改变页面的某个东西，JavaScript 就需要对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。

在 1998 年，W3C 发布了第一级的 DOM 规范。这个规范允许访问和操作 HTML 页面中的每一个单独的元素。

所有的浏览器都执行了这个标准，因此，DOM 的兼容性问题也几乎难觅踪影了。

DOM 被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）：
Core DOM
定义了一套标准的针对任何结构化文档的对象
XML DOM
定义了一套标准的针对 XML 文档的对象
HTML DOM
定义了一套标准的针对 HTML 文档的对象。
您可以在我们的《W3C教程》阅读更多有关 W3C DOM 规范/级别的信息。参考技术A DOM全称是document object model(文档对象模型)，DOM是用来干什么的呢？假设把你的文档看成一个单独的对象，DOM就是如何用HTML或者XML对这个对象进行操作和控制的标准。参考技术B

文件对象模型（DocumentObjectModel，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。

基本介绍

DOM=DocumentObjectModel，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。最初人们把它认为是一种让JavaScript在浏览器间可移植的方法，不过DOM的应用已经远远超出这个范围。Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强。

DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。

通过JavaScript，您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。

要改变页面的某个东西，JavaScript就需要获得对HTML文档中所有元素进行访问的入口。这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。

DOM

DOM是W3C（万维网联盟）的标准。

DOM定义了访问HTML和XML文档的标准：

"W3C文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"

XML DOM

XMLDOM是：XMLDOM定义了所有XML元素的对象和属性，以及访问它们的方法（接口）。

换句话说：XMLDOM是用于获取、更改、添加或删除XML元素的标准。

HTML DOM

HTMLDOM是：HTMLDOM定义了所有HTML元素的和，以及访问它们的。

参考技术C 文档对象模型（Document
Object
Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。
脚本开发人员可以通过文档对象的属性、方法和事件来掌控、操纵和创建动态的网页元素。每一个网页元素（一个HTML标签）都对应着一个对象（object，所谓“对象”，用白话说就是“东西”。object这个词在台湾通常翻译成“物件”）。网页上的标签是一层层嵌套的，最外面的一层是<HTML>，文档对象模型也这样一层层嵌套着，但是通常被理解成一棵树的形状。树根是window或document对象，相当于最外层的标签的外围，也就是整个文档。树根之下（这棵树的图通常是倒着画，就好像遗传谱系或者家谱那样。树根就是唯一的共同祖先）是子一级的对象，子对象也有它自己的子对象，除了根对象以外，所有的对象都有自己的父对象，同一对象的子对象之间就是兄弟的关系。
在这种由“父子兄弟”组成的“单性繁殖家族图谱树”框架结构中，每个网页元素都可以被确切地定位。文档对象模型把整张网页组织成这样的一个树状的结构，树结构中的每一个元素都被视为一个节点（node）。包括JavaScript在内的各种编程语言都可以通过文档对象模型来访问和改变网页的各种细节。
万维网协会（World
Wide
Web
Consortium，W3C）已经给文档对象模型制定了一系列标准，并且正在制定更多的相关标准。当代的浏览器除支持其中的一部分标准之外，还支持某些早在W3C标准制定以前就流行了的历史既成的编程接口。也就是说现在浏览器使用的技术历史由来纷繁复杂，有些人们普遍使用的DOM技术并无标准可依。
我们将深入所有通用DOM的细节（包括IE浏览器中“与众不同”的某些技术），以全面掌握面向实践的技术。
DOM和JavaScript
我经常在QQ、MSN和email中被大家问到的“有关JavaScript”的问题，95%其实是DOM的问题。人们在习惯上不爱说DOM，要么就说JavaScript，要么就扯到“Ajax”（一度火爆的“概念”，最近刚刚有所降温，一如上世纪末的“DHTML”那样。对于这些热点词汇的产生，我个人感到非常欣慰，因为每一次都带来人们对JavaScript技术的热捧。下一个热点词汇是什么？也许我们可以炮制一个也说不定……Pseudo-Mashup，如何？）。
我们用JavaScript对网页进行的所有操作都是通过DOM进行的。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容，所以如果你下载一个JavaScript语言的参考帮助文档来查的话，就连妇孺皆知的document.write方法也找不到。
下面这段代码的作用是用一个提示框逐个显示网页中所有链接的网址，代码中被标为红色的部分就是DOM。
var
anchorTags
=
document.getElementsByTagName("a");
for
(var
i
=
0;
i
<
anchorTags.length
;
i++)

alert("Href
of
this
a
element
is
:
"
+
anchorTags[i].href
+
"\n");

这样一来哪些是核心JavaScript，哪些是DOM，各自起什么作用，就可以一目了然了。
var
anchorTags
=
创建了一个名为
anchorTags
的
JavaScript
变量。
document.getElementsByTagName("a")
Document接口是
DOM1核心（DOM1
Core）规范
中定义的第一个接口，而
document
是实现了Document接口的一个宿主对象。document掌控着网页里的所有东西。
DOM1核心
为Document
接口定义了
getElementsByTagName()
方法。这个方法返回一个节点列表（NodeList）
，也就是一种DOM特有的包含节点的数组，包含了所有符合匹配参数条件的标签，按照在文档中出现的顺序排列。于是anchorTags变量现在就成了一个节点列表。
;
分号是JavaScript里的语句结束符号。
for
(var
i
=
0;
i
<
这是编程语言里典型的“for循环”。声明了循环变量i，逐个处理anchorTags节点列表里的每一个节点。这也是JavaScript的东西。
anchorTags.length
DOM1
核心
定义了NodeList接口的
length
属性。这个属性返回一个整数，就是节点列表里包含的节点数目。说起来JavaScript
的数组也有一个
length属性。
;
i++)

典型的JavaScript变量增1运算。
alert(
alert()
是一个DOM方法，弹出一个提示框，显示传递给该方法的参数（字符串）。话说这个东西是通称
0级DOM（DOM
level
0）或DOM0的一些历史既成的编程接口当中的一员。DOM0
是一套“被某些浏览器所支持”的编程接口（事实上，市场上不存在不支持DOM0的浏览器，只有在某些软件爱好者的收藏品中才能见得到），不属于任何DOM标准规范。
"Href
of
this
a
element
is
:
"
+
一个字符串字面量和一个字符串链接符。JavaScript的东西。
anchorTags[i].href
href
是
DOM1
HTML
规范中定义的
HTMLAnchorElement
接口的属性，返回链接（<a>）元素的href属性的值。
在此我们用了像anchorTags[i]这样的用法，这和JavaScript里访问第i个数组项的语法是一样的。语言中性（language-neutral，与具体语言无关）的所谓“DOM方式”访问某个节点列表中的一个项目的办法是使用在NodeList接口中定义的item()
方法：anchorTags.item(1).href。但是大多数JavaScript实现程序都允许你使用这种简单的类似于数组的语法，而这也是大多数人实际在用的方式。
+
"\n");
又一个字符串连接。在字符串的末尾加入一个回车符。

“for循环”结束。
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/zjybushiren88888/archive/2009/08/19/4462448.aspx 参考技术D 文件对象模型（DocumentObjectModel，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。DocumentObjectModel的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，计有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

什么是 DOM？
DOM是W3C（万维网联盟）的标准。
DOM定义了访问HTML和XML文档的标准：
"W3C文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"
W3CDOM标准被分为3个不同的部分：
编者注：DOM是DocumentObjectModel（文档对象模型）的缩写。

Angular中访问DOM元素的“链接”函数的等价物是啥

【中文标题】Angular中访问DOM元素的“链接”函数的等价物是啥【英文标题】：What is the equivalent of `link` function in Angular to access DOM elementsAngular中访问DOM元素的“链接”函数的等价物是什么 【发布时间】：2018-02-25 04:00:58 【问题描述】：

有一些示例在 Angular 2 指令上设置 link 属性以注册转换 DOM 的回调。

一个例子是为 D3.js 图创建指令。看到这个pen：

link 属性：

想要修改 DOM 的指令通常使用链接选项来注册 DOM 侦听器以及更新 DOM。它在模板被克隆后执行，是放置指令逻辑的地方。

Angular 4 指令的 API 非常不同。 Angular 4 中的类似功能是如何实现的？

【问题讨论】：

为什么需要它？我试图了解将 D3/Vega-lite 合并到项目中的最佳方式。我非常了解 D3，它看起来可能很复杂，因为 Angular/D3 在操纵 DOM 和管理状态方面都非常强大——但方式却截然不同。我是 Angular 的新手，我见过的所有 D3/Angular 示例都使用 AngularJS 指令。最终，我对开发模块化数据可视化感兴趣，其他开发人员可以使用它来呈现不同的数据。 【参考方案1】：

在 AngularJS 中有两个阶段：编译和链接。 AngularJS 允许您在编译阶段挂钩到这些阶段并执行自定义 DOM 修改，并在链接阶段执行应用模型（范围）和 DOM 元素之间的绑定。这就是指令定义对象 (DDO) 具有以下键的原因：

app.directive('name', function() 
   return 
      compile: () => 
      link: () =>

Angular 在这方面是不同的。编译和链接现在由编译器作为一个阶段执行，您没有办法挂钩该过程。您可以在以下文章中了解更多信息：

Exploring Angular DOM manipulation techniques using ViewContainerRef Angular’s $digest is reborn in the newer version of Angular Here is what you need to know about dynamic components in Angular

Angular 提供了两种访问 DOM 的机制，而不是链接函数：

查询 (@ViewChildren) - 主要由组件使用 DOM 元素注入构造函数 - 主要由指令使用

您可以阅读有关查询here 的更多信息。这是将 DOM 元素注入指令的示例：

@Directive()
export class MyDirective 
   constructor(el: ElementRef)

【讨论】：

@conner.xyz，谢谢）您可能还想查看这篇文章Never again be confused when implementing ControlValueAccessor in Angular forms。它展示了如何将小部件包装到 Angular 组件中。有关此类更深入的内容，请关注我和angular-in-depth 发布:)。祝你好运

以上是关于DOM是啥？的主要内容，如果未能解决你的问题，请参考以下文章