发布时间：2023-11-07 03:26来源：www.sf1369.com作者：宇宇
前言
DOM（Document Object Model）即文档对象模型，针对 HTML 和 XML 文档的 API（应用程序接口）。DOM 描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。DOM 脱胎于 Netscape 及微软公司创始的 DHTML（动态 HTML），但现在它已经成为表现和操作页面标记的真正跨平台、语言高袭燃中立的方式。
阅读目录
基本概念
节点创建型api
页面修改型API
节点查询型API
节禅州点关系型api
元素属性型api
元素样式型api
总结
文本整理了javascript操作DOM的一些常用的api，根据其作用整理成为创建，修改，查询等多种类型的api，主要用于复习基础知识，加深对原生js的认识。
基本概念
在讲解操作DOM的api之前，首先我们来复习一下一些基本概念，这些概念是掌握api的关键，必须理解它们。
Node类型
DOM1级定义了一个Node接口，该接口由DOM中所有节点类型实现。这个Node接口在JS中是作为Node类型实现的。在IE9以下版本无法访问到这个类型，JS中所有节点都继承自Node类型，都共享着相同的基本属性和方法。
Node有一个属性nodeType表示Node的类型，它是一个整数，其数值分别表示相应的Node类型，具体如下：
Node.ELEMENT_NODE:1
Node.ATTRIBUTE_NODE:2
Node.TEXT_NODE:3
Node.CDATA_SECTION_NODE:4
Node.ENTITY_REFERENCE_NODE:5
Node.ENTITY_NODE:6
Node.PROCESSING_INSTRUCTION_NODE:7
Node.COMMENT_NODE:8
Node.DOCUMENT_NODE:9
Node.DOCUMENT_TYPE_NODE:10
Node.DOCUMENT_FRAGMENT_NODE:11
Node.NOTATION_NODE:12
假设我们要判断一个Node是不是元素，我们可以这样判断戚虚
if(someNode.nodeType == ){ console.log(Node is a element); }
这些Node类型中，我们最常用的就是element，text，attribute，comment，document，document_fragment这几种类型。
我们简单来介绍一下这几种类型：
Element类型
Element提供了对元素标签名，子节点和特性的访问，我们常用HTML元素比如div，span，a等标签就是element中的一种。Element有下面几条特性：
（1）nodeType为1
（2）nodeName为元素标签名，tagName也是返回标签名
（3）nodeValue为null
（4）parentNode可能是Document或Element
（5）子节点可能是Element，Text，Comment，Processing_Instruction，CDATASection或EntityReference
HTML DOM 定义了访空模问和操作HTML文档的斗悔缓标准方法。
HTML DOM 把 HTML 文档呈现为带有元素、属性前游和文本的树结构（节点树）。
可以去看看 DOM就是动态控制HTML的节点
例如：
<html>
<body>
<a name=first>第一个锚</a><br />虚团
<a name=second>第二个锚</a><br />
<a name=third>第三个锚</a><br />
<br />
本文档中第一个锚的 InnerHTML 是：
<script type=text/javascript>
document.write(document.anchors[0].innerHTML)
</script>
</body>
</html>
结果：
第一个锚
第二个锚
第三个锚
本文档中第孙告一个锚的 InnerHTML 是： 第一个锚
这里用document.anchors[0].innerHTML来获得第一个<a>里面的差凯橘内容
dom = Document Oject Model
DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范（），DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscape的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开派烂发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。
DOM是以层次结构组织的节点或信息片断的集合。这个层次结构允许开发人员在树中导航寻找特定信息。分析该结构通常需要加载整个文档和构造层次结构，然后才能做任何工作。由于它是基于信息层次的，因而 DOM 被认为是基于树或基于对象的。
对于特别大的文档，解析和加载整个文档可能很慢且很耗资源，因此使用其他手段来处理这样的数据会更好。这些基于事件的模型，比如 Simple API for XML（SAX），适用于处理数据流，即随着数据的流动而依次处理数据。基于事件的 API 消除了在内存中构造树的需要，但是却不允许开发人员实际更改原始文档中的数据。
SAX等模型会从头至尾的顺序解析整个XML文档，当遇到一个节点的开始或或者结束时，会产生一个时间，程序员可以注册事件处理函数以对各个节点进行处理。
另一方面，DOM 还提供了一个 API，允许开发人员添加、编辑、移动或删除树中任意位置的节点，从而创建一个引用程序。这个模型就是基于树型数据结构的，他在使用之前必须加载整个文档或者至少是结构良好的文档片段
解析器是一个软件应用程序，设计用于分析文档（这里是指 XML 文件），以及做一些特定于该信息的事情。在诸如 SAX 这样基于事件的 API 中，解析器将向某种监听器发送事件。在诸如 DOM 这样基于树的 API 中，解析器将在内存中构造一颗数据树。
作为 API 的 DOM
从 DOM Level 1 开始，DOM API 包含了一些接口，用于表示可从 XML 文档中找到的所有不同运李类型的信息。它还包含使用这些对象所必需的方法和属性。
Level 1 包括对 XML 1.0 和 HTML 的支持，每个 HTML 元素被表示为一个接口。它包括用于添加、编辑、移动和读取节点中包含的信息的方法，等等。然而，它没有包括对 XML 名称空间（XML Namespace）的支持，XML 名称空间提供分割文档中的信息的能力。
DOM Level 2 添加了名称空间支持。Level 2 扩展了 Level 1，允许开发人员检测和使用可能适用于某个节点的名称空间信息。Level 2 还增加了几个新的模块，以支持级联样式表、事件和增强的树操作。
当前正处于定稿阶段的 DOM Level 3 包括对创建 Document 对象（以前的版本将这个任务留给实现，使得创建通用应用程序很困难）的更好支持、增强的名称空间支持，以及用来处理文档加载和保存、验证以及 XPath 的新模块；XPath 是在 XSL 转换（XSL Transformation）以及其他 XML 技术中用来选择节点的手段。
DOM 的模块化意味着作为开发人员，您必须知道自己希望使用的特性是否受正在使用的 DOM 实现所支持。
确定特性可用性
DOM 推荐标准的模块性质允许实现者挑选将要包括到尘悄漏产品中的部分，因而在使用某个特定的特性之前，首先确定该特性是否可用可能是必要的。本教程仅使用 DOM Level 2 Core API，不过在着手您自己的项目时，了解如何能够检测特性是有所帮助的。
DOM 中定义的接口之一就是 DOMImplementation。通过使用 hasFeature() 方法，您可以确定某个特定的特性是否受支持。DOM Level 2 中不存在创建DOMImplementation 的标准方法，不过下面的代码将展示如何使用 hasFeature() 来确定 DOM Level 2 样式表模块在某个 Java 应用程序中是否受支持。
Document Object Model(文档物件模型启乎),是一种文悄银悉档平台,它允许程序或脚本动态的存储和上传文件的内容,结构或样式搏首.利用为SVG定义的DOM,通过脚本语句可以很方便的做出SVG动画.