JavaScript之BOM+DOM(2)

目錄

節點信息（屬性）1

應用：4

1：獲取非行內樣式4

2：節點計算屬性5

應用：5

綜合應用：5

週六練習6

 

1.自定義屬性獲取  

getAttribute(「屬性」)。  // 獲取給定的屬性的值。

setAttribute(「屬性」,「值」)。  // 設置或是添加屬性。 

removeAttribute(「屬性」)。     // 刪除屬性。 

 

 

2.

節點信息（屬性）

   節點類型            節點名字       節點值

            nodeType(數值)      nodeName       nodeValue

元素節點         1               標籤名          null   

屬性節點         2               屬性名         屬性值

文本節點         3               #text           文本

註釋節點         8               #comment      註釋的文字

文檔節點         9               #document       null

 

對象.childNodes  得到子節點的集合，包括空白節點。

過濾空白節點

/*

* 過濾空白節點

* */

function removeSpaceNode(eleNode) {

    var children = eleNode.childNodes;

    for(var i=0;i<children.length;i++){

        var node =  children[i];

        //nodeType == 3 文本節點

        ///^\s+$/.test(node.nodeValue)  返回 字符串是不是空格或者回車

        if(node.nodeType == 3 && /^\s+$/.test(node.nodeValue)){

            eleNode.removeChild(node);

        }

    }

}

 

 

2：經過節點的關係屬性來得到節點的引用。

對象.parentNode  得到父節點的引用。

對象.children    得到子節點的集合，不包含空白節點。但IE7包含首個註釋節點（前面沒有元素節點），IE8包含全部的註釋節點。

對象.firstChild  得到第一個子節點。（IE7/8非空白節點，多是註釋節點）

對象.firstElementChild  得到第一個非空白的子節點。（IE7/8不支持）

對象.lastChild   得到最後一個子節點。（IE7最後一個元素節點，IE8最後一個非空白節點，多是註釋節點）

對象.lastElementChild   得到最後一個非空白的子節點。（IE7/8不支持）

對象.nextSibling 得到下個兄弟節點的引用。 （包括空白節點和註釋。IE7/8包括註釋節點，不包括空白節點。）

對象.nextElementSibling 得到下個兄弟節點的引用。 （IE7/8不支持）

對象.previousSibling 得到上個兄弟節點的引用。（包括空白節點和註釋。 IE7/8包括註釋節點，不包括空白節點。）

對象.previousElementSibling 得到上個兄弟節點的引用。（IE7/8不支持）

缺點：兼容性很差。

 

 

 

應用：

1進度條

2：隔行變色。

1：獲取非行內樣式

     對象.currentStyle.屬性                IE   用來得到實際的樣式屬性。

     getComputedStyle(對象,null).屬性   火狐  用來得到實際的樣式屬性。

注：只能獲取不能設置。

//獲取計算 樣式

 

2：節點計算屬性

offsetLeft：獲取元素相對具備定位屬性的父級元素的左側偏移距離。

offsetTop：獲取元素相對就有定位屬性的父級元素的頂部偏移距離。

offsetWidth/offsetHeight：元素實際寬度/高度。

 

應用：

1：網頁換膚。

2：簡易年曆。

3：自動登陸勾選。

 

綜合應用：

1：點擊按鈕換圖片。

2：tab切換案例。

3：qq延遲提示框

週六練習

密碼強度