另一个网友整理了很多书中的代码:http://www.cnblogs.com/jingangel/archive/2013/01/03/2843505.html
1. 三位一体的网页
浏览器看到的网页有三部分构成:结构层(HTML)、表示层(CSS)、行为层(javascript).
2. style属性
每个元素有各种各样的属性,比如位置属性:parentNode,childNOdes, previousSibling;元素本身信息属性:nodeType, nodeName;所有元素都有style属性,包含元素的样式。
var obj = document.getElementById("obj"); alert(obj.nodeName);// alert(typeof obj.type);//object,是一个对象 alert(typeof obj.nodeName);//string
举例:
//局限style只能获取内部样式,不能获取样式文件中的样式 element.style.color;//颜色 element.style.fontFamily;//返回字体,中间爱你没有下划线 element.style.fontSize;//字体大小
3. 获取样式
{ font-size: 1em; } #第二种,根据样式名称 .findprint{ font-size: 1em; } #第三种,根据元素的id #intro{ font-size: 1em; }
4. 奇偶选择
tr:nth-child(odd){background-color:#ffc;} tr:nth-child(even){background-color:#fff;}
5. 响应事件,CSS可以实现,dom可以利用onmouseover事件来实现
#鼠标移过 a:hover{ color:#c60; } tr:hover{ color:#c60; font-weight: bold; }
function highlightPage(){ if(!document.getElementsByTagName) return false; if(!document.getElementById) return false; var headers = document.getElementsByTagName('header'); if(headers.length == 0) return false; var navs = headers[0].getElementsByTagName('nav'); if(navs.length == 0) return false; var links = navs[0].getElementsByTagName('a'); for(var i=0; i<links.length; i++){ linkurl = links[i].getAttribute('href'); if(window.location.href.indexOf(linkurl)!=-1){ links[i].className = "now"; var linktext = links[i].lastChild.nodeValue.toLowerCase(); document.body.setAttribute("id",linktext); } } } addLoadEvent(highlightPage);
6. className属性
obj.classNme = "intro"; elem.className += " intro";//追加