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

你可能感兴趣的:(javascript,前端,html)