• home > webfront > SGML > xml >

    再谈BOM和DOM(2):DOM节点层次/属性/选择器/节点关系/操作详解

    Author:zhoulujun Date:

    DOM模型将整个文档看成一个树形结构,并用document对象表示该文档。NodeType属性来表明节点类型,element是包含在node里的,它的nodeType是1,Document文档对象元素查找,DOM节点关系说明,元素对象操作

    DOM模型将整个文档(XML文档和HTML文档)看成一个树形结构,并用document对象表示该文档。

    根据W3C DOM规范,DOM是HTML与XML的应用编程接口(API),DOM将整个页面映射为一个由层次节点组成的文件。有1级、2级、3级共3个级别。

    DOM规定文档中的每个成分都是一个节点(Node),可以说HTML文档是由节点构成的集合,常见DOM节点有:

    • 文档节点(Document):代表整个文档

    • 元素节点(Element):文档中的一个标记

    • 文本节点(Text):标记中的文本

    • 属性节点(Attr):代表一个属性,元素才有属性

    DOM节点类型

    NodeType属性来表明节点类型,下面列举12中节点类型


    节点类型描述
    1Element代表元素
    2Attr代表属性
    3Text代表元素或属性中的文本内容。
    4CDATASection代表文档中的 CDATA 部分(不会由解析器解析的文本)。
    5EntityReference代表实体引用。
    6Entity代表实体。
    7ProcessingInstruction代表处理指令。
    8Comment代表注释。
    9Document代表整个文档(DOM 树的根节点)。
    10DocumentType向为文档定义的实体提供接口
    11DocumentFragment代表轻量级的 Document 对象,能够容纳文档的某个部分
    12Notation代表 DTD 中声明的符号。

    DOM节点关系


    nodeType返回节点类型的数字值(1~12)
    nodeName元素节点:标签名称(大写)、属性节点:属性名称、文本节点:#text、文档节点:#document
    nodeValue

    文本节点:包含文本、属性节点:包含属性、元素节点和文档节点:null

    hasChildNodes包含一个或多个节点时返回true
    contains如果是后代节点返回true
    isEqualNode两个节点引用的是同一个对象:传入节点与引用节点的引用为同一个对象返回true
    isSameNode指的是两个节点是否是同一类型,具有相等attributes/childNodes等
    compareDocumentPostion确定节点之间的各种关系
    parentNode父节点
    parentElement父节点标签元素
    childNodes所有子节点
    children第一层子节点
    firstChild第一个子节点,Node 对象形式
    firstElementChild第一个子标签元素
    lastChild最后一个子节点
    lastElementChild最后一个子标签元素
    previousSibling上一个兄弟节点
    previousElementSibling上一个兄弟标签元素
    nextSibling下一个兄弟节点
    nextElementSibling下一个兄弟标签元素
    childElementCount第一层子元素的个数(不包括文本节点和注释)
    ownerDocument指向整个文档的文档节点

    节点与元素的区别

    element是包含在node里的,它的nodeType是1

    parentElement匹配的是parent为element的情况,而parentNode匹配的则是parent为node的情况。

    当父节点的nodeType不是1,即不是element节点的话,它的parentElement就会是null

    Document文档对象元素查找

    BOM核心为window,DOM核心为document(文档对象)

    获取Element对象

    getElementById()

    一个参数:元素标签的ID
    getElementsByTagName()一个参数:元素标签名
    getElementsByName()一个参数:name属性名
    getElementsByClassName()一个参数:包含一个或多个类名的字符串
    querySelector()接收CSS选择符,返回匹配到的第一个元素,没有则null
    querySelectorAll()接收CSS选择符,返回一个数组,没有则返回[]


    元素对象ELEMENT操作

    所有DOM对象都可以被认为是一个节点,除了CURD DOM树(appendChild/removeChild/replaceChild)外,还有其他操作


    nodeName访问元素的标签名
    tagName访问元素的标签名
    createElement()创建节点
    appendChild()末尾添加节点,并返回新增节点
    insertBefore()参照节点之前插入节点,两个参数:要插入的节点和参照节点
    insertAfter()参照节点之后插入节点,两个参数:要插入的节点和参照节点
    replaceChild()替换节点,两个参数:要插入的节点和要替换的节点(被移除)
    removeChild()移除节点
    cloneNode()克隆,一个布尔值参数,true为深拷贝,false为浅拷贝
    importNode()从文档中复制一个节点,两个参数:要复制的节点和布尔值(是否复制子节点)
    insertAdjacentHTML()

    插入文本,两个参数:插入的位置和要插入文本

    • "beforebegin",在该元素前插入

    • "afterbegin",在该元素第一个子元素前插入

    • "beforeend",在该元素最后一个子元素后面插入

    • "afterend",在该元素后插入


    节点属性attributes

    attributes

    获取所有标签属性
    getAttribute()获取指定标签属性
    setAttribute()设置指定标签属
    removeAttribute()移除指定标签属
    createAttribute创建属性


    参考文章:

    ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)https://www.cnblogs.com/best/p/8028168.html

    JavaScript学习总结(三)BOM和DOM详解 https://segmentfault.com/a/1190000000654274

    Javascript操作BOM和DOM详解(1) https://blog.csdn.net/openbox2008/article/details/85260063

    JavaWeb学习总结:JavaScript(BOM和DOM) https://blog.csdn.net/weixin_42384085/article/details/99807198

    HTML DOM Event 对象 https://www.w3school.com.cn/jsref/dom_obj_event.asp

    XML DOM - Element 对象 https://www.w3school.com.cn/xmldom/dom_element.asp

    JAVAScript中DOM与BOM的差异分析 https://www.cnblogs.com/fjner/p/5892325.html



    转载本站文章《再谈BOM和DOM(2):DOM节点层次/属性/选择器/节点关系/操作详解》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/SGML/xml/2020_0317_8347.html