DOM
DHTML：动态的HTML,不是新的语言，标准、规范，就是将现有的技术整合，让我们的网页能够实时变换-----DHTML=HTML+CSS+JS（DOM）
W3C DOM 标准分为3部分
- 1、核心DOM：针对任何结构化文档的标准模型，为任何符合W3C标准的文档提供了同一个操作方法
- 2、XML
- 3、HTML DOM
针对HTML文档提供的标准模型
提供的方式只能操作HTML文档
一、DOM树
HTML DOM将HTML文档看做一个倒挂的树状结构，在HTML文档中，所有的元素、属性、文本、注释都会被看做树状结构的一个节点。
document
由JS解释器负责创建，每个页面有且仅有一个document对象，document能对页面中所有的元素进行访问。
选取元素
主要是获取页面元素的相关方法
1、通过HTML选取元素
*（1）、通过ID选取元素
语法：document.getElementId('元素ID值')
在当前DOM树中，根据元素ID，获取具体子元素
返回：对应的元素对象，可以称之为DOM元素或者DOM对象
*（2）、通过标签名 选取元素
语法：node.getElementByTagName（‘标签名’）；
node：是一个元素对象
在node元素范围内，查找满足指定标签名的子元素
document.getElementsByTagName("a"); //所有的a标签
<div id="d1">
<span>span1</span>
<span>span2</span>
</div>
<span>span3</span>
var d1=document.getElementById("d1");
d1.getElementsByTagName("span");
返回：数组（动态集合）
*(3)、通过class选取元素
语法：element.className='important';
节点间关系
- [ ] 父节点（parent node）
- [ ] 子节点（child node）
- [ ] 兄弟节点（sibling） DOM中所有的节点对象，都具备一下属性
- [ ] 父子级关系
parentNode：获取当前节点的父节点
childNodes：获取当前节点下的所有子节点，返回数组
irstChild：获取第一个子节点
lastChild：获取最后一个子节点- [ ] 平行关系
previousSibling：获取上一个兄弟节点 nextSibling：获取下一个兄弟节 previousElementSibling：获取上一个 元素 兄弟节点 nextElementSibling：获取下一个 元素
兄弟节点
读取和修改节点对象
- 1、 元素内容
- [ ] html内容
属性：innerHTML
使用方法：元素对象。innerHTML
var msg=xx.innerHTML; //获取，并且包含里面的子标签 xx.innerHTML=""; //赋值- [ ] 文本内容
属性：textContent
作用：读取或设置HTML标记的文本内容，与HTML无关
注意：IE8显示有问题；
解决方案：属性：innerText- 2、元素的属性
属性集合：包含当前元素的所有属性
如何获取属性集合
属性：attributes
使用方法：DOM对象.attributes
返回：类数组对象
- [ ] 1、读取属性值：
1、element.attributes[下标].value
2、element.attributes["属性名"].value
3、element.getAttributeNode["属性名"].value
4、element.getAttribute("属性名")- [ ] 2、设置/修改属性值
1、element.setAttribute("属性名称","值");- [ ] 3、设置/修改属性值
1、元素.属性名="值";
- 3、元素样式
- [ ] 1、css定义方式
1、内联 2、内部 3、外部 2、元素样式 1、操作元素的行内样式
JS中最常用的操作是访问元素的内联样式
属性：style
返回：CSSStyleDeclaration类型的对象
该对象中，包含当前元素定义好的所有内联样式
通过样式属性名称获取或者修改当前元素的内联样式
CSS JS
width width
background-color backgroundColod
border-bottom-color borderBottomColor
获取样式：element.style.属性名 --> 返回的所有数据是string类型，如果有单位的话，也会将单位一起返回
设置样式：element.style.属性名="value",设置的值也是字符串，如果带单位，需要将单位一同设置 2、获取计算的样式
计算的样式：内部样式表，外部样式表中的属性，是经过计算的
计算的样式
DOM: document.defaultView.getComputedStyle(domyuansu).属性名;
IE:
元素对象.currentStyle.属性; 3、修改样式表中的样式
1、先获取样式表对象
var sheets = document.styleSheets;
var sheet=document.styleSheets[i]; 2、获取样式表中所有的样式规则
var rules=sheet.cssRules || sheet.rules;
3、获取规则集合中，包含要修改属性的规则
var rule = rules[i];
4、获取或设置规则中的属性值
rule.style.属性名="值";
