首页 > 代码库 > DOM 文档对象模型+倒计时
DOM 文档对象模型+倒计时
DOM 文档对象模型
DOM (document object model) 文档对象模型，它定义了操作文档对象的接口。
DOM 把一份html文档表示为一棵家谱树，使用parent(父), child(子), sibling(兄弟)等记号
来表明家庭成员之间的关系。
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
节点例子：
<p title="这里显示提示信息">这是一个段落</p>
二、获取文档对象
1. querySelector()
HTML5新加入的方法，通过传入合法的CSS选择器，即可获取符合条件的第一个元素
例：document.querySelector(“#test”); //返回id为test的首个div
2. querySelectorAll()
HTML5新加入的方法，通过传入合法的CSS选择器，即可获取所有符合条件的元素，返回对象数组
例：document.querySelectorAll(‘div.foo’)；//返回所有带foo类样式的div元素对象
要注意：使用这上面两个方法无法查找带伪类状态的元素，比如querySelector(‘:hover’)不会得到
期结果。
3.getElementById()
这个方法返回一个与给定id属性值的元素节点相对应的对象。
例：document.getElementById(‘box’);
4.getElementsByTagName()
这个方法返回一个对象数组。每个对象分别对应着文档里给定标签的一个元素。
例：document.getElementsByTagName(‘li’);
5.getElementsByName()
通过 name 获取一个对象数组
二、间接引用节点（扩展）
除了可以直接引用节点，还可以通过节点间的关系来引用相对节点。
1.引用子节点
每个节点都有一个childNodes集合属性，类型是数组对象，表示该节点的所有子节点
的集合。这些子节点按照其在文档中出现的顺序排列，因此可以通过索引来依次访问各个子节
点。
例： document.childNodes[0]; //引用文档的根节点
document.childNodes[0].childNodes[0] //引用<head>节点
document.childNodes[0].childNodes[1] //引用<body>节点
除了使用childNodes属性，还有两个属性可以用于引用子节点，分别是：
element.firstChild;
element.lastChild;
它们分别表示第一个子结点和最后一个子结点。
2.引用父节点
html的节点层次是一个树状结构，除了根节点外，每个节点都仅有一个父节点
，可以由parentNode属性来引用
element.parentNode; //引用父节点
3.引用兄弟节点
属于同一个文档层次的节点称为兄弟节点，有两个属性可以用于兄弟节点间
引用，分别是：
element.nextSibling; //引用下一个兄弟节点
element.previousSibling; //引用上一个兄弟节点
三、获取节点信息（扩展）
在获得一个节点的引用后，有一些方法可以获得该节点的信息。
1.nodeName 获取节点名称
语法： Node.nodeName;
不同的类型的节点，nodeName的返回值有所差异：
元素节点：返回标记名称;
属性节点：返回属性名称;
文本节点：返回文本 #text
2.nodeType 获取节点类型
语法： Node.nodeType;
元素节点：返回 1
属性节点：返回 2
文本节点：返回 3
3.nodeValue 获取节点的值
语法： Node.nodeValue;
元素节点：返回null
属性节点：返回节点值
文本节点：返回文本内容
四、处理属性节点
1. getAttribute 获取节点属性值
object.getAttribute(attribute)
例： var a = document.getElementsByTagName(‘a’);
for(var i=0; i<a.length; i++){
alert(a[i].getAttribute(‘title’));
}
2.setAttribute() 设置节点属性值
object.setAttribute(attribute, value)
例：var link = document.getElementById(‘link’);
link.setAttribute(‘title’, ‘链接提示信息’);
五、处理文本节点
1. node.innerHTML
获取该节点下的包含HTML标签的文本内容
例： var body = document.querySelector(‘body’);
alert(html.innerHTML);
2. node.textContent
获取该节点下的纯文本内容
例： var body = document.querySelector(‘body’);
alert(html.textContent);
六、因浏览器而异的空白节点(扩展)
ie浏览器和firefox浏览器对空白节点的处理不同，ie浏览器会忽略这些节点，而Firefox浏
览器则认可这些节点。
处理方法：
1.避免在文档中出现文本节点。
2.在使用前先删除其中的空白节点。
function cleanWhitespace(element){
for(var i=0; i < element.childNodes.length; i++){
var node = element.childNodes[i];
//判断是否是空白节点，如果是则删除该节点
if(node.nodeType == 3 && !/\S/.test(node.nodeValue){
node.parentNode.removeChild(node);
}
}
}
DOM 总结：
一份文档就是一棵树;
节点分为不同的类型，分别是：元素节点，属性节点，文本节点;
每个节点都是一个对象;
getElementById()方法将返回一个对象，该对象对应着文档里的一个元素节点;
getElementsByTagName()方法返回一个对象数组，它们分别对应着文档里的元素节点;
今天的一个作业：一个京东倒计时效果
效果图：
代码入下：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> table{ background: #f00; font-size: 24px; } td{ width: 46px; height: 40px; text-align: center; } .img{ background: url(img.gif); } </style> </head> <body> <table border="1"> <tr> <td id="day" class="img"></td> <td>天</td> <td id="hour" class="img"></td> <td>时</td> <td id="min" class="img"></td> <td>分</td> <td id="sec" class="img"></td> <td>秒</td> </tr> </table> <script type="text/javascript"> var setin=setInterval(function(){ //定义终止时间 var endtime = new Date(‘September 9, 2016 12:00:00‘), //当前时间 nowtime = new Date(), //计算终止时间到当前时间的时间差，毫秒数 second=parseInt((endtime.getTime()-nowtime.getTime())/1000); //当时间差小于0的时候,定时器停止循环 //或者可以写成： //if(second<0){second=0;} if(second<=0){ clearInterval(setin); } //计算天，小时，分钟，秒 var d=parseInt((second/3600)/24), h=parseInt((second/3600)%24), m=parseInt((second/60)%60), s=parseInt(second%60); //当时间为个位数的时候，前面添加一个0 if(d<10){ d="0"+d; }; if(h<10){ h="0"+h; }; if(m<10){ m="0"+m; } if(s<10){ s="0"+s; } document.getElementById("day").innerHTML=d; document.getElementById("hour").innerHTML=h; document.getElementById("min").innerHTML=m; document.getElementById("sec").innerHTML=s; },1000); </script> </body></html>
DOM 文档对象模型+倒计时