DocumentFragment类型

  • 在所有节点类型中，DocumentFragment类型是唯一一个在标记中没有对应表示的类型。
  • DOM将文档片段定义为“轻量级”文档，能够包含和操作节点，却没有完整文档那样额外的消耗。
  • DocumentFragment节点具有以下特征:
    • nodeType等于11；
    • nodeName值为”#document- fragment”；
    • nodeValue值为null；
    • parentNode值为null；
    • 子节点可以是Element、 Process ingInstruction、Comment、 Text、CDATASection或EntityRe ference。
  • 文档片段的作用是充当其他要被添加到文档的节点的仓库。
  • 可以使用document.createDocumentFragment()方法创建文档片段。
    1
    let fragment = document.createDocumentFragment();
  • 文档片段从Node类型继承了所有文档类型具备的可以执行DOM操作的方法。
  • 如果文档中的一个节点被添加到一一个文档片段，则该节点会从文档树中移除，不会再被浏览器渲染。
  • 可以通过appendChild()或insertBefore()方法将文档片段的内容添加到文档。
  • 在把文档片段作为参数传给这些方法时，这个文档片段的所有子节点会被添加到文档中相应的位置。
  • 文档片段本身永远不会被添加到文档树。

Attr类型

  • 元素数据在DOM中通过Attr类型表示。
  • Attr类型构造函数和原型在所有浏览器中都可以直接访问。
  • 技术上讲，属性是存在于元素attributes属性中的节点。
  • Attr 节点具有以下特点：
    • nodeType等于2;
    • nodeName值为属性名;
    • nodeValue值为属性值;
    • parentNode值为null;
    • 在HTML中不支持子节点;
    • 在XML中子节点可以是Text或Ent ityReference。
  • 属性节点尽管是节点，却不被认为是DOM文档树的一部分。
  • Attr节点很少直接被引用，通常更喜欢使用getAttribute()、removeAttribute()和 setAttribute()方法操作属性。
  • Attr对象上有3个属性: name、value和specified。其中，name包含属性名（与nodeName一样）value包含属性值(与nodeValue一样),而specified是一个布尔值，表示属性使用的是默认值还是被指定的值。
  • 可以使用document.createAttribute()方法创建新的Attr节点，参数为属性名。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    let attr = document.createAttribute("align"); 
    attr.value = "left"; 
    element.setAttributeNode(attr); 
    alert(element.attributes["align"].value); // "left" 
    alert(element.getAttributeNode("align").value); // "left" 
    alert(element.getAttribute("align")); // "left" 
    /*
    在这个例子中，首先创建了一个新属性。调用createAttribute()并传人"align"为新属性设置了name属性，因此就不用再设置了。随后，value属性被赋值为"left"。为把这个新属性添加到元素上，可以使用元素的setAttri buteNode()方法。添加这个属性后，可以通过不同方式访问它，包括attributes属性、getAttr ibuteNode ()和getAttribute()方法。其中，attributes 属性和getAttri buteNode ()方法都返回属性对应的Attr节点，而getAttribute()方法只返回属性的值。
    */