JavaScript操作DOM对象

---

一、DoM操作

DOM是Document Object Model的缩写，即文档对象模型，是基于文档编程的一套API接口。

1.DOM操作分类

使用JavaScript操作DOM时通常分为三类：

2.节点和节点的关系

DOM是以树状结构组织的HTML文档，根据DOM概念，我们可以知道，HTML文档中每个标签或元素都是一个节点，在DOM中是这样规定的。

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

节点的层次关系：

3.访问节点

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

使用getElement系列方法访问指定节点

getElementById()
getElementsByName()
getElementsByTagName()

根据层次关系访问节点

节点属性：

节点属性(节点[包含元素，文本，属性，注释])

element属性

element属性(结点<标签元素>)

4.节点信息

节点是DOM层次结构中的任何类型的对象的通用名称，每个节点都拥有包含着关于节点某些信息的属性，这些属性如下：

• nodeName（节点名称）
• nodeValue（节点值）
• nodeType（节点类型）
  

二、操作节点

1.操作节点的属性

HTML DOM提供了获取及改变节点属性值的标准方法：

getAttribute("属性名");	//用来获取属性的值
setAttribute("属性名","属性值"）;	//用来设置属性的值

2.创建和插入节点

使用JavaScript操作DOM有很多方法可以创建或增加一个新节点，主要方法如下：

3.删除和替换节点

使用Core HTML删除和替换节点的方法如下：

4.操作节点样式

style属性

在HTML DOM中，style是一个对象，代表一个单独的样式声明，可通过应用样式的文档或元素访问style对象

HTML元素.style.样式属性="值";

style对象的常用属性

常用事件

className属性

在HTML DOM中，className属性可设置或返回元素的class样式

HTML元素.className="样式名称";

5.获取元素的样式

HTML元素.style.样式属性;

document.defaultView.getComputedStyle(元素,null).属性;

HTML元素. currentStyle.样式属性;

三、获取元素位置

使用currentStyle或getComputedStyle()可以获得元素的属性值，即可以获取元素在网页中的位置。

1.元素属性的应用

//标准浏览器
document.documentElement.scrollTop;
document.documentElement.scrollLeft;
或着
//Chrome
document.body.scrollTop;
document.body.scrollLeft;

---