js—DOM节点操作

一、定义

DOM ：文档对象模型

DMO是针对HTML文档的一个API（应用程序编程接口），DOM描绘了一个层次化的节点树，允许开发人员添加，删除，修改页面的某一部分。

节点分为几种不同的类型 ：

• Node类型
• Document类型
• Element类型
• Text类型——文本类型
• Comment类型 —— 注释类型

---

二、类型的具体说明

• Node类型

       属性：1、nodeType ， 表示节点类型

                         规则：  1 -->Element类型    3 -->Text类型   8 -->Comment类型   9 -->Document类型

                 2、 childNodes ，表示子节点集合，可以使用slice方法将NodeList转换为数组

                          var arr = Array.prototype.slice.call(nodes,0);

 demo:       

    
    
    


    hello
    
    

	world
    
    你好

输出结果：

                            

                   3、nodeName , 取决于节点类型，如果是元素类型，值为元素的标签名

                   4、nodeValue , 取决于节点类型，如果是元素类型，值为null

                   5、parentNode，指向文档树中的父节点

                   6、previousSibling，兄弟节点的前一个节点

                   7、nextSibling，兄弟节点的下一个节点

                   8、firstSibling，childsNode列表中的第一个节点

                   9、ownerDocument，指向表示整个文档的文档节点

                   10、hasChildNodes，包含一个或多个节点时，返回true

    
    
        

                  
    
    hello
    

	world
    
    你好
    

	one
    

输出结果：

      

---

---

 

Node类型的操作节点

• appendChild（）——  向childNodes列表末尾添加一个节点   

    
    
        
	


    点击追加
    

	    

		one
	    
	    

		two
	    
    

输出结果：

                     点击前：

                     点击后：

---

• insertBefore（）——第一个参数：要插入的节点，第二个参数：作为参照的节点
• replaceChild（）——第一个参数：要插入的节点，第二个参数：要替换的节点
• removeChild（）——一个参数，即要删除的节点
• cloneNode（）——复制节点

    
    
    
    


	插入节点
	替换节点
	删除节点
	

		
one
		
two
		
three
	

点击前：

 

点击“插入节点”：

 

点击“替换节点”：

 

点击“删除节点”：