2020.9.1陈悦玲

DOM树是内存中存储网页中所有内容的树结构,网页中的一切内容都是节点(Node)对象,而一切节点对象都存储在一个树形结构中。浏览器每扫描到一项网页内容,就会自动在DOM树上对应位置创建一个节点对象,来保存这项内容

  • 节点对象

    • 元素节点对象

    封装一个元素及其子内容的节点对象

    • 文本节点对象

    封装一个文本内容的节点对象

为什么使用DOM树?

因为网页中的内容都是有上下级包含关系的,而树形结构是最好的保存上下级包含关系的结构

DOM树结构

当浏览器读取到一个网页时,会先在内存中创建一个树根节点对象 “ document ” ,然后开始遍历网页内容中的每个元素和文本。每遍历到一项内容,就创建一个节点对象,挂到DOM树上。网页中一切内容都是节点(Node)对象,一切节点对象都存储在一个树型结构中

  • 根节点

    document

  • 节点对象三大属性

    • nodeType

    节点的类型,nodeType属性返回节点类型的常数值。不同的类型对应不同的常数值
    包含:
    文档节点:document    //9
    元素节点:element        //1
    属性节点:attribute          //2
    文本节点:text         //3
    问题:无法进一步判断元素的名称

    • nodeName

    节点名称,进一步判断元素的名称
    包含:
    文档节点:document   // #document
    元素节点:element       // 全大写标签名,例如:“BODY/HEAD”
    属性节点:attrribute        // 属性名,例如:“href”
    文本节点:text        // #text

    • nodeValue

    节点值
    包含:
    文档节点:document   // null
    元素节点:element       // null
    属性节点:attribute     // 属性值,例如:“#”
    文本节点:text        // 文本内容

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1