DOM的概念 DOM的节点分类 DOM获取各个节点的方法 DOM中常用的节点属性 脚本化CSS
一、DOM的概念
DOM（Document Object Model）文档对象模型 DOM是W3C(万维网联盟)定义的关于访问HTML和XML文档的标准。 document用于表现HTML页面当前窗体的内容,document对象包含一个节点对象，此节点对象就是包含每个单独页面的HTML元素，这就是W3C的DOM对象。
W3CDOM标准分为3部分：
- 核心 DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
【说明】 HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准，即操作HTML的元素
二、DOM树
加载HTML页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将 这种树型结构理解为由节点组成。
节点树中的节点彼此拥有层级关系。
- 父（parent）节点
父节点拥有任意数量的子节点
- 子（child）节点
子节点拥有一个父节点
- 兄弟（sibling）节点
同级的子节点被称为同胞（兄弟或姐妹）。同胞是拥有相同父节点的节点
- 根（root）节点
在节点树中，顶端节点被称为根（root） 根节点没有父节点 三、Document常用的属性
1 、document.title:设置文档标题等价于HTML的<title>标签 2、document.URL:获取当前文档的URL
四、DOM中获取节点的方法
1、获取HTML标签--HTMLElementObject
- getElementById("idname") ----根据元素id获取元素节点
- getElementsByTagName(“p”)----根据标签名称获取元素节点注意：返回值是集合
- getElementsByClassName() 获取相同class属性的节点列表（ IE8及以下不支持）
- getElementsByName()--获取相同名称的节点列表 注意： 不是所有标签都有name属性（form 表单元素有） 某些低版本浏览器会有兼容性问题
2、获取属性节点方法
- 获取官方定义的属性直接使用 oDiv.XXX 例如：oInput.value
- getAttribute() 获取节点自定义的属性的值
获取自定义属性时，oDiv.xxx 部分浏览器(火狐、谷歌)不支持，因此要采用这个方法来访问
- setAttribute() 设置自定义属性的值
- removeAttribute() 移除自定义属性 某些低版本浏览器不支持
四、元素节点常用的属性
- tagName ：表示元素节点的标签名
- id ：元素节点的 id属性值
- title ：元素节点的 title 属性值（鼠标悬停时的提示）
- className：元素节点的class属性值 (不可以使用class)
- innerHTML ：获取元素节点里的文本内容
- innerText：从对象的开始标签到结束标签的全部的文本内容
- outerHTML：除了包含innerHTML的全部内容外, 还包含对象标签本身。
五、样式表的属性---CSS脚本化
1、获取行间样式表的属性 语法：对象.style.属性名 对象.style["属性名"]
2、设置行间样式表的属性 语法：对象.style.属性名="属性值"
3、设置内部样式表外部样式表的属性 语法：对象.style.属性名="属性值";
4、获取内部样式表外部样式表的属性 IE: 对象.currentStyle["属性名"] 其他：window.getComputedStyle(对象，伪类)["属性名"] 注： 个别浏览器对第二个伪类不支持，第二个参数可以写成null window.getComputedStyle(obj,null)[attr]
获取内部样式表或者外部样式表中属性的属性值
【注】getComputedStyle与style的区别
- 只读与可写
getComputedStyle(ie下是currentStyle)方法是只读的，只能获取样式，不能设置；而element.style能读能写 - 获取的对象范围
getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的都显示出来）；而element.style只能获取元素style属性中的CSS样式。因此对于一个光秃秃的元素<p>，getComputedStyle方法返回对象中length属性值（如果有），而element.style就是0。
【课堂案例】 1、全选、取消全选； 2、进度条 3、随机数，随机颜色 4、图片轮播 5、导航下拉列表
