day29—JavaScript中DOM的基礎知識應用

標籤：width   擷取元素   滑鼠   文檔   定位   nod   迴圈輸出   day   輸出   

轉行學開發，代碼100天——2018-04-14

 

JavaScript中DOM操作基礎知識即對DOM元素進行增刪改操作。主要表現與HTML元素的操作，以及對CSS樣式的操作。其主要應用知識如：

通過對DOM的基本瞭解，還要通過代碼實現對DOM的操作。

1.childNodes + nodeType 與children的區別

    <ul id= "ull">        <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li>        <li>5</li>    </ul>

通過對ul下li標籤（也是本文中節點）擷取，比較兩者的不同

//子節點         var oUl = document.getElementById("ull");         alert(oUl.childNodes.length); // 輸出11 ，自動計算了文本元素（空）         alert(oUl.children.length);   //輸出了5 ，不計算空文本，且只計算直接子節點

即childNodes 方法擷取的子節點包含了空文本，而children方法擷取的子節點不包括空文本，且只是父節點的直接直接點，即如果li節點下有其他元素，輸出的結果也為5.

 nodeType 返回節點的類型

如：

for (var i = 0; i < oUl.childNodes.length; i++) {
alert(oUl.childNodes[i].nodeType); //3/1交替出現
}

對於前面的HTML文檔結構，迴圈輸出的將是3,1,3,1...

 由此也可以說明，通過childNodes擷取到的節點包含了文本元素，即這裡的空文本。

若改為children，則

for (var i = 0; i < oUl.children.length; i++) {
alert(oUl.children[i].nodeType);
}

輸出的全是1，即全是元素。

因此，可以通過oUl.childNodes[i].nodeType == 1的判斷，對元素進行單獨操作。

 2.父節點：parentNode與offsetParent

parentNode：擷取元素的父節點

如：

    <ul id= "ull">        <li>afs<a href="javascript:;">隱藏</a></li>        <li>fdgd<a href="javascript:;">隱藏</a></li>        <li>3sdfsd<a href="javascript:;">隱藏</a></li>        <li>24rsdfsd<a href="javascript:;">隱藏</a></li>        <li>tsdfasga5<a href="javascript:;">隱藏</a></li>    </ul>

 通過getElementsByTagName("a") 方法擷取所有a節點，給a節點添加滑鼠點擊事件——隱藏。

 通過當前a節點的父節點顯示樣式設定為“none”實現其整行隱藏。

 //父節點         parentNode         var oA = document.getElementsByTagName("a");         // alert(oUl.parentNode);//body         alert(oA.length);         for (var i = 0; i < oA.length; i++) {             oA[i].onclick = function()             {                 this.parentNode.style.display = "none";             }         }

 offsetParent :擷取絕對位置元素的父節點。如果父節點沒有絕對位置，則擷取有絕對位置的父節點，直至body。

如父子方塊

HTML&CSS                    

 

若div1無絕對位置，修改margin時，只是div1移動；若添加絕對位置position：relative時，修改margin時兩個盒子相對移動。

絕對位置：

 

相對定位：

 3.首位子節點

firstChild firstElementChild

lastChild lastElementChild

整兩個擷取子項目的方法有相容性問題，（在使用時需要使用if語句進行判斷）

oUl.firstChild.style.background ="red"; //ie7-ie8
oUl.firstElementChild.style.background = "red";//chrome ie9以上

因此，為了適用於多種瀏覽器，可以如下修改。

            var oUl = document.getElementById("ull");            if (oUl.firstElementChild) {                 oUl.firstElementChild.style.background = "red";//chrome ie9以上                }else{                oUl.firstChild.style.background ="red"; //ie7-ie8            }

 

day29—JavaScript中DOM的基礎知識應用