1.背景介绍

DOM是Document Object Model（文档对象模型 ）的缩写。

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强。

2.知识剖析

什么是DOM节点？

HTML文档中的所有内容都是节点;

整个文档是一个文档节点;

每个HTML元素是元素节点;

HTML元素内的文本是文本节点;

HTML元素内的文本是文本节点;

注释是注释节点.

查找结点

以id的方式查找：document.getElementById

以class名称方式查找：document.getElementsByClassName

以标签名称的方式查找：document.getElementsByTagName

新建节点

document.createElement('元素名');新建一个元素节点

document.createAttribute('属性名');新建一个属性节点

document.createTextNode('文本内容');新建一项文本节点

添加新节点

element.setAttribute(attributeName, attributeValue );给元素增加指定属性，并设定属性值

element.setAttributeNode(attributeName );给元素增加属性节点

删除节点

parentNode.removeChild(existingChild );删除已有的子节点，返回值为删除节点

DOM需要清楚你需要删除的元素，以及它的父元素。找到希望删除的子元素，然后使用其parentNode属性来找到父元素：

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

修改节点

parentNode.replaceChild(newChild, existingChild );用新节点替换父节点中已有的子节点

7.参考文献

常见dom树操作

js中的DOM操作汇总 - 很好玩 - 博客园

Javascript的DOM操作 - 你真的了解吗? - CSDN博客

w3school在线教程/菜鸟教程

8.更多讨论

JavaScript和HTML DOM的区别与联系？

区别： 1、javascript JavaScript 是流行的浏览器脚本语言。容易使用 JavaScript 被网页用来改进设计、验证表单、检测浏览器、创建cookies等应用。 2、HTML DOM HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。 HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。 通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。 HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。

联系： 1、通过 JavaScript，可以重构整个 HTML 文档。可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。 2、Javascript主要是利用HTML DOM去获得、改变、创建HTML元素，从而达到美化页面、操作页面元素的目标。因此，在Javascript中最常见的就是各种各样的HTML DOM元素以及它们各自的属性。除了这些DOM元素外，Javascript有自己的对象，例如数组。 3、可以认为Javascript主要是操纵HTML DOM。两者是不一样的。 Javascript是语言，DOM是可以在各种语言中（不仅js，php也有的）动态修改文档的模型。

DOM有什么优点和缺点？

DOM的优势主要表现在：易用性强，使用DOM时，将把所有的XML文档信息都存于内存中，并且遍历简单，支持XPath，增强了易用性。

DOM的缺点主要表现在：效率低，解析速度慢，内存占用量过高，对于大文件来说几乎不可能使用。另外效率低还表现在大量的消耗时间，因为使用DOM进行解析时，将为文档的每个element、attribute、processing-instrUCtion和comment都创建一个对象，这样在DOM机制中所运用的大量对象的创建和销毁无疑会影响其效率。

核心DOM和html DOM的区别是什么？

核心DOM适合操作节点，如创建，删除，查找等,HTML DOM适合操作属性，如读取或修改属性的值