Dom 概览

时间：2023-03-08 18:01:53

前言

我们已经接触并使用了很多api去操作html文档,例如：appendChild,getElementById, 等等。但是，每当我在浏览器输入document,window 按下回车，会发现还有好多api不会使用。感觉自己在一个海洋里，找不到边界,有点茫然失措。

试想其原因，可能是，我一接触js编程时。就会被教着使用getElementById获取一个元素，使用removeChild删除一个元素等等。没有时间去思考事情的宏观，全貌。会完全沉浸在使用这些api的业务逻辑当中。那么解决这个问题，应该从宏观出发，搞清楚我们正在使用的这些api到底是谁，属于谁。

事情原本很简单，我们在面对任何一个新的事物的时候，都会自然的去想，这个东西是干什么的。 你只有知道这个是干什么的，有个整体的映象，在接下来使用的过程中才不会盲人摸象。 

上帝说要有光，那么就有了光。 这其实是个很难的问题，上帝为什么知道应该有光，这需要大智慧的。 所以任何规范的制定者都应该受到尊重。 在软件行业里，我们的需求文档就是一个规范。它是来解决应该有什么的问题， 比起实现来，她重要的多的多。DOM就是一个规范

DOM

下定义

Document Object Model 是 HTML,XML.SVG 文档的编程接口规范。它把文档呈现成结构化的树结构。DOM 定义了操作树的方法，以便这些方法能改变树的结构，样式和内容。它把以上的文档类型描述成结构化的节点（Node）和对象(Object),这些节点和对象拥有多样的属性和方法。节点（Nodes）也具备事件处理能力。一旦事件触发，他们对应的节点处理程序将会被执行。实际上，DOM 联系着web 页面和scripts 或者其他的编程语言。

尽管DOM 常常被javascript操作，但并不是JavaScript的一部分，DOM也可以被其他任何编程操作

一个XML文档及其所对应的DOM树，如下：

<?xml version="1.0" encoding="utf-8"?>

<bookstore>

    <book category="children">

          <title lang="en">Harry Potter</title>

          <author>J K. Rowling</author>

          <year></year>

          <price>29.99</price>

    </book>

    <book category="cooking">

          <title lang="en">Everyday Italian</title>

          <author>Giada De Laurentiis</author>

          <year></year>

          <price>30.00</price>

    </book>

    <book category="web">

          <title lang="en">Learning XML</title>

          <author>Erik T. Ray</author>

          <year></year>

          <price>39.95</price>

    </book>

    <book category="web">

          <title lang="en">XQuery Kick Start</title>

          <author>James McGovern</author>

          <author>Per Bothner</author>

          <author>Kurt Cagle</author>

          <author>James Linn</author>

         <author>Vaidyanathan Nagarajan</author>

          <year></year>

          <price>49.99</price>

    </book>

</bookstore>

DOM分类

按照操作对象的不同，可分为Core DOM、XML DOM 和 HTML DOM。

Core Dom：核心Dom，针对任何结构化文档的标准模型。

XML DOM：用于XML文档的标准模型，对XML元素进行操作。

HTML DOM： 用于HTML文档的标准模型，对HTML元素进行操作。

DOM历史版本

W3C标准化组织定义了一系列DOM接口，随着时间的发展，目前包括DOM Level   。每一个新版本是对以前版本的补充和新功能加入。

DOM level ：

. core：一组底层的接口，其接口可以表示任何结构化的文档，同时也允许对齐进行扩展，典型的例子是支持xml Dom

. html：一组基于Core 定义的接口的上层接口。主要是为了方便HTML 文档的访问。

DOM level ：

. core: 对DOM level 1中core 部分进行扩展，其中著名的就是getElementById ,还有很多跟命名空间（namespace）的接口

. views:允许动态访问和修改文档内容的表示，主要是两个接口AbstractView 和 DocumentView

. Events:主要有EventTarget，MouseEvents接口，但不支持keyboard

. Style(Css):加入可以修改样式属性的接口

. Traversal and range: NodeIterator 和 TreeWalker

. 允许动态访问，修改HTML文档

Dom level :

. core ：加入了新的adoptNode() 和textContent支持

. Load And Save: 动态加载和序列化DOM表示

. validation：根据scheme 验证文档的有效性

. Events:keyboard的支持，

. XPath: 是用XPath1.0来访问DOM树，XPath是一种简单直观的检索DOM树节点的方式

Html Dom

我们日常工作的时候，都跟 HTML 文档打交道，其实就是属于 W3C 所规定的 DOM Level  HTML 模块内的范畴。HTML DOM 的特性和方法不是标准的 DOM 实现，而是是专门针对 HTML 而设的，同时也考虑到使得 DOM 操作变的更为简便。HTML 模块集中表现在 HTMLElement 接口上，即为全体元素类型的对象所实现的接口。就该文讨论的范围而言，HTMLElement 接口的参与形式与上述的 Node 节点接口非常地相似。一旦引入了 OO 设计观，只要实现了 HTMLElement 接口的对象，就可以定义它为元素了。一份 HTML 文档有相当多的都是元素，当然还有，表示文档本身的 HTMLDocument 和集合容器 HTMLCollection 等等。

因此，要准确理解 DOM  HTML 的模块，必须认识其接口是基于元素的（Element-based），而不是基于节点的（Node-based）。那样的话，元素方式与节点方式到底又有什么区别呢（Element v.s Node），应该如何界定两者呢？例如节点属性（properties of elements），当在“基于元素”的语境中，就是“属性（attributes）”，并非独立的节点对象。——尽管按照某个角度讲，元素是节点的一种特例，我们仍可保留“节点”这一说法，一个标签（tag）便是一个 “节点”。假如我们要得到 id 属性的字符串的值是什么，采用DOM  Core 的方式就是，

Core or HTML Module？

既然这样，那我应该使用 Core 的 API，还是 HTML 模块的 API？对于 HTML 的文档来说，用 Core 或 HTML Module 实际差别不大。本来我们一直都不太强调这种界定，以致忽略了它们细微的差异。如果我们觉得还是模棱两可的话，我们可进一步查探它们的明细。个人认为处理 XHTML 并使用 Core API 这样更能够说明 XHTML 中的 “X”，即表明这份 HTML 就是一份标准的 XML 文档，以便与原有 HTML 4.1 从语义上区别开来。但请记住，当处理一份 XML 结构的文档的时候，自然而然就是采用 Core 去处理。通过XHMLHttpRequest 请求执行后所返回的 responseXML 结果对象，那只能使用 Core 的 API 去处理分析，就不能够采用 HTML 的了。

W3C 与 WhatWg

他们两个吵架，然后Whatwg赢了。html5诞生了。但是w3c的卓越贡献将永存。

whatwg 的Dom 官网 https://dom.spec.whatwg.org/

搞清楚以上的内容，从头梳理下dom的api。查缺补漏。 资料：https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

dom core level3  文档 http://www.w3school.com.cn/xmldom/index.asp

相关文章