JavaScript 創(chuàng)建屬性節(jié)點

■知識點

使用document對象的createAttribute()方法可以創(chuàng)建屬性節(jié)點。其用法如下：

    document.createAttribute(name)

其中，參數(shù)name表示新創(chuàng)建的屬性的名稱。

■實例設(shè)計

【示例1】下面的示例創(chuàng)建一個屬性節(jié)點，名稱為align，值為center，然后為標(biāo)簽<div id=”box">設(shè)置屬性align,最后分別使用3種方法讀取屬性align的值。

<div id="box">document.createAttribute(name)</div>

<script>

var element = document.getElementByld("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>

當(dāng)DOM加載后，表示HTML div元素的變量divElement就會自動生成一個關(guān)聯(lián)集合，它以名值對形式檢索這些屬性。

divElement.attributes = { 

    id : "divl", 

    class : "stylel", 

    lang : "en", 

    title : "div"

在傳統(tǒng)的DOM中，常用點語法通過元素直接訪問HTML屬性，如img.src、a.href等，這種方式雖然不標(biāo)準(zhǔn)，但是獲得了所有瀏覽器的支持。

【示例2】img元素?fù)碛衧rc屬性，所有圖像對象都擁有一個src腳本屬性，它與HTML的src特性關(guān)聯(lián)在一起。下面兩種用法都可以很好地工作在不同的瀏覽器中。

<img id="imgl" src="" />

<script>

var img = document.getElementByld("imgl");

img. setAttribute("src","http://www.w3.org/");      //HTML 屬性

img.src = "http://www.w3 .org/";              //JavaScript 屬性

</script>

類似的還有ondick、style和href等。為了保證JavaScript腳本在不同瀏覽器中都能很好地工作，建議采用標(biāo)準(zhǔn)用法會更為穩(wěn)妥，而且很多HTML屬性并沒有被JavaScript映射，所以也就無法直接通過腳本屬性進(jìn)行讀寫。