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

最新推荐文章于 2022-06-13 16:28:58 发布

where_slr

最新推荐文章于 2022-06-13 16:28:58 发布

阅读量415

点赞数

分类专栏：学习笔记文章标签： javascript 函数 css html

本文链接：https://blog.csdn.net/where_slr/article/details/72457818

版权

学习笔记专栏收录该内容

44 篇文章 1 订阅

订阅专栏

网页的三层结构

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