您的位置：首页 > Web前端 > JavaScript

Javascript学习笔记（10）

2016-05-03 16:04 405 查看

第十章 DOM

DOM是针对HTML和XML文档的一个API。

DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一个部分。

10.1 节点层次

DOM可以将任何HTML或XML文档描绘成一个有多层节点构成的结构。节点分为几种不同类型，每种类型分别表示文档不同的信息及标记。

每个节点都拥有各自的特点、数据和方法，另外的也与其他节点存在某种关系。

节点之间的关系构成了层次。

所有页面标记则表现为一个一特定节点为根节点的属性结构。

文档节点是每个文档的根节点。

文档元素是文档的最外层元素。

在HTML页面中，文档元素始终都是
<html>
元素。

12个节点类型。

10.1.1 Node类型

除了IE浏览器，其他浏览器都能访问到这个类型

Javascript中的所有节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法。

每个节点都有一个nodeType属性用于表明节点的类型。

节点类型有:

Node.ELEMENT_NODE(1);
Node.ATTRIBUTE_NODE(2);
Node.TEXT_NODE(3);
Node.CDATA_SECTION_NODE(4);
Node.ENTITY_REFERENCE_NODE(5);
Node.ENTITY_NODE(6);
Node.PROCESSING_INSTRUCTION_NODE(7);
Node.COMMENT_NODE(8);
Node.DOCUMENT_NODE(9);
Node.DOCUMENT_TYPE_NODE(10);
Node.DOCUMENT_FRAGMENT_NODE(11);
Node.NOTATION_NODE(12);


1.nodeName和nodeValue

了解节点的具体信息

2.节点关系

文档中的节点关系可以用父子关系表示

每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。

NodeList对象的独特之处在于它实际上是基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动反应在NodeList对象中。

3.操作节点

关于指针都是只读的，所以DOM提供了一些操作节点的方法。其中，最常用的方法是appendChild()，用于向childNodes列表的末尾添加一个节点

要把节点放在childNodes列表中的某个特定位置上，使用insertBefore(要插入的节点，参照节点)方法。

replaceChild(要插入的节点，替换的节点)

只想移除而非替换：

removeChild(要被移除的节点)

cloneNode()，用于创建调用这个方法的节点的一个完全相同的副本

true:深复制，复制节点及整个子节点树

false:浅复制，只复制节点本身

复制后并不会有父节点，因此成了孤儿

10.1.2 Document类型

nodeType : 9

nodeName : “#document”

nodeValue null

parentNode null

ownerDocument null

子节点是DoucmentType(最多1个)、Element(最多1个)、ProcessingInstruction或Comment
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航