JavaScript DOM编程艺术第九章学习笔记网页的三层结构通过CSS而不是DOM去设置样式，js直接更新clas

网页的三层结构

结构层：超文本标记语言(HTML)
表示层:层叠样式表(CSS)
行为层:JavaScript和文档对象模型(DOM)

通过CSS而不是DOM去设置样式，js直接更新classname，行为层和表示层分离

通用的载入函数

function addLoadEvent(func){
	var oldonload = window.onload;
	//判定载入type的是不是函数
	if(typeof window.onload !="function"){
		window.onload = func;
	}else {
		window.onload = function(){
		oldonload();
		func();
		}
	}
}

增加标签的类名，提前在css里面写好样式

function addClass(element,value){
//element目标元素
//value目标类名
	if(!element.className){
		element.className = value;
	}else{
		newClassName = element.className;
		newClassName +=" ";
		newClassName +=value;
		element.className = newClassName;
	}
}

寻找当前节点的下一个‘元素’节点

function styleElementSiblings(tag,theClass){
	if(!document.getElementsByTagName) return false;
	var  headers = document.getElementsByTagName(tag);
	var elem;
	for(var i =0;i<headers.length;i++){
		elem = getNextSibling(headers[i].nextSibling);
		addClass(elem,"intro");
	}
}
function getNextElement(node){
	//循环直到找到node的下一个元素节点
	fi(node.nodeType==1){
		return node;
	}
	if(node.nextSibling){
	//递归调用
		return getNextElement(node.nextSibling);
	}
	return null;
}
addLoadEvent(function(){
	styleElementSiblings("h1","intro");
});

table行隔行颜色不一样，鼠标滑过table，对应行会变色和加粗

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Cities</title>
	<link rel="stylesheet" type="text/css" media="screen" href="css/format.css" />
	<script type="text/javascript" src="js/addLoadEvent.js"></script>
	<script type="text/javascript" src="js/stripeTables.js"></script>
	<script type="text/javascript" src="js/highlightRows.js"></script>
	<script type="text/javascript" src="js/addClass.js"></script>
</head>
<body>
<table>
	<caption>Itinerary</caption>
	<thead>
	<tr>
		<th>When</th>
		<th>Where</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>June 9th</td>
		<td>Portland, <abbr title="Oregon">OR</abbr></td>
	</tr>
	<tr>
		<td>June 10th</td>
		<td>Seattle, <abbr title="Washington">WA</abbr></td>
	</tr>
	<tr>
		<td>June 12th</td>
		<td>Sacramento, <abbr title="California">CA</abbr></td>
	</tr>
	</tbody>
</table>
</body>
</html>

stripeTables（）：

function stripeTables() {
    if (!document.getElementsByTagName) return false;
    var tables = document.getElementsByTagName("table");
    for (var i=0; i<tables.length; i++) {
        var odd = false;
        var rows = tables[i].getElementsByTagName("tr");
        for (var j=0; j<rows.length; j++) {
            if (odd == true) {
               // rows[j].style.backgroundColor ="#369";
               //隔行变色
				addClass(rows[j],"odd");
                odd = false;
            } else {
                odd = true;
            }
        }
    }
}

addLoadEvent(stripeTables);

鼠标滑过加粗

function highlightRows() {
    if(!document.getElementsByTagName) return false;
    var rows = document.getElementsByTagName("tr");
    for (var i=0; i<rows.length; i++) {
		/*DOM 0级事件处理程序*/
        rows[i].onmouseover = function() {
            this.style.fontWeight = "bold";
            addClass(this,"odd");
        }
        rows[i].onmouseout = function() {
            this.style.fontWeight = "normal";
        }
    }
	/*DOM 2级事件处理程序
	//addEventListener("事件","事件函数",false)
	//大多浏览器是冒泡处理所以是false；如果是捕获处理就是true；
[DOM事件处理](www.imooc.com/learn/138)
	//removeEventListener()
	 rows[i].addEventListener("mouseover",function(){
		this.style.fontWeight = "bold";
	 },false);
	 rows[i].addEventListener("mouseout",function(){
		this.style.fontWeight = "normal";
	 },false);*/
}
addLoadEvent(highlightRows

效果这里写图片描述