在了解DOM(文本对象模型)的框架和节点后，最重要的是使用这些节点处理html网页

对于一个DOM节点node，都有一系列的属性和方法可以使用。常用的有下表。

完善：http://www.w3school.com.cn/xmldom/dom_element.asp

1.访问节点

---

BOM提供了一些边界的方法访问节点，常用的就是getElementsByTagName()，和getElementById()

     
     
      客户端语言    
      
HTML
    
      
JavaScript
    
      
CSS
     
     
      服务器端语言    
      
ASP.NET
    
      
JSP
    
      
PHP
     

document.getElementById()

PHP

 

     
 //id获得className

 

 

 

 2.检测节点类型

---

 通过节点的nodeType可以检测到节点的类型，该参数一个返回12个整数值。

表达格式如 document.nodeType

正真有用的，还是 提到的三种类型

元素节点，文本节点和属性节点

1.元素节点 element node 返回值为 1

2.属性节点 attribute node 返回值为 2

3.文本节点 text node 返回值为 3

CSS
返回：nodeType：1

 

这意味着可以对某种节点做单独处理，在搜索节点时非常实用。后面会讲到。

3.利用父子兄关系查找节点

---

在第一小节访问节点上，利用节点的childNodes属性来访问元素节点包含的文本节点。

本小节利用节点的父子兄关系来查找节点

*利用hasChildNodes和childNodes属性获取该节点包含的所有节点

        
     
    
      
糖醋排骨
    
      
圆笼粉蒸肉
    
      
泡菜鱼
    
      
板栗烧鸡
    
      
麻婆豆腐
     

 4.DOM获取节点的父节点

     
    
      
糖醋排骨
    
      
圆笼粉蒸肉
    
      
泡菜鱼
    
      
板栗烧鸡
    
      
麻婆豆腐
     
 //返回 ul

使用父节点，成功的获得了指定节点的父节点

 5.使用parentNode属性

 

        
     
      
    
           
糖醋排骨
    
圆笼粉蒸肉
    
泡菜鱼
    
板栗烧鸡
    
麻婆豆腐
    
      
    
     
 //输出 //tageName:DIV claaName:colorful typeOf:object

 

　　从某个子节点开始，一直向上搜索父节点，直到节点的类名为“colorful”

6.dom的兄弟关系

        
     
      
    
           
糖醋排骨
    
圆笼粉蒸肉
    
泡菜鱼
    
板栗烧鸡
    
麻婆豆腐
         
麻婆豆腐
         
麻婆豆腐
    
      
    
     

利用nextsibling和previousSibling属性访问兄弟节点看上去很好。

但仅仅适用于ie浏览器

为了使用代码有良好的兼容性，就必须使nodeType进行判断

以下做兼容性处理：

    
     
        
      
糖醋排骨
        
      
圆笼粉蒸肉
        
      
泡菜鱼
        
      
板栗烧鸡
        
      
麻婆豆腐
    
     

7.设置节点属性

用setAttribute()方法设置节点属性

                
                                     
     
                  555        
     
        切换    

 

8.createElement() 创建节点

 

                
                         
这里本来有个P，测试createElement()
    

 9.removeChild移除节点

                
                         
这里本来有个P，测试createElement()
    

 10.insertBefore() 在特定节点前插入节点

                
                         
这里本来有个P
    

11.在特定的节点之后插入新元素（2015年1月9日补充） 

DOM提供的方法只能用insertBefore()在目标元素前加入新的元素，或者利用appendchild()方法在父元素的childNodes末尾加入新的元素（示例：）。

而实际中常常用到在某个特定的元素末尾加入新的元素。而DOM方法并没有insertBefore()方法，但是利用现有的知识，完全可以利用现有知识进行编写。

 代码思路如下

function insertAfter(newElement, targetElement) {                var oparent = targetElement.parentNode; //找到目标元素的父元素                if (oparent.lastChild == targetElement) //如果目标是最后一个元素了                oparent.appendChild(newElement); //直接添加到最后一个元素的后面                else //插入到下一个元素的父元素节点之前                          oparent.insertBefore(newElement, targetElement.nextSibling)

实例：（元素外追加）原来实例：

        
                             
第一个
        
第二个
            

 实例：元素内添加

12.添加文档碎片提高执行效率

                
                         
这里本来有个P