<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>
