JavaScript DOM编程艺术第九章学习笔记

时间：2020-12-15 04:25:46

网页的三层结构

结构层：超文本标记语言(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

效果
JavaScript DOM编程艺术第九章学习笔记
标签：

相关文章