美文网首页前端基础笔记
【javascript】DOM-节点层次-DocumentTyp

【javascript】DOM-节点层次-DocumentTyp

作者: shanruopeng | 来源:发表于2017-11-30 17:04 被阅读2次

    DocumentType类型

    • DocumentType 包含着与文档的doctype 有关的所有信息,它具有下列特征:

      • nodeType 的值为10;
      • nodeName 的值为doctype 的名称;
      • nodeValue 的值为null;
      • parentNode 是Document;
      • 不支持(没有)子节点。
    • DOM1 级描述了DocumentType 对象的3 个属性:name、entities 和notations。

    • name 表示文档类型的名称;entities是由文档类型描述的实体的NamedNodeMap对象;notations 是由文档类型描述的符号的NamedNodeMap 对象。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    
    alert(document.doctype.name); //"HTML"
    

    DocumentFragment类型

    • 在所有节点类型中,只有DocumentFragment 在文档中没有对应的标记。
    • DocumentFragment 节点具有下列特征:
      • nodeType 的值为11;
      • nodeName 的值为"#document-fragment";
      • nodeValue 的值为null;
      • parentNode 的值为null;
      • 子节点可以是Element、ProcessingInstruction、Comment、Text、CDATASection 或
        EntityReference。
    • 虽然不能把文档片段直接添加到文档中,但可以将它作为一个“仓库”来使用,即可以在里面保存将来可能会添加到文档中的节点。
    • 要创建文档片段,可以使用document.createDocumentFragment()方法。
    • 文档片段继承了Node 的所有方法,通常用于执行那些针对文档的DOM操作。
    <ul id="myList"></ul>
    
    var fragment = document.createDocumentFragment();
    var ul = document.getElementById("myList");
    var li = null;
    for (var i=0; i < 3; i++){
        li = document.createElement("li");
        li.appendChild(document.createTextNode("Item " + (i+1)));
        fragment.appendChild(li);
    }
    ul.appendChild(fragment);
    

    Attr类型

    • 元素的特性在DOM 中以Attr 类型来表示。在所有浏览器中(包括IE8),都可以访问Attr 类型的构造函数和原型。

    • 特性就是存在于元素的attributes 属性中的节点。特性节点具有下列特征:

      • nodeType 的值为2;
      • nodeName 的值是特性的名称;
      • nodeValue 的值是特性的值;
      • parentNode 的值为null;
      • 在HTML 中不支持(没有)子节点;
      • 在XML 中子节点可以是Text 或EntityReference。
    • Attr 对象有3 个属性:name、value 和specified。

    • name 是特性名称(与nodeName 的值相同),value 是特性的值(与nodeValue 的值相同),而specified 是一个布尔值,用以区别特性是在代码中指定的,还是默认的。

    • 使用document.createAttribute()并传入特性的名称可以创建新的特性节点。

    var 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"
    
    好好学习

    相关文章

      网友评论

        本文标题:【javascript】DOM-节点层次-DocumentTyp

        本文链接:https://www.haomeiwen.com/subject/shzvbxtx.html