首页 > 编程笔记 > JavaScript笔记

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 映射,所以也就无法直接通过脚本属性进行读写。

所有教程

优秀文章