第三章 DOM对象

“M”

map or model。 DOM代表着加载到浏览器窗口的当前网页。浏览器提供了网页的地图，通过js去读取这张地图。

“D”

节点树；DOM把网页文档转换为文档对象

"O"

自足的数据集合；属性和方法

• 用户定义对象
• 内建对象 Array Date Math
• 宿主对象 window document

window对象对应着浏览器窗口本身-BOM（浏览器对象模型）WOM

---

1. 节点

• 元素节点：DOM的原子
• 文本节点：内容
• 属性节点：title css class

2. CSS

• 继承是CSS技术中的一项强大功能。

• 节点树

• class
  .className{ font-style:italic; }//class属性值相同的所有元素定义同一样式 element.className{ text-transform:uppercase; }//为一种特定类型的元素定义特定样式

• id :添加独一无二的标识符 “挂钩”
  #idName{ border:1px solid white; background-color:#333; color:#ccc; padding:1em; }//独享的样式
  ：为包含在id里的其他元素指定样式

3. 获取元素：3种DOM方法

• getElementById

返回的是一个对象，可用typeof操作符来验证；
alert(typeof document.getElmentById("idName"));

• getElementsByClassName

H5新增的；返回对象数组；
查找带有多个类名的元素
document.getElementsByClassName("important sale");//与顺序无关，只要同时带有
用已有的DOM方法实现自己的getElementsByClassName
function getElementsByClassName(node, classname){ if(node.getElementByClassName){ //使用现有方法 return node.getElementByClassName(classname); }else{ var results = new Array(); var elems = node.getElementByClassName("*"); for(var i=0; i<elems.length; i++){ if(elems[i].className.indexOf(classname)!=-1){ results[results.length]=elems[i]; } }return results; } }//node表示DOM树中的搜索起点，此函数不适用于多个类名

• getElementsByTagName

返回一个对象数组，
alert(document.getElementsByTagName("tag").length);//获取数组长度
简化：把document.getElementsByTagName("tag")赋值给一个变量

var items = document.getElementsByTagName("tag");
允许把一个通配符作为它的参数
alert(document.getElementsByTagName("*").length);
结合使用
var shopping = document.getElementById("purchases"); var items = shopping.getElementsByTagName("*")

4. 盘点

• 一份文档就是一颗节点树
• 节点分为不同的类型：元素节点（每个元素节点都是一个对象）、属性节点、文本节点等
• getElementById 将返回一个对象，该对象对应着文档里的一个特定的元素节点。
• getElementsByTagName 和 getElementsByClassName 将返回一个对象数组，分别对应文档里的一组特定的元素节点。
• 每个节点都是一个对象，并天生带方法，通过预定义方法还可改变元素的属性

5. 获取和设置获得元素的属性

• getAttribute

不属于document对象，不能通过document对象调用；只能通过元素节点对象调用。object.getAttribute(attribute)
`//与getElementsByTagName合用
var paras = document.getElementsByTagName("p");

for(var i=0; i <paras.length;i++){
var title_text = paras[i].getAttribute("title");
if(title_text!=null){
alert(title_text);
}
}//获取每个<p>元素的titile属性`

• setAttribute

对节点属性进行修改
object.setAttribute(attribute,value);
** setAttribute做出的修改不会反映在文档本身的源代码里，这种“表里不一”的现象源自DOM的工作模式：先加载文档的静态内容，在动态刷新，动态刷新不影响文档的静态内容。对页面内容进行刷新却不需要在浏览器里刷新页面。**

---

nodeName
nodeValue
childNodes
nextSibling
parentNode
...