dom0 dom2_深度HTML DOM

最新推荐文章于 2022-03-29 12:50:23 发布

weixin_26738395

最新推荐文章于 2022-03-29 12:50:23 发布

阅读量203

点赞数

原文链接：https://medium.com/the-ui-girl/html-dom-in-depth-ae24965d1920

版权

dom0 dom2

HTML IN-DEPTH-1 (HTML IN-DEPTH-1)

Are you a person who just started with HTML/CSS or someone who wants to have an in-depth knowledge of the advanced features of HTML? Then you are in the right place. So grab a cup of coffee and enjoy the third part of our HTML series, HTML DOM in Depth. Do not forget to cross-check the “Additional Point” section to get some interesting fact.

重新你们谁刚开始使用HTML / CSS或别人谁愿意有HTML的高级功能的深入了解一个人？那么您来对地方了。因此，喝杯咖啡，享受我们HTML系列文章的第三部分，即“深度HTML DOM”。不要忘记交叉检查“附加点”部分，以获取一些有趣的事实。

“The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

“ W3C文档对象模型(DOM)是一种平台和语言无关的界面，它允许程序和脚本动态访问和更新文档的内容，结构和样式。”

Confused? Let me make that simple. Imagine that, every web page is a document and every element( be it text or image or table) inside that webpage is stored in that document as an object in a tree format, which can be manipulated later with a scripting language such as JavaScript.

困惑？让我简单点。想象一下，每个网页都是一个文档，并且该网页中的每个元素(无论是文本，图像还是表格)都以树格式存储在该文档中作为对象，以后可以使用诸如JavaScript之类的脚本语言进行操作。

Now, when a web page is loaded, the browser creates such a document every time which is called, Document Object Model (DOM) of the page.

现在，当加载网页时，浏览器每次都会创建一个称为页面的文档对象模型(DOM)的文档。

The DOM represents the document as nodes and objects so that programs can change the document structure, style, and content. In that hat way, programming languages connect to the webpage.

DOM将文档表示为节点和对象，以便程序可以更改文档的结构，样式和内容。通过这种方式，编程语言可以连接到网页。

为什么DOM很重要？ (Why DOM is important?)

JavaScript fan? Then definitely read it out.

JavaScript迷？然后一定要读出来。

The DOM is not a programming language, but without it, the JavaScript language wouldn’t be able to acess any of the web pages elements in HTML documents, XML documents or their component parts .

DOM不是一种编程语言，但是如果没有它，JavaScript语言将无法访问HTML文档，XML文档或其组成部分中的任何网页元素。

As per the W3C specification, one important objective for the Document Object Model is to provide a standard programming interface that can be used in a wide variety of environments and applications.

根据W3C规范，文档对象模型的一个重要目标是提供一种可用于各种环境和应用程序的标准编程接口。

With DOM, JavaScript gets all the power it needs to create dynamic HTML such as changing the HTML elements, attributes, CSS styles, elements and events in the page. We can say that:

使用DOM，JavaScript可以获得创建动态HTML所需的全部功能，例如更改页面中HTML元素，属性，CSS样式，元素和事件。我们可以这样说：

API = DOM + JavaScript

API = DOM + JavaScript

DOM类型： (Types of DOM:)

The W3C DOM standard is separated into 3 different parts:

W3C DOM标准分为三个不同的部分：

Core DOM — standard model for all document types(All DOM implementations must support the interfaces listed as “fundamental” in the Core specification.)
核心DOM-所有文档类型的标准模型( 所有DOM实现都必须支持在核心规范中列为“基本”的接口。)
XML DOM — standard model for XML documents (As the name suggests, all XML elements can be accessed through the XML DOM.)
XML DOM-XML文档的标准模型(顾名思义，所有XML元素都可以通过XML DOM访问。)
HTML DOM — standard model for HTML documents (The HTML DOM is a standard for how to get, change, add, or delete HTML elements.)
HTML DOM-HTML文档的标准模型( HTML DOM是有关如何获取，更改，添加或删除HTML元素的标准。)

