Dom 概览

前言

我们已经接触并使用了很多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>2005</year> 
          <price>29.99</price> 
    </book>

    <book category="cooking">
          <title lang="en">Everyday Italian</title> 
          <author>Giada De Laurentiis</author> 
          <year>2005</year> 
          <price>30.00</price> 
    </book>

    <book category="web">
          <title lang="en">Learning XML</title> 
          <author>Erik T. Ray</author> 
          <year>2003</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>2003</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 1 2 3。每一个新版本是对以前版本的补充和新功能加入。

DOM level 1：
1. core：一组底层的接口，其接口可以表示任何结构化的文档，同时也允许对齐进行扩展，典型的例子是支持xml Dom
2. html：一组基于Core 定义的接口的上层接口。主要是为了方便HTML 文档的访问。
DOM level 2：
1. core: 对DOM level 1中core 部分进行扩展，其中著名的就是getElementById ,还有很多跟命名空间（namespace）的接口
2. views:允许动态访问和修改文档内容的表示，主要是两个接口AbstractView 和 DocumentView
3. Events:主要有EventTarget，MouseEvents接口，但不支持keyboard
4. Style(Css):加入可以修改样式属性的接口
5. Traversal and range: NodeIterator 和 TreeWalker
6. 允许动态访问，修改HTML文档

Dom level 3:
1. core ：加入了新的adoptNode() 和textContent支持
2. Load And Save: 动态加载和序列化DOM表示
3. validation：根据scheme 验证文档的有效性
4. Events:keyboard的支持，
5. XPath: 是用XPath1.0来访问DOM树，XPath是一种简单直观的检索DOM树节点的方式

 Html Dom 

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

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

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/btgyoyo/p/6259481.html