JavaScript操作DOM对象
JavaScript操作DOM对象
DOM操作
DOM是Doument Obiect Model的编写，即文档对象模型、 是基于文档编程的一 套API接口.1998年，W3C发布了第一级的DOM规范，这个规范允许访问和操作HTM页面中的每个单独元素，如网页的表格、图片、文本、表单元素等。由于大部分主流的浏览器都执行了这个标准。因此基本解决了浏览器兼容性的问题。
使用JavaScript操作DOM时分为三个方面: DOM Core (核心)，HTML-DOM和CSS-DOM。通过这些标准，开发人员可以让网页真正地动起来，动态地增加、修改、删除数据，使用户与计算机的 交互更加便捷，交互也更加丰富。
1.DOM操作分类
使用JvaSceaep操作DOM时通常分为三类DOM Core(核心) ，HTML-DOM，CSS-DOM。
- DOM-Core
DOM Core 不是JavaScript的专属品，任何一种支持DOM的编程语言都可以使用它，它的用途不仅限与处理一种使用标记语言编写出来的文档，如HTML。
- HTML-DOM
它提供了一些更简单的标记来描述各种HTML元素的属性，相对于DOM Core获取对象、属性而言，当使用HTML-DOM时，代码通常较为简短，只是它的应用范围没有DOM Core广泛，仅适用于处理HTML文档。
- CSS-DOM
针对CSS的操作，在JavaScript中，CSS-DOM技术的主要作用时获取和设置style对象的各种属性，即CSS属性。
2.节点和节点关系
DOM是以树状结构组织的HTML文档，HTML文档中的每个标签或元素都是一个节点，在DOM中是这样的规定的：
- 整个文档是一个文档节点。
- 每个HTML标签是一个元素节点。
- 包含在HTML元素中的文本是文本节点。
- 每个HTML属性是一个属性节点。
- 注释属于注释节点。
使用父（parent），子（child） 和同胞（sibling）等术语来措述这些节点的层次关系，父节点拥有子节点，同级的子节点被称为同胞或兄弟节点，它们的关系如下：
- 在节点树中，顶部节点被称为根（root），如<htmI>节点
- 每个节点都有父节点，除了根（它没有父节点）如<head>和<body>的父节点都是<hm>，文本节点 “DOM应用” 的父节点是<p>节点。
- 一个节点可以拥有任意数量的子节点如<body>节点的子节点有<img>，和<p>。
- 同胞节点是拥有相同父节点的节点， 如<p>，<h>就是兄弟节点，它们的父节点均为<body>节点。
3.访问节点
使用DOM Core访问HTML文档的节点主要有两种方式：
1）：使用getElement系列方法访问指定节点，
2）：根据节点的层次关系访问节点。
1.使用getElement系列方法访问指定节点：
- getElementById():返回按id属性查找的第一个对象的引用。
- getElementsByName():返回按带有指定名称name查找的对象的集合，返回的是元素数组。
- getElementsByTagName():返回带有指定标签名Tag Name查找的对象的集合，返回的是元素数组。
2.根据节点的层次关系访问节点：
1.节点属性：（节点：包含元素，文本，属性，注释）
| 属性名称 | 描述 |
|---|---|
| parentNode | 返回节点的父节点 |
| chiildNodes | 返回子节点集合 |
| fistChild | 返回节点的第一个子节点，最普遍的用法是访问该元素的文本信息 |
| lastChild | 返回节点的最后一个子节点 |
| nextSibing | 下一个节点 |
| previousSibling | 上一个节点 |
2.element属性：（结点：标签元素）
| 属性名称 | 描述 |
|---|---|
| fistChildElementChild | 返回节点的第一个子节点，最普遍的用法是访问该元素的文本信息 |
| lastElementChild | 返回节点的最后一个子节点 |
| nextElementSibing | 下一个节点 |
| previousElementSibing | 上一个节点 |
注意：在IE下支持 firstChild、lastChild、 previousibling、 nextSibling, 但是在FireFox 下由于，它会把标签之间的空格、换行等当成文本节点，因此为了准确地找到相应的元素，使用 firstElementChild、lastElementChild、 previousElementSibling、 nextElementSibling来兼容浏览器。
4.节点信息
- nodeName(节点名称)
- nodeValue(节点值)
- nodeType(节点类型)
节点类型：
| 节点类型 | NodeType值 |
|---|---|
| 元素element | 1 |
| 属性attr | 2 |
| 文本text | 3 |
| 注释comments | 8 |
| 文档document | 9 |
操作节点
1.操作节点属性
HTML DOM提供了获取及改变节点属性值的标准方法：
- getAttribute(“属性名”)；
getAttribute("属性名");
//用来获取属性的值
- setAttibute(“属性名”,“属性值”)；
setAttibute("属性名","属性值");
//用来设置属性的值
2.创建和插入节点
创建的插入节点的方法：
| 名称 | 描述 |
|---|---|
| createElement(tagName) | 创建一个标签名为tagName的新元素节点 |
| A.appendChild(B) | 把B节点追加至A节点的末尾 |
| inserBefore(A,B) | 把A节点插入B节点之前 |
| cloneNode(deep) | 复制某个指定的节点 |
- insertBefore(A,B)中有连个参数，A是必选项，表示新插入的节点，B是可选项，表示新节点被插入B节点的前面
- cloneNode(deep)中的参数deep为布尔值，若deep值为true，则复制该节点及该节点的所有子节点，若deep值为false，则只复制该节点和其属性
3.删除和替换节点：
| 名称 | 描述 |
|---|---|
| removeChild(node) | 删除指定的节点 |
| replaceChild(newNode,oldNode) | 用其他的节点替换指定的节点 |
4.操作节点样式
在JavaScript中提供了两种动态改变样式属性的：
1）：style属性
2）：className属性
1.style属性：
//style属性的语法
HTML元素.style.样式属性="值";
//例如：
document.getElementById("titles").style.color="#ff0000"
style对象的常用属性：
style常用的事件：
| 名称 | 说明 |
|---|---|
| onload | 一个页面或一幅图像完成加载 |
| onlick | 鼠标单击某个对象 |
| onmouseover | 鼠标指导移到某个元素上 |
| onkeydown | 某个键盘按键被按下 |
| onchange | 域的内容被改变 |
2.className属性：
//className属性的语法：
HTML元素.className="样式名称"
4.获取元素样式
1.内联样式
//语法：
HTML元素.style.样式属性;
//只能拿内联样式
2.currentStyle对象（只读）
//语法：
HTML元素.currentStyle.样式属性;
//currentStyle属性是只读属性，局限于IE浏览器
3.getComputedStyle()方法
//语法：
document.defaultView.getComputedStyle(元素,null).属性;
//IE浏览器不支持