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)行讀寫。
點擊加載更多評論>>