javascript基础学习系列二百二十六：Attr类型

<ul id="myList"></ul>

假设想给这个

• 元素添加 3 个列表项。如果分 3 次给这个元素添加列表项，浏览器就要重新渲染 3 次页面，以反映新添加的内容。为避免多次渲染，下面的代码示例使用文档片段创建了所有列表项， 然后一次性将它们添加到了
  • 元素:

   let fragment = document.createDocumentFragment();
    let ul = document.getElementById("myList");

 for (let i = 0; i < 3; ++i) { 3 let li = document.createElement("li");
li.appendChild(document.createTextNode(`Item ${i + 1}`));
fragment.appendChild(li);
 }
    ul.appendChild(fragment);

这个例子先创建了一个文档片段，然后取得了

• 元素的引用。接着通过 for 循环创建了 3 个列表 项，每一项都包含表明自己身份的文本。为此先创建
• 元素，再创建文本节点并添加到该元素。然后 通过 appendChild()把
• 元素添加到文档片段。循环结束后，通过把文档片段传给 appendChild() 将所有列表项添加到了
  • 元素。此时，文档片段的子节点全部被转移到了
    • 元素。

Attr类型

元素数据在 DOM 中通过 Attr 类型表示。Attr 类型构造函数和原型在所有浏览器中都可以直接访 7 问。技术上讲，属性是存在于元素 attributes 属性中的节点。Attr 节点具有以下特征:
 nodeType 等于 2;
 nodeName 值为属性名; 8  nodeValue 值为属性值;
 parentNode 值为 null;
 在 HTML 中不支持子节点;
 在 XML 中子节点可以是 Text 或 EntityReference。
属性节点尽管是节点，却不被认为是 DOM 文档树的一部分。Attr 节点很少直接被引用，通常开
发者更喜欢使用 getAttribute()、removeAttribute()和 setAttribute()方法操作属性。
Attr 对象上有 3 个属性:name、value 和 specified。其中，name 包含属性名(与 nodeName 一样)，value 包含属性值(与 nodeValue 一样)，而 specified 是一个布尔值，表示属性使用的是
默认值还是被指定的值。
可以使用 document.createAttribute()方法创建新的 Attr 节点，参数为属性名。比如，要给
元素添加 align 属性，可以使用下列代码:

   let attr = document.createAttribute("align");
    attr.value = "left";
    element.setAttributeNode(attr);
alert(element.attributes["align"].value); alert(element.getAttributeNode("align").value); // "left" alert(element.getAttribute("align")); // "left"

// “left”
在这个例子中，首先创建了一个新属性。调用 createAttribute()并传入"align"为新属性设置 .