JavaScript操作DOM对象

一、DOM操作

DOM：文档对象模型，是基于文档编程的一套API接口

1.DOM操作分类

使用JavaScript操作DOM时通常分为三类：DOM Core（核心）、HTML-DOM和CSS-DOM

1.节点和节点关系

DOM是以树状结构的HTML文档，根据DOM概念，HTML文档中的每个标签或元素都是一个节点。

• 整个文档是一个文档节点
• 每个HTML标签是一个元素节点
• 包含在HTML元素中的文本是文本节点
• 每个HTML属性是一个属性节点
• 注释属于注释节点

使用父（parent）、子（child）和同胞（sibling）等术语来描述这些节点的层次关系，父节点拥有子节点，同级的子节点被称为同胞或兄弟节点，关系如下：

l 在节点树中，顶端节点被称为根（root）

l 每个节点都有父节点、除了根（它没有父节点）

l 一个节点可拥有任意数量的子

l 同胞是拥有相同父节点的节点

1.访问节点

使用DOM Core访问HTML文档的节点主要有两种方式，一种是使用getElement系列方法访问指定节点，另一种是根据节点的层次关系访问节点。

节点属性：

Childnodes：返回一个数组，这个数组由給定元素节点的子节点构成。

Fristchcild：返回第一个子节点

Lastchild:它返回最后一个子节点

Parentnode:它返回一个给定节点的父节点

Nextsibli