In this article, we will mostly deal with Core and HTML DOM so if you want to know more about XML Dom, refer this.

在本文中，我们将主要处理Core和HTML DOM，因此，如果您想了解有关XML Dom的更多信息，请参考this 。

文件 (THE Document)

The Document the interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree. The DOM includes elements such as <body> and <table> etc. as nodes. It provides various functionality globally to the document, for example how to obtain the page's URL or create new elements in the document.

“ Document ”界面表示在浏览器中加载的任何网页，并用作网页内容(即DOM树)的入口点。 DOM包括<body>和<table>等元素作为节点。它为文档全局提供了各种功能，例如，如何获取页面的URL或在文档中创建新元素。

HTML documents served with the "text/html" content-type, also implement the HTMLDocument interface, whereas XML and SVG documents implement the XMLDocument interface.

带有"text/html"内容类型HTML文档也实现HTMLDocument接口，而XML和SVG文档实现XMLDocument接口。

know more about the Document interface here

在此处了解有关Document界面的更多信息

窗口(BOM) (The Window (BOM))

Before getting into the window object, let’s talk briefly about another concept, BOM. The Browser Object Model (BOM) allows JavaScript to “talk to” the browser. Even though there are no official standards for the Browser Object Model (BOM), modern browsers have implemented (almost) the same methods and properties for JavaScript interactivity.

在进入window对象之前，让我们简要谈谈另一个概念BOM。浏览器对象模型(BOM)允许JavaScript与浏览器“对话”。即使没有针对浏览器对象模型(BOM)的官方标准，现代浏览器也已经(几乎)实现了与JavaScript交互性相同的方法和属性。

Now, the window object basically represents the browser window. All global JavaScript objects, functions, and variables automatically become members of the window object. Even the document object (of the HTML DOM) is a property of the window object:

现在， window对象基本上代表了浏览器窗口。所有全局JavaScript对象，函数和变量都会自动成为window对象的成员。甚至(HTML DOM的)文档对象也是window对象的属性：

window.document.getElementById(“header”);

Obviously there are even more stuff you can do with the window object which you will be able to find here

显然，您可以在window对象上做更多的事情，您可以在这里找到

物体 (The Object)

All of the properties, methods, and events available for manipulating and creating web pages are organized into objects inside dom (for example, the document is itself an object that represents the document itself, the table an object that implements the special HTMLTableElement DOM interface for accessing HTML tables, and so forth).

可用于操纵和创建网页的所有属性，方法和事件都组织为dom内部的对象(例如， document本身是代表文档本身的对象， table本身是实现特殊HTMLTableElement DOM接口的对象访问HTML表等)。

The modern DOM is built using multiple APIs that work together. The core DOM defines the objects that fundamentally describe a document and the objects within it. This is enhanced and expanded upon need. For example, the HTML DOM API adds support for representing HTML documents to the core DOM.

现代DOM是使用多个可协同工作的API构建的。核心DOM定义了从根本上描述文档的对象以及其中的对象。可以根据需要进行增强和扩展。例如， HTML DOM API向核心DOM添加了对表示HTML文档的支持。

介面 (The Interface)

Many objects borrow from several different interfaces.

许多对象是从几个不同的接口借用的。

The HTMLTableElement interface provides special properties and methods (beyond the regular HTMLElement object interface it also has available to it by inheritance) for manipulating the layout and presentation of tables in an HTML document.

HTMLTableElement接口提供了特殊的属性和方法(除了常规的HTMLElement对象接口以外，它还可以通过继承来使用)，用于处理HTML文档中表格的布局和表示。

The table object, for example, implements a specialized HTMLTableElement interface, which includes such methods as createCaption and insertRow. But since it's also an HTML element, table implements the Element interface described in the DOM Element Reference chapter. And finally, since an HTML element is also, as far as the DOM is concerned, a node in the tree of nodes that make up the object model for an HTML or XML page, the table object also implements the more basic Node interface, from which Element derives.

