從零開始學習前端JAVASCRIPT — 6、JavaScript基礎DOM

標籤：ted   添加   sts   html   相容   否則   頁面   exists   obj   

1：DOM（Document  Object  Model）的概念和作用document對象是DOM核心對象：對html中的內容，屬性，樣式進行操作。

節點樹中節點之間的關係：父子，兄弟。

 

2：DOM常用屬性

title：返回或設定當前文檔的標題。

all：返回所有元素的集合。

forms：返回對文檔中所有form對象的引用。

通過集合來訪問相應的對象：

1.通過下標的形式。

2.通過name形式。

 

3：DOM查詢方法

1.getElementById(id)：返回擁有指定id的（第一個）對象的引用。

2.getElementsByTagName(tagName)：返回有指定標籤名的對象集合。

註：上面兩個方法沒有相容性問題。

3.getElementsByName(name)：返回帶有指定name指定名稱的對象的集合。有相容性問題。

在IE9及其以下，如果該對象的標準屬性包含有name,（比如說input，在input中name是input的預設屬性，所以可以正常使用，但是在div中name並不是div的預設屬性，所以不能正常顯示），那麼可以正確的使用。否則不可以使用。在Firefox中，該方法可以適用於任何情況。

結論： getElementsByName(name)主要是適用於表單。

4.write：輸出內容到頁面。（註：網頁載入完成後進行輸出，則覆蓋整個網頁，使用時需注意）

5.getElementsByClassName()：返回帶有指定className指定名稱的對象的集合。有相容性問題，適用於Firefox瀏覽器，在IE瀏覽器中不可用（IE8及以下不可用）。

封裝擷取className值的DOM節點的相容性的函數。

 

4：操作內容

1.innerHTML：用來設定或擷取對象起始和結束標籤內（例如div架構，它只會擷取div裡面的內容，而不會擷取div）的內容(識別html標籤) 。

2.innerText：用來設定或擷取對象起始和結束標籤內的內容 (只是擷取文字內容)(適用於IE，最新版Firefox已支援)。

  textContent用來設定或擷取對象起始和結束標籤內的內容 (只是擷取文字內容)(適用於Firefox，IE8及其以下不支援)。

3.outerHTML  用來設定或擷取包括本對象在內的起始和結束標籤內（例如div架構，不僅會擷取div裡面的內容，也會擷取div自身的內容）的內容(識別html標籤) 。

4.outerText  用來設定或擷取包括本對象在內的起始和結束標籤內的內容(只是擷取文字內容)（Firefox不支援）。

 

5：操作屬性

1.直接操作

      對象.屬性。   // 擷取屬性。某些屬性有相容性問題，例如name（如果不是標籤特有的屬性，在chrome/firfox訪問不到，在IE8及其以下瀏覽器能擷取的到）。

      對象.屬性=值  // 設定、添加屬性(屬性值)。

2.通過方法

      getAttribute(“屬性”)。                // 擷取給定的屬性的值。

      setAttribute(“屬性”,“值”)。  // 設定或是添加屬性。

　　　removeAttribute(“屬性”)。       // 刪除屬性。

 

6：操作樣式

1.行內樣式

     對象.style.屬性       // 擷取樣式屬性

     對象.style.屬性=值  // 設定、添加樣式屬性。

     註： 遇到屬性是“-”連結的，要將“-”去掉，後面的單詞的首字母大寫。

2.行內樣式和css層疊樣式通用的方式

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

     getComputedStyle((對象,null).屬性)   Firefox  用來獲得實際的樣式屬性。

註：只能擷取不能設定。

 

7：DOM增刪改

一：建立節點（注釋和文檔節點一般不需要建立）

    1：建立元素節點

        document.createElement("元素標籤名");

    2：建立屬性節點

        var oAttr = document.createAttribute(“屬性名稱”);（不常用）

           oAttr.value = "attr-name";

           oDiv.setAttributeNode(oAttr);

        對象.屬性=屬性值;（常用）

    3：建立文本節點

        對象.innerHTML = "";

        var oText = document.createTextNode(“文本”);  // 文本中的HTML標籤實體化

           oDiv.appendChild(oText);

二：追加到頁面當中

    父物件.appendChild(newNode)  // 插入到父物件最後。

    父物件.insertBefore(newNode, existsNode)   // 插入到什麼對象之前。

三：修改(替換)節點

    父物件.replaceChild(newNode,existsNode);  // 前面的替換後面的

四：刪除節點

    父物件.removeChild(oldNode);

     如果確定要刪除節點，最好也清空記憶體  對象=null;

五：表格操作

     table.tBodies[0].rows[0].cells[0].innerHTML;

     var oNewRow = table.insertRow(“行位置”);

　　 oNewRow.insertCell(“列位置”);

從零開始學習前端JAVASCRIPT — 6、JavaScript基礎DOM