节点操作

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()

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 3,690评论 0 7
  • 本章内容 理解包含不同层次节点的 DOM 使用不同的节点类型 克服浏览器兼容性问题及各种陷阱 DOM 是针对 HT...
    闷油瓶小张阅读 659评论 0 1
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,156评论 0 21
  • 1. 操作常用方法 1.1 访问/获取节点 1.2 创建节点/属性 1.3 添加节点 1.4 复制节点 1.5 删...
    cbw100阅读 2,429评论 0 2
  • 二零一六年八月十五日,王轲在回北京的火车上,从二月十五日到八月十五日,也刚好在一起半年了。那天本想写点什么,好歹留...
    江遥舟阅读 665评论 0 0