• DOM节点类型


    DOM定义

      DOM(文档对象模型)脱胎于Netscape及微软创始的DHTML(动态HTML),是针对HTML和XML文档的一个API(应用程序编程接口)。DOM描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。

    节点树定义

      DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型,每种类型分别表示文档中不同的信息或标记。每 个节点都拥有各自的特点、数据和方法,另外也与其他节点存在某种关系。节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的节点 树。

      【根节点及文档元素】

      文档节点是每个文档的根节点,<html>元素是文档节点的子节点,被称之为文档元素。文档元素是文档的最外层元素,每个文档只能 有一个文档元素。在HTML页面中,文档元素始终是<html>元素。在XML中,没有预定义的元素,因此任何元素都可能成为文档元素。

    节点类型

      DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现。这个Node接口在JavaScript中是作为Node类型实现的,而在IE8-浏览器中的所有DOM对象都是以COM对象的形式实现的。

      [注意]IE8-不支持访问到DOM中的NODE类型,但支持数字值写法

    复制代码
    //在IE8-返回undefined
    console.log(Node.ELEMENT_NODE)
    //在所有浏览器中都返回true
    <div class="box" id="box"></div>
    <script>
    var oBox = document.getElementById('box');
    console.log(oBox.nodeType == 1)
    </script>
    复制代码

      

      【12种节点类型】每个节点都有一个NodeType属性,用于表明节点的类型。节点类型在Node类型中定义下列12个数值常量来表示。

    复制代码
    Node.ELEMENT_NODE(1);
    Node.ATTRIBUTE_NODE(2);
    Node.TEXT_NODE(3);
    Node.CDATA_SECTION_NODE(4);
    Node.ENTRY_REFERENCE_NODE(5);
    Node.ENTITY_NODE(6);
    Node.PROCESSING_INSTRUCTION_NODE(7);
    Node.COMMENT_NODE(8);
    Node.DOCUMENT_NODE(9);
    Node.DOCUMENT_TYPE_NODE(10);
    Node.DOCUMENT_FRAGMENT_NODE(11);
    Node.NOTATION_NODE(12);
    复制代码
    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
    <!-- 注释 -->
    <div class="box" id="box">123</div>
    <script>
    //【1】元素节点
    var nodeElement = document.body;
    console.log(nodeElement.nodeType,nodeElement.nodeType==Node.ELEMENT_NODE);//1 true
    
    //【2】元素特性在DOM中以Attr类型表示,是存在于元素的attributes属性中的节点,但却不是DOM文档树的一部分。
    var nodeAttribute = document.getElementById("box").attributes[0] ;
    console.log(nodeAttribute.nodeType,nodeAttribute.nodeType == Node.ATTRIBUTE_NODE)//2 true
    
    //【3】文本节点
    var nodeText = document.body.firstElementChild.firstChild;
    console.log(nodeText.nodeType,nodeText.nodeType == Node.TEXT_NODE)//3 true
    
    //【4】CDATASection类型只针对基于XML的文档,只出现在XML文档中,表示的是CDATA区域
    //【5】ENTITY_REFERENCE_NODE 实体引用名称节点
    //【6】ENTITY_NODE 实体名称节点
    //【7】PROCESSING_INSTRUCTION_NODE 处理指令节点
    
    //【8】注释节点
    var nodeComment = document.body.childNodes[1];
    console.log(nodeComment.nodeType,nodeComment.nodeType == Node.COMMENT_NODE)//8 true
    
    //【9】文档节点
    var nodeDocument = document;
    console.log(nodeDocument.nodeType,nodeDocument.nodeType==Node.DOCUMENT_NODE);//9 true
    
    //【10】文档类型节点
    var nodeDocumentType = document.firstChild;
    console.log(nodeDocumentType.nodeType,nodeDocumentType.nodeType==Node.DOCUMENT_TYPE_NODE);//10 true
    
    //【11】DocumentFragment文档片段类型在文档中没有对应的标记,是一种轻量级的文档。
    var nodeDocumentFragment = document.createDocumentFragment();
    console.log(nodeDocumentFragment.nodeType,nodeDocumentFragment.nodeType == Node.DOCUMENT_FRAGMENT_NODE)//11 true
    
    //【12】NOTATION_NODE DTD中声明的符号
    </script>
    </body>
    </html>
    复制代码
  • 相关阅读:
    求解一元二次方程
    常用电脑软件
    c语言的布尔量
    unsigned int数据类型最大数
    int数据类型的最大数
    习题6-8 统计一行文本的单词个数
    习题6-6 使用函数输出一个整数的逆序数
    习题6-5 使用函数验证哥德巴赫猜想
    习题6-4 使用函数输出指定范围内的Fibonacci数
    C#委托、泛型委托
  • 原文地址:https://www.cnblogs.com/lastorder/p/4859724.html
Copyright © 2020-2023  润新知