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.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>

当DOM加载后，表示HTML div元素的变量divElement就会自动生成一个关联集合，它以名值对形式检索这些属性。

divElement.attributes = { 

    id : "divl", 

    class : "stylel", 

    lang : "en", 

    title : "div"

在传统的DOM中，常用点语法通过元素直接访问HTML属性，如img.src、a.href等，这种方式虽然不标准，但是获得了所有浏览器的支持。

【示例2】img元素拥有src属性，所有图像对象都拥有一个src脚本属性，它与HTML的src特性关联在一起。下面两种用法都可以很好地工作在不同的浏览器中。

<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脚本在不同浏览器中都能很好地工作，建议采用标准用法会更为稳妥，而且很多HTML属性并没有被JavaScript映射，所以也就无法直接通过脚本属性进行读写。