JS createAttribute()方法：建立元素節點

在 JavaScript 中，使用 document 物件的 createAttribute() 方法可以建立屬性節點，具體用法如下：

document.createAttribute(name)

引數 name 表示新建立的屬性的名稱。

範例1

下面範例建立一個屬性節點，名稱為 align，值為 center，然後為標籤 <div id="box"> 設定屬性 align，最後分別使用 3 種方法讀取屬性 align 的值。

<div id="box">document.createAttribute(name)</div>
<script>
    var element = document.getElementById("box");
    var attr = document.createAttribute("align");
    attr.value = "center";
    element.setAttributeNode(attr);
    console.log(element.attributes["align"].value);  //"center"
    console.log(element.getAttributeNode("align").value);  //"center"
    console.log(element.getAttribute("align"));  //"center"
</script>

屬性節點一般位於元素的頭部標籤中。元素的屬性列表會隨著元素資訊預先載入，並被儲存在關聯陣列中。例如，針對下面 HTML 結構。

<div id="div1" class="style1" lang="en" title="div"></div>

當 DOM 載入後，表示 HTML div 元素的變數 divElement 就會自動生成一個關聯集合，它以名值對形式檢索這些屬性。

divElement.attributes = {
    id : "div1",
    class : "style1",
    lang : "en",
    title : "div"
}

在傳統 DOM 中，常用點語法通過元素直接存取 HTML 屬性，如 img.src、a.href 等，這種方式雖然不標準，但是獲得了所有瀏覽器的支援。

範例2

img 元素擁有 src 屬性，所有影象物件都擁有一個 src 指令碼屬性，它與 HTML 的 src 特性關聯在一起。下面兩種用法都可以很好地工作在不同瀏覽器中。

<img id="img1" src="" />
<script>
    var img = document.getElementById("img1");
    img.setAttribute("src", "http://www.w3.org");  //HTML 屬性
    img.src = "http://www.w3.org";  //JavaScript 屬性
</script>

類似的還有 onclick、style 和 href 等。為了保證 JavaScript 指令碼在不同瀏覽器中都能很好地工作，建議採用標準用法，而且很多 HTML 屬性並沒有被 JavaScript 對映，所以也就無法直接通過指令碼屬性進行讀寫。