<html> <head> <title></title> <style> .hover{font-weight: bold;font-style: italic;} .intro{font:italic 50px Trebuchet MS;} </style> </head> <body> <P id="example" style="font:italic 1em Trebuchet MS;color:#bbbbbb;"> html 结构层, css 表现层, javascript 行为层. 文档中每个元素都是一个对象,每个对象又有各种属性,onload 1.反应元素在节点树上的位置信息.parentNode,nextSibling,previousSlbling,childNodes,firstChild,lastChild 2.元素本身的信息.nodeType,noteName,nodeValue 3.style属性(是一个对象),只有内嵌的style样式可以用dom style 属性去访问.但是dom 可以设置 style.通常对一些非现代浏览器不支持的css选择器[例: nth-child(odd),nth-child(even) ],可以用dom来设置样式,见stripeTable 4.但是用行为层干表现层的活,总归不太好.所以我们可以直接修改class属性,见highlightRows 5.通过setAttribute("class",""),或者.classsName 的技巧有个缺陷,它将直接覆盖class而不是追加.见addClass 6.抽象styleElementSiblings,由styleHeaderSiblings 抽象而来 </P> <h1>test</h1> <p>test</p> <table id="tableTest"> <thead> <tr> <th>th1</th> <th>th2</th> <th>th3</th> </tr> </thead> <tbody> <tr> <td>td1</td> <td>td2</td> <td>td3</td> </tr> <tr> <td>td1</td> <td>td2</td> <td>td3</td> </tr> <tr> <td>td1</td> <td>td2</td> <td>td3</td> </tr> </tbody> </table> <script> function addLoadEvent(func){ var oldonload = window.onload; if (typeof oldonload != 'function') { window.onload = func; }else{ window.onload = function(){ oldonload(); func(); } } } function getStyle(){ var para = document.getElementById("example"); alert(typeof para.nodeName); alert(typeof para.style); alert(para.style.fontSize); } /*找到下一个同级元素节点*/ function getNextElement(node){ if (node.nextSibling){ var nextNode = node.nextSibling; if (nextNode.nodeType == 1) { return nextNode; }else{ return getNextElement(nextNode); } } return null; } function styleHeaderSibling(){ var headers = document.getElementsByTagName("h1"); var elem; for (var i = 0,j = headers.length;i<j; i++) { elem = getNextElement(headers[i]); if (!elem) continue; elem.style.fontWeight = "italic"; elem.style.fontSize = "2em"; } } // addLoadEvent(styleHeaderSibling); /*更具通用性*/ function styleElementSibling(tag,classValue){ var elems = document.getElementsByTagName(tag); var elem; for (var i = 0,j = elems.length;i<j; i++) { elem = getNextElement(elems[i]); if (!elem) continue; addClass(elem,classValue); } } addLoadEvent(function(){ styleElementSibling("h1","intro") }); function stripeTable(){ var table = document.getElementById("tableTest"); var odd = false; var rows = table.getElementsByTagName("tr"); for (var i = 0,j = rows.length;i<j; i++) { if (odd) { rows[i].style.backgroundColor = "royalblue"; odd = false; }else{ odd = true; } } } addLoadEvent(stripeTable); function highlightRows(){ var rows = document.getElementsByTagName("tr"); for (var i = 0,j = rows.length;i<j; i++) { rows[i].onmouseover = function(){ this.className = "hover"; } rows[i].onmouseout = function(){ this.className = ""; } } } addLoadEvent(highlightRows); function addClass(node,classValue){ if(!node.className){ node.className = classValue; }else{ node.className = node.className + " " + classValue; } } </script> </body> </html>