學過JavaScript的同學應該知道，JS由三部分組成，ECMAScript，DOM，BOM。這節我們詳細瞭解一下DOM（Document Object Model 文件物件模型）。

    很久不直接操作DOM了，現在要寫還是需要回憶許久的。首先查閱了之前的筆記，列出如下導圖，文章也將按照導圖的點來進行詳解。

一、基礎DOM

1、DOM概述

Document Object Model ，就是 文件物件模型

大家應該已經對HTML標籤瞭解了，其實DOM和標籤之間的關係密不可分，html標籤通過瀏覽器解析成DOM節點。html標籤包裹的內容展示在頁面上，行為操作是需要DOM來完成的。一個頁面有很多的html標籤，那麼就對應有很多DOM節點。這麼多的DOM節點根據父子級的關係構成DOM樹。

2、節點型別

在這裡我們就只關注最常用的三種：元素、屬性、文字。

• 元素節點（Element）: html的標籤 <p></p>
• 屬性節點（Attribute）:元素屬性 比如設定的id
• 文字節點（Text）: 頁面上需要展示的內容

這些節點的屬性也都是通用的。有

• nodeType(返回節點的屬性值)，
• nodeName(返回節點的名稱)，
• nodeValue(返回或設定當前節點的值)。

<div id='main'><p>這是節點1</p><!-- 註釋 -->hello</div>  <!-- 第一級child節點 -->
<script type="text/javascript">
	var divCon = document.getElementById('main');
	var con1 = document.getElementsByTagName('p');
	//空格和換行符會被解釋成節點
	for (var i = 0; i < divCon.childNodes.length; i++) { 
		console.log('-------------')   
        console.log("nodeType:"+divCon.childNodes[i].nodeType+"");  
        console.log("nodeName:"+divCon.childNodes[i].nodeName+""); 
        console.log("nodeValue:"+divCon.childNodes[i].nodeValue+"");                   
    } 
</script>
 

結果：

如果只想要返回元素節點的長度可以用： 

ele.childElementCount 方法或者 ele.children.length方法

注意： IE瀏覽器只能使用nodeType 是否等於某個數值 來判斷節點型別

3、屬性

可以進行獲取或設定某個節點的屬性值。

• innerHTML 節點（元素）的文字值，獲取/設定節點內容
• parentNode 節點（元素）的父節點
• childNodes 節點（元素）的子節點
• attributes 節點（元素）的屬性節點
• style 修改節點樣式

當然，還有上述的nodeType，nodeName，nodeValue 屬性

屬性操作：（也算是方法）

<div id='main'><p>這是節點1</p><!-- 註釋 -->hello</div>  <!-- 第一級child節點 -->
<script type="text/javascript">
   var divCon = document.getElementById('main');
   var con1 = document.getElementsByTagName('p');
   console.log(divCon.innerHTML)   // <p id="con1">這是節點1</p><!-- 註釋 -->hello
   divCon.innerHTML+=' world'
   console.log(con1[0])  // <p>這是節點1</p>
   console.log(con1[0].parentNode)  // 不能直接使用 con1 需要指定是哪一個元素的父元素。
   console.log(divCon.childNodes) // 陣列  共有三個值，空格和註釋都是節點
   console.log(divCon.attributes)  // id
   console.log(con1.attributes)  //  undefined  沒有屬性
   con1[0].style.color = 'red';   // 通過 . 運算子操作
</script>

4、方法

        var con2 = document.createElement('h1');
        var con2Attr = document.createAttribute('class');
        con2Attr.value = 'con2'
        con2.setAttributeNode(con2Attr)
        var con2Content = document.createTextNode('這是一級標題');
        con2.appendChild(con2Content);

        con1[0].appendChild(con2);
        console.log(con2);   // <h1 class='con2'>這是一級標題</h1>
        // con1[0].removeChild(con2);  //  去掉剛新增的節點

        var con3 = document.createElement('a');
        var con3Attr = document.createAttribute('href');
        var con3Name = document.createTextNode('Baidu')
        con3Attr.value='http://baidu.com'
        con3.setAttributeNode(con3Attr)
        con3.appendChild(con3Name);
        console.log(con3);
        con1[0].replaceChild(con3,con2);  // con3 替換了con2

        con1[0].insertBefore(con2,con3);   // 在con3前插入con2

ps：實現一個insertAfter方法

        function insertAfter(a1,a2){
        	 var parent = a2.parentNode;
	         if(parent.lastChild == a2) {
	               ​parent.appendChild(a1);
	         }​
	         else {
	              parent.insertBefore(a1, a2.nextSibling);​
	        }​
        }

 拓展：

關注我獲取更多前端資源和經驗分享

關注後回覆    vivi     獲取我的微訊號，望不吝賜教，pps：可輕撩哈哈

感謝大佬們閱讀，希望大家頭髮濃密，睡眠良好，情緒穩定，早日實現財富自由~