javascript DOM

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标签

    

       span1
       span2
    
    span3
    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.属性名="值";