理解DOM

DOM是文档对象模型，DOM是一种XML文档的解析标准，DOM提供相应的API（函数库，提供编程的工具）可以对节点树进行增、删、改、查，DOM的原理是将XML、XHTML文档装入内容，并以节点的形式解析为一颗节点树（节点是元素标记），利用DOM可以让JavaScript对网页中的元素进行控制，实现动态网页的功能。

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

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

 

  节点的属性和方法：nodeName： 节点的名字。 /nodeValue：节点的值。/nodeTYpe:节点的类型常量值。/firstChild:指向childNodes列表中的第一个节点。/lastChild:指向在childNodes列表中的最后一个节点。/childNodes：所有子节点的列表。/previousSibling:指向前一个兄弟节点。/nextSibling：指向后一个兄弟节点。/hasChildNodes:当childNodes包含一个或多个节点时返回真。/attributes：仅用于Element节点。/appendChild（node）将node添加带childNodes的末尾。/removeChild（Node）从childNodes中删除node。/replaceChild（newnode，oldnode）将childNodes中的oldnode替换成newnode。/insertBefore（newnode，refnode）在childNodes中的refnode之前插入newnode。

 

 

了解DOM需要清楚几个问题：

1. 什么是DOM？
2. DOM可以用来干什么？
3. DOM是怎么来的？
4. 怎么使用DOM？

---

1. 什么是DOM? 
   DOM(document Object Model）,是针对HTML和XML的API。 可以理解为DOM就是一系列功能集合。

2. DOM可以用来干什么？ 
   理解了DOM是API，就知道它就是一些功能，通过这些功能可以对HTML文档进行动态操作，从而实现许多动态交互效果。

3. DOM是怎么来的？ 
   回答这个问题需要追溯到1990年代后期微软与Netscape的‘浏览器大战’。

4. 怎么使用DOM? 
   通过javascript对HTML DOM进行访问。 
   HTML DOM将html元素定义为对象，API以对象方法和对象属性的形式实现。 
   可直接调用DOM实现的方法，进行DOM操作，例如： 

   
   getElementById() 
   返回带有指定 ID 的元素。 
   getElementsByTagName() 
   返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 
   getElementsByClassName() 
   返回包含带有指定类名的所有元素的节点列表。 
   appendChild() 
   把新的子节点添加到指定节点。 
   removeChild() 
   删除子节点。 
   replaceChild() 
   替换子节点。 
   insertBefore() 
   在指定的子节点前面插入新的子节点。 
   createAttribute() 
   创建属性节点。 
   createElement() 
   创建元素节点。 
   createTextNode() 
   创建文本节点。 
   getAttribute() 
   返回指定的属性值。 
   setAttribute() 
   把指定属性设置或修改为指定的值。