“M”
map or model。 DOM代表着加载到浏览器窗口的当前网页。浏览器提供了网页的地图，通过js去读取这张地图。
“D”
节点树；DOM把网页文档转换为文档对象
"O"
自足的数据集合；属性和方法
- 用户定义对象
- 内建对象 Array Date Math
- 宿主对象 window document
window对象对应着浏览器窗口本身-BOM（浏览器对象模型）WOM
- 节点
- 元素节点：DOM的原子
- 文本节点：内容
- 属性节点：title css class
- 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种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("*")
- 盘点
- 一份文档就是一颗节点树
- 节点分为不同的类型：元素节点（每个元素节点都是一个对象）、属性节点、文本节点等
- getElementById 将返回一个对象，该对象对应着文档里的一个特定的元素节点。
- getElementsByTagName 和 getElementsByClassName 将返回一个对象数组，分别对应文档里的一组特定的元素节点。
- 每个节点都是一个对象，并天生带方法，通过预定义方法还可改变元素的属性
- 获取和设置获得元素的属性
- 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
...
网友评论