一、定義

DOM ：文檔對象模型
DMO是針對HTML文檔的一個API（應(yīng)用程序編程接口），DOM描繪了一個層次化的節(jié)點樹，允許開發(fā)人員添加，刪除，修改頁面的某一部分。

節(jié)點分為幾種不同的類型：

Node類型

Document類型

Element類型

Text類型——文本類型

Comment類型 —— 注釋類型

二、類型的具體說明

Node類型

       屬性：1、nodeType ，表示節(jié)點類型
                 規(guī)則： 1 -->Element類型    3 -->Text類型   8 -->Comment類型   9 -->Document類型
                 2、 childNodes ，表示子節(jié)點集合，可以使用slice方法將NodeList轉(zhuǎn)換為數(shù)組
                          var arr = Array.prototype.slice.call(nodes,0);

demo:

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
	window.onload = function(){
	    console.log(document.body.childNodes);   //獲取所有子節(jié)點，包括各種類型的節(jié)點，返回NodeList類數(shù)組對象
	    //將類數(shù)組對象轉(zhuǎn)換為數(shù)組對象
	    var tempArr = Array.prototype.slice.call(document.body.childNodes,0);
	    console.log(tempArr);
            //Text類型
	    var texts = tempArr.filter(function(item,index){
		return item.nodeType == 3;
	    });
	    console.log(texts);
	    //Element類型
	    var eles = tempArr.filter(function(item,index){
		    return item.nodeType == 1;
	    });
	    console.log(eles);
	    //Comment類型
	    var com = tempArr.filter(function(item,index){
		return item.nodeType == 8;
	    });
	    console.log(com);
	    //Document類型
	    var docu = tempArr.filter(function(item,index){
		    return item.nodeType == 9;
	    });
	    console.log(docu);
        }
    </script>
</head>
<body>
    hello
    <!-- 注釋 -->
    <div>
	<span>world</span>
    </div>
    你好
</body>

輸出結(jié)果：

                   3、nodeName , 取決于節(jié)點類型，如果是元素類型，值為元素的標(biāo)簽名
                   4、nodeValue , 取決于節(jié)點類型，如果是元素類型，值為null
                   5、parentNode，指向文檔樹中的父節(jié)點
                   6、previousSibling，兄弟節(jié)點的前一個節(jié)點
                   7、nextSibling，兄弟節(jié)點的下一個節(jié)點
                   8、firstSibling，childsNode列表中的第一個節(jié)點
                   9、ownerDocument，指向表示整個文檔的文檔節(jié)點
                   10、hasChildNodes，包含一個或多個節(jié)點時，返回true

<head>
    <meta charset="UTF-8">
    <title>Node屬性</title>
        <script>
	    window.onload = function(){
		console.log(document.body.childNodes);  //獲取所有節(jié)點
		var childs = document.body.childNodes;
		console.log(childs.length);
		console.log(childs[3].nodeName);     //獲取類數(shù)組對象中第三個節(jié)點的nodeName
		// 或者console.log(childs.item(0));
		console.log(childs[1].nodeValue);   //獲取第一個節(jié)點的nodeValue
		console.log(childs[0].parentNode);   //指向文檔樹中的父節(jié)點
		//兄弟節(jié)點
		console.log(childs[0].nextSibling);     //下一個兄弟
		console.log(childs[4].previousSibling); //上一個兄弟
		console.log(document.body.firstChild == childs[0]);  //第一個孩子節(jié)點
		console.log(childs[0].ownerDocument);   //任何節(jié)點都屬于它所在的文檔
		console.log(document.body.hasChildNodes());  //在包含一個或多個節(jié)點的情況下返回true
		console.log(childs[0].hasChildNodes());
	 }
    </script>
</head>
<body>                  
    <!-- 注釋 -->
    hello
    <div>
	<span>world</span>
    </div>
    你好
    <div>
	one
    </div>
</body>

輸出結(jié)果：

Node類型的操作節(jié)點

appendChild（）—— 向childNodes列表末尾添加一個節(jié)點

<head>
    <meta charset="UTF-8">
    <title>node節(jié)點操作</title>
        <style>
	    .content{
		border:1px solid black;
		overflow: hidden;
	    }
	    .content > div{
		width:50px;
		height: 50px;
		background-color: red;
		float: left;
		margin: 10px;
	    }
	    .content .two{
		background-color: blue;
	    }
	</style>
	<script>
	    window.onload = function(){
		var div = document.getElementsByClassName('one')[0]; //通過classname來獲取元素
		console.log(div);
		//復(fù)制
		var newDiv = div.cloneNode(true);
		var btns = document.getElementsByTagName('button');  //選中所有button元素
		console.log(btns);
                //添加點擊效果
		btns[0].onclick = function(){
		        //追加節(jié)點
		        var content = document.getElementsByClassName('content')[0];
		        content.appendChild(newDiv);
		    }
		}
	</script>
</head>
<body>
    <button>點擊追加</button>
    <div class="content">
	    <div class="one">
		<span>one</span>
	    </div>
	    <div class="two">
		two
	    </div>
    </div>
</body>

輸出結(jié)果：

點擊前：

點擊后：

insertBefore（）——第一個參數(shù)：要插入的節(jié)點，第二個參數(shù)：作為參照的節(jié)點
replaceChild（）——第一個參數(shù)：要插入的節(jié)點，第二個參數(shù)：要替換的節(jié)點
removeChild（）——一個參數(shù)，即要刪除的節(jié)點
cloneNode（）——復(fù)制節(jié)點

<head>
    <meta charset="UTF-8">
    <title>node</title>
    <style>
        .content{
	    border:1px solid black;
	    overflow: hidden;
	  }
	.content > div{
	    width:50px;
	    height: 50px;
	    background-color: red;
	    float: left;
	    margin: 10px;
	  }
	 .content .two{
	    background-color: blue;
	  }
	 .content .three{
	    background-color: pink;
	  }
    </style>
    <script>
	    window.onload = function(){
	    var btns = document.getElementsByTagName('button');
	    console.log(btns);
	    var content = document.getElementsByClassName('content')[0];  
	    var newDiv = document.getElementsByClassName('one')[0];
	    //克隆one，要插入的節(jié)點
	    newDiv = newDiv.cloneNode(true);
	    //粉色div，參考的節(jié)點
	    var div3 = document.getElementsByClassName('three')[0];
	    //插入節(jié)點
	    btns[0].onclick = function(){
		    content.insertBefore(newDiv,div3);
		}
	    //替換節(jié)點
	    btns[1].onclick = function(){
		    content.replaceChild(newDiv,div3);
	    }
	    //移除節(jié)點
	    btns[2].onclick = function(){
		    content.removeChild(div3);
	        }
	    }
    </script>
</head>
<body>
	<button>插入節(jié)點</button>
	<button>替換節(jié)點</button>
	<button>刪除節(jié)點</button>
	<div class="content">
		<div class="one">one</div>
		<div class="two">two</div>
		<div class="three">three</div>
	</div>
</body>