美文网首页
节点操作

节点操作

作者: 787518d9b65a | 来源:发表于2018-06-03 06:49 被阅读0次

    Node类型

    JavaScript中所有节点类型都继承自Node类型。

    每个节点都有一个nodeType属性,用于表明节点的类型,共有12个数值常量。

    节点信息

    nodeName和nodeValue属性可以了解节点的信息。

    节点关系

    每个节点都有一个childNodes属性,其中包含一个NodeList对象。可以通过方括号语法访问NodeList的值,而且这个对象也有length属性,但并不是Array的实例。也可以通过item()方法访问。Array.prototype.slice()方法可以将其转换为数组。

    parentNode属性,指向文档树中的父节点。previousSibling和nextSibling属性,可以访问同一列表中的其他节点。当列表中只有一个接待你,则这两个属性的值都为null。

    操作节点

    appendChild()方法用于向childNodes列表的末尾添加一个节点。

    insertBefore()方法可以把节点放在childNodes列表中某个特定的位置上。这个方法接受两个参数:要插入的节点和作为参照的节点。插入和,被插入的节点会变成参照节点的前一个同胞节点,同时被方法返回。如果参照节点是null,则与appendChild()相同。

    replaceChild()接受两个参数:要插入的节点和要替换的节点。

    removeChild()接受一个参数,要移除的节点。

    Document类型

    document对象是HTMLDocument(继承自Document类型)的一个实例,表示整个HTML页面。document对象是window对象的一个属性,将其视作全局对象访问。

    • nodeType的值为9;
    • nodeName的值为“#document”;
    • nodeValue的值为null;
    • parentValue的值为null;
    • ownerDocument的值为null;

    其子节点可能是一个DocumentType(最多一个)、Element(最多一个)等

    document内置访问子节点的documentElement属性,始终指向HTML页面中的<html>元素。还有body属性直接指向<body>元素。

    文档信息属性:title、URL、domain、referrer

    查找元素:getElementById()、getElementsByTagName()、getElementsByClassName()。HTMLCollection包含namedItem()fangfa1;HTMLDocument类型包含getElementsByName()方法。

    此外,document还包含特殊集合。

    DOM一致性检测:document.implementation属性是为此提供相应功能和信息的对象。hasFeature()接受要检测的DOM功能的名称和版本号这两个参数。

    文档写入:write()、writen()、open()、close()

    Element类型

    • nodeType的值为1;
    • nodeName的值为元素的标签名;
    • nodeValue的值为null;
    • parentValue的值为Document或Element;

    其子节点可能是Element、Text、Comment等

    操作特性:getAttribute()、setAttribute()、removeAttribute()

    创建元素:document.createElement()

    Text类型

    • nodeType的值为3;
    • nodeName的值为“#text”;
    • nodeValue的值为节点所包含的文本;
    • parentValue是一个Element;
    • 没有子节点

    可以通过nodeValue属性或者data属性访问Text节点中包含的文本。

    创建文本节点:document.createTextNode(),创建新文本节点的同时,也会为其设置ownerDocument()属性。

    将相邻文本节点合并:normalize()

    分割文本节点:splitText()

    相关文章

      网友评论

          本文标题:节点操作

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