[TOC] ### 節點和元素 #### DOM結構  文檔:document * 元素:頁面中所有的標簽,元素---element, 標簽----元素---對象 * 節點:頁面中所有的內容(標簽,屬性,文本(文字,換行,空格,回車)),Node 節點大于元素 * 根元素:html標簽 #### 屬性 節點的屬性:(可以使用標簽--元素.出來,可以使用屬性節點.出來,文本節點.點出來) nodeType:節點的類型:1----標簽,2---屬性,3---文本 nodeName:節點的名字:標簽節點---大寫的標簽名字,屬性節點---小寫的屬性名字,文本節點----#text nodeValue:節點的值:標簽節點---null,屬性節點---屬性值,文本節點---文本內容 #### 對應關系 DOM文檔樹（文檔對象模型）與HTML元素的對應關系 **DOM節點 HTML文檔** 元素節點 標簽 屬性節點 屬性 文本節點 文本內容 注釋節點 注釋 ### 各個節點和元素的獲取 標簽、屬性、文本、注釋等所有html的內容在DOM中被封裝成了類型為**節點類型**的對象，稱為**節點對象Node**。 標簽、屬性、文本、注釋分別對應的節點對象是**元素節點（Element）**、**屬性節點（Atrr）**、**文本節點（Text）**、**注釋節點（Comment）**。 ``` ~~~ <div id="dv"> <span>這是div中的第一個span標簽</span> <p>這是div中的第二個元素,第一個p標簽</p> <ul id="uu">哈哈 <li>喬峰</li> <li>鹿茸</li>嘿嘿 <li id="three">段譽</li>呵呵 <li>卡卡西</li> <li>雛田</li>嘎嘎 </ul> </div> ~~~~~~ <script> var uObj = document.getElementById("uu"); console.log(uObj.parentNode);/*父級節點 div*/ console.log(uObj.parentElement);/*父級元素(標簽) div*/ console.log(uObj.childNodes);/*子級節點 11個（換行也是節點） 返回值是個數組 */ console.log(uObj.children);/*子級元素 5個li 返回值是個數組*/ console.log(uObj.firstChild);/*第一個子節點 哈哈*/ console.log(uObj.firstElementChild);/*第一個子元素 <li>喬峰</li>*/ console.log(uObj.lastChild);/*最后一個子節點 嘎嘎*/ console.log(uObj.lastElementChild);/*最后一個子元素 <li>雛田</li>*/ console.log(my$("three").previousNode);/*three 的前一個兄弟節點 嘿嘿*/ console.log(my$("three").previousElementSibling);/*three 的前一個兄弟元素 <li>鹿茸</li>*/ console.log(my$("three").nextSibling);/*three 后一個兄弟節點 呵呵*/ console.log(my$("three").nextElementSibling);/*three 后一個兄弟元素 <li>卡卡西</li>*/ </script> ~~~ ``` #### 獲取屬性節點 ``` ~~~ <ul id="uu"> <li>喬峰</li> <li>鹿茸</li> <li id="three">段譽</li> <li>卡卡西</li> <li>雛田</li> </ul> var dv = document.getElementById("uu").getAttributeNode("id"); console.log(node.nodeType,node.nodeName,node.value); ``` ### 創建元素的方法 （三種） **document.write()**：將一個文本字符串寫入到由 document.open() 打開的一個文檔流中； **innerHTML**：設置或獲取HTML語法表示的元素的后代； **document.createElement( tagName )**：創建由 tagName 指定的HTML元素； #### document.write ``` ~~~ <input type="button" value="創建一個p" id="btn"/> 小明是一個快樂的小男孩,人家今年才38歲.好帥哦 ~~~ ~~~ my$("btn").onclick = function () { document.write("<p>哈哈哈</p>"); } ~~~ ``` **注意：document.write 在頁面加載之后執行會覆蓋前面所有的內容** #### innerHTML ``` ~~~ <input type="button" id="btn" value="p標簽創建"> <div id="dv"></div> ~~~ my$("btn").onclick = function () { my$("dv").innerHTML = "<p>啦啦啦</p>"; } ~~~ ~~~ ``` #### document.createElement( tagName ) ``` ~~~ #dv{ width: 200px; height: 500px; border: 1px solid #ccc; } ~~~ <input type="button" id="btn" value="點擊創建"> <div id="dv"></div> ~~~ my$("btn").onclick = function () { //第一步：先創建元素 var pObj = document.createElement("p");//創建元素 pObj.innerText = "這是一p標簽"; //第二步：追加到父元素里面 my$("dv").appendChild(pObj);//把創建好的元素追加到父元素里面 } /* * 第三種創建元素分兩步：第一步，先創建元素document.createElement("標簽名字") * 第二步：然后把創建好的元素追加到父元素身上appendChild ```