节点操作

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页面中的元素。还有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()

你可能感兴趣的:(节点操作)