DOM

 

1、DOM概述
1、DHTML
Dynamic HTML ：动态的HTML
DHTML 不是技术 标准 规范，是将现有的网页技术(html,css,javascript)进行整合运用。通过该理念，要求能在 网页被 下载后仍然能够实现 “实时变换页面元素”的效果
DHTML功能：
1、动态改变页面元素
2、与用户进行交互，从而提升用户体验
3、DHTML 包含 ：BOM 与 DOM

DHTML = HTML + CSS + Javascript
2、BOM 与 DOM
1、BOM
Browser Object Model 浏览器对象模型
直接操作和访问浏览器窗口的，比如 ：历史记录、地址栏信息、状态栏信息。能够让Javascript 与 浏览器 产生交互行为。
BOM 没有相关的标准的，但所有的浏览器都支持。
2、DOM
Document Object Model 文档对象模型
直接操作 html 文档， 与浏览器无关
定义了访问和操作html文档的标准方法
由W3C定义相关标准
3、DOM概述
W3CDOM标准三部分：
1、核心DOM ：针对任何 结构化文档(html,xml) 的标准模型
2、XML DOM ：针对XML文档的标准模型，只能操作XML文件
3、HTML DOM :针对 HTML文档的标准模型，只针对HTML文档

页面被加载时，浏览器会自动创建页面的文档对象模型
HTML页面中所有的节点(标记、属性、文本)组成一个文档树（DOM树，节点树）

document对象 是 DOM树的根(根对象)

DOM发展过程：
共三级：
DOM 1级 ：定义基本的顶层操作方法
DOM 2级 ：
Core ：扩展了更多的方法和属性
Style ：允许操作HTML元素的样式
Traversal and Range :遍历DOM树的方法
Event ：定义标准化事件,IE8不支持
DOM 3级 ：扩充了新方法、属性、新类型
4、DOM树
根 ： document
文档中的 元素、属性、文本、注释都是树中的节点
元素(HTML) : Element Node
文本 ：Text Node
属性 ： Attribute Node
注释 ：Comment Node
2、DOM操作
1、选取元素
根据DOM提供的方法，获取页面中的一个/一组元素
1、通过ID获取元素
document.getElementById("元素id值");
<a href="http://www.baidu.com" id="anchor">百度</a>

var a = document.getElementById("anchor");
2、通过 标签名 获取一组元素
node.getElementsByTagName("标签名");
node : 已经获取的元素节点对象(DOM对象)
注意：返回值为数组
3、通过 class 值获取页面元素
node.getElementsByClassName("className");
注意：返回值为数组
作用：根据class属性值，获取一组元素对象
eg:05-getElementsByClassName.html

4、 exer:各行变色：偶数行改变背景颜色
1、获取 表主题（tbody）中所有tr
2、循环遍历每个tr元素（索引从零开始）
1、判断tr的索引是奇数还是偶数
2、如果是偶数行，指定一个 类选择器
4、节点关系
属性：
父节点：parentNode
子节点：
获取第一个子节点：firstChild
获取最后一个子节点：lastChild
获取所有子节点：childNodes

获取第一个元素节点:firstElementChild
获取最后一个元素节点:lastElementChild

注意：属性节点，不能通过子节点的方式直接获取到的。
兄弟节点：
previousSibling : 上一个兄弟节点
nextSibling : 下一个兄弟节点