JavaScript操作DOM对象

DOM操作

DOM是Document Object Model即文档对象模型。

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应

DOM操作分类

使用JavaScript操作DOM时分为三个方面：DOM Core（核心），HTML—DOM和CSS—DOM，通过这些标准，开发人员可以让网页动起来。

1. DOM Core

DOM Core 不是JavaScript的专属品，任何一种支持DOM的编辑器语言都可以使用它，它的用途不仅限于处理一种使用标记语言编写出来的文档如HTML文档。getElementById()，getElementByTagName()等方法都是 DOM Core的组成部分
，它的用途不仅限于一种使用标记语言编写出来的文档，如HTML。

2. HTML—DOM

获取DOM模型中的某些对象、属性、既可以使用DOM-Core实现，也可以使用HTML-DOM实现， 相对于DOM Core获取对象、属性而言，当使用HTML-DOM时，代码通常较为简单，只是它的应用范围没有DOM Core广泛，仅适用于处理HTML文档

3. CSS—DOM

CSS-DOM是针对CSS的操作，在JavaScript中，CSS-DOM技术的主要作用是获取和设置Style，对象的各种属性，即CSS属性，通过改变style对象的各种属性，可以使用网页呈现出各种不同的效果。

节点和节点关系

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

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

访问节点

使用DOM Core 访问HTML文档节点主要有两种方式

1. 使用getElement系列方法访问指定节点：getElementById( )、getElementsByName( )、getElementsByTagName( )
2. 根据层次关系访问节点

节点属性

element属性

注意

在IE下支持firstChild，lastChild，previousSibling，nextSibling，但是在FireFox下由于它会把标签之间的空格，换行等当成文本节点，因此为了准确的找到相应的元素，使用 firstElementChild，lastElementChild，previousElemenSibilant，nextElementSibilant来兼容浏览器

节点信息

1. nodeName（节点名称）

• 元素节点显示标签名称
• 属性节点显示属性名称
• 文本节点显示#text
• 文档节点显示#document

2. nodeValue（节点值）

• 显示对应的节点的值

3. nodeType（节点类型）

• 返回节点的类型，是一个只读属性

节点类型

操作节点

1.操作节点属性

• getAttribute(“属性名”)：获取属性的值
• setAttribute(“属性名”,“属性值”)：用来设置属性的值

经验

当时用getAttibute方法读取属性值时，如果属性不存在，则getAttribute返回null

创建和插入节点

• insertBefore(A,B)
  A是必选的，B是可可选的
• deep的值有true和false
  true是复制本身加所有子节点false是只复制自己本身

删除节点

操作节点样式

1. style属性

	HTML元素.style.样式属性＝"值"

	document.getElementById("titles").style.color="#ff0000";
	document.getElementById("titles").style.fontSize="25px ";	

在JavaScript - 表示减号，如果样式属性的名称带有 -，则要省去 - 减号，并且 - 后的首字母大写。

常用属性

2. clssName属性

   clssName属性可设置或返回元素的class样式

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

3. 获取元素样式

	HTML元素.style.样式属性;

	HTML元素. currentStyle.样式属性;

获取元素位置

document.documentElement.scrollTop;
document.documentElement.scrollLeft;
或者
document.body.scrollTop;
document.body.scrollLeft;

总结