例如，表对象实现了专用的HTMLTableElement接口，其中包括诸如createCaption和insertRow类的方法。但由于它也是一个HTML元素，因此table实现了DOM Element参考一章中描述的Element接口。最后，由于就DOM而言，HTML元素也是构成HTML或XML页面的对象模型的节点树中的一个节点，因此表对象还实现了更基本的Node接口，从Element派生的。

When you get a reference to a table object, as in the following example, you routinely use all three of these interfaces interchangeably on the object, perhaps without knowing it.

当获得对table对象的引用时(如以下示例所示)，您可能会在对象上常规地互换使用这三个接口，这可能是不知道的。

常用接口：(src： https : //developer.mozilla.org/ ) (Commonly used interfaces: (src: https://developer.mozilla.org/))

document.getElementById(id)
document.getElementById (id)
document.getElementsByTagName(name)
document. getElementsByTagName (name)
document.createElement(name)
document.createElement (name)
parentNode.appendChild(node)
parentNode. appendChild (node)
element.innerHTML
element. innerHTML
element.style.left
element. style .left
element.setAttribute()
element. setAttribute ()
element.getAttribute()
element. getAttribute ()
element.addEventListener()
element. addEventListener ()
window.content
window.content
window.onload
window.onload
window.scrollTo()
window.scrollTo ()

从DOM访问数据 (Accessing data from DOM)

JavaScript uses the DOM to access the document and its elements in the webpage using the API for the document or window .

JavaScript 使用 DOM通过document或window的API来访问文档及其在网页中的元素。

For example, the standard DOM specifies that the getElementsByTagName the method in the code below must return a list of all the <p> elements in the document:

例如，标准DOM指定以下代码中的getElementsByTagName方法必须返回文档中所有<p>元素的列表：

const paragraphs = document.getElementsByTagName("p");
// paragraphs[0] is the first <p> element

Similarly, we can also access HTML elements by:

同样，我们也可以通过以下方式访问HTML元素：

id : var x = document.getElementById(“intro”); (Only one element gets returned with this method)
id： var x = document.getElementById(“intro”); (此方法仅返回一个元素)
class name: var x = document.getElementsByClassName(“intro”);
类名： var x = document.getElementsByClassName(“intro”);
CSS selectors: var x = document.querySelectorAll(“p.intro”);
CSS选择器： var x = document.querySelectorAll(“p.intro”);
HTML elements by HTML object collections:
HTML对象集合中HTML元素：

document.anchors.length;
document.forms.length;
document.images.length;
document.links.length;
document.scripts.length;

Though we focus exclusively on JavaScript in this reference documentation, implementations of the DOM can be built for any language, as this Python example demonstrates:

尽管在此参考文档中我们仅专注于JavaScript，但是DOM的实现可以针对任何语言构建，如下面的Python示例所示：

# Python DOM example
#src: https://developer.mozilla.org/import xml.dom.minidom as m
doc = m.parse(r"C:\Projects\Py\chap1.xml")
doc.nodeName # DOM property of document object
p_list = doc.getElementsByTagName("para")

DOM数据类型 (DOM Datatypes)

As DOM is a huge object, there are a number of different data types being passed around the API to use DOM, that you should be aware of.

由于DOM是一个巨大的对象，因此您应该注意，有许多不同的数据类型在API周围传递以使用DOM。

Document: represents any web page loaded in the browser and serves as an entry point into the web page’s content
文档：表示浏览器中加载的任何网页，并用作网页内容的入口点
Node: Basically every object located within a document is a node of some kind.
节点： 基本上，文档中的每个对象都是某种类型的节点。
Element: It refers to an element or a node of type element which is basically an object in the DOM API
元素：它是指元素或类型为element的节点，基本上是DOM API中的对象
NodeList: A nodeList is an array of elements
NodeList： nodeList是元素数组
Attribute: Attributes are nodes in the DOM just like elements are, though an HTML attribute always belongs to an HTML element in the DOM.
属性：属性是DOM中的节点，就像元素一样，尽管HTML属性始终属于DOM中HTML元素。

Know more of the DOM properties and methods here.

在此处了解更多DOM属性和方法。

什么不是文档对象模型 (What the Document Object Model is not)

This section is designed to give a more precise understanding of the Document Object Model by distinguishing it from other systems that may seem to be like it.

本节旨在通过将文档对象模型与可能看起来像它的其他系统区分开来，从而更准确地理解文档对象模型。

The Document Object Model does not define any binary source code in its interfaces.
文档对象模型在其接口中未定义任何二进制源代码。
The Document Object Model is not a way of describing the objects of XML or HTML. Instead, it specifies how XML and HTML documents are represented as objects, so that they may be used in object-oriented programs.
文档对象模型不是描述XML或HTML对象的方法。而是指定如何将XML和HTML文档表示为对象，以便可以在面向对象的程序中使用它们。
The Document Object Model is not a set of data structures, it is an object model that uses various interfaces to access the objects.
文档对象模型不是一组数据结构，它是一个使用各种接口访问对象的对象模型。
The Document Object Model does not define “the true inner semantics” of XML or HTML. It doesn't understand which object in the document is appropriate to the context or vice versa
文档对象模型未定义XML或HTML的“真正的内部语义”。它不了解文档中的哪个对象适合于上下文，反之亦然
The Document Object Model, despite its name, is not a competitor to the Component Object Model (COM). COM, like CORBA, is a language-independent way to specify interfaces and objects.
尽管文档对象模型具有名称，但它不是组件对象模型(COM)的竞争对手。像CORBA一样，COM是一种独立于语言的方式来指定接口和对象。

与DOM元素的互动 (Interaction with DOM element)

注意事项 (Additional Points to Note)

In the Document Object Model, documents have a logical structure which is very much like a tree; or to be precise like a “forest” which can contain more than one tree. However, the DOM does not specify that documents need to be implemented as a tree, nor does it specify how the relationships among objects should be implemented in any way. In other words, the object model specifies the logical model for the programming interface, and this logical model may be implemented in any way that a particular implementation finds convenient.
在文档对象模型中，文档具有非常像一棵树的逻辑结构。或确切地说，就像一个“森林”，其中可以包含一棵以上的树。但是，DOM没有指定需要将文档实现为树，也没有指定如何以任何方式实现对象之间的关系。换句话说，对象模型为编程接口指定了逻辑模型，并且该逻辑模型可以以特定实现觉得方便的任何方式实现。
One important property of DOM structure models is structural isomorphism: if any two DOM implementations are used to create a representation of the same documents, they will create the same structure model, with precisely the same objects and relationships.
DOM结构模型的一个重要属性是结构同构 ：如果使用任何两个DOM实现来创建相同文档的表示形式，它们将创建具有完全相同的对象和关系的相同结构模型。
The name “Document Object Model” was chosen because it is an “object model” is used in the traditional object-oriented design sense: documents are modelled using objects. In other words, the nodes in the DOM diagram do not represent a data structure, they represent objects, which have functions and identity.
之所以选择名称“ Document Object Model”，是因为它是传统的面向对象设计意义上的“对象模型”：使用对象对文档进行建模。换句话说，DOM图中的节点不代表数据结构，它们代表具有功能和标识的对象。
If the browser encounters malformed HTML, it automatically corrects it when making the DOM. As an example, if the HTML file is the single word "Hello", the browser will wrap it into <html> and <body>in the DOM and add the required <head> . Similarly, Tables always have <tbody>
如果浏览器遇到格式错误HTML，则在制作DOM时会自动更正它。例如，如果HTML文件是单个单词"Hello" ，则浏览器会将其包装到DOM中的<html>和<body>中，并添加所需的<head> 。同样，表始终具有<tbody>
Browser tools (to be covered soon) that work with DOM usually do not show spaces at the start/end of the text and empty text nodes (line-breaks) between tags
与DOM一起使用的浏览器工具(即将介绍)通常不会在文本的开头/结尾显示空格，而在标记之间显示空白的文本节点(换行符)
If something’s in HTML, then it also must be in the DOM tree and that includes comment.
如果某些内容是HTML，则它也必须在DOM树中，并且必须包含注释。
Levels of DOM:
DOM级别：