《JavaScript DOM 编程艺术》小结（一）

最新推荐文章于 2024-06-19 14:45:15 发布

「已注销」

最新推荐文章于 2024-06-19 14:45:15 发布

阅读量815

点赞数

分类专栏： Web开发文章标签： javascript dom

本文链接：https://blog.csdn.net/Lovejulyer/article/details/71425589

版权

Web开发专栏收录该内容

50 篇文章 1 订阅

订阅专栏

《JavaScript DOM 编程艺术》（第2版）【 0501—0510 】

节点

节点树

这里写图片描述

节点关系

这里写图片描述

方法

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

访问

访问 HTML 元素等同于访问节点

通过使用 getElementById() 方法
通过使用 getElementsByTagName() 方法
通过使用 getElementsByClassName() 方法

function  getElementsByClassName(node, classname){
    if(node.getElementsByClassName){
        // 适应现有方法
        return node.getElementsByClassName(classname);
    }else{
        var results = new Array();
        var elems = node.getElementsByTagName("*");
        for(var i=0; i<elems.length; i++){
        if(elems[i].className.indexOf(classname) != -1){
            results[results.length] = elems[i];
        }
        }
    return results;
    }
}

经典实例：JavaScript图片库

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Image Gallery</title>
        <link rel="stylesheet" href="css/main.css" media="screen">
    </head>
    <body>
        <h1>Snapshots</h1>
        <ul id="imagegallery">
            <li>
                <a href="images/car.jpg" title="this is car">
                    <img src="images/car.jpg" alt="car" />
                </a>
            </li>
            <li>
                <a href="images/girl.jpg" title="this is girl">
                    <img src="images/girl.jpg" alt="girl" />
                </a>
            </li>
            <li>
                <a href="images/tky.jpg" title="this is tky">
                    <img src="images/tky.jpg" alt="tky" />
                </a>
            </li>
            <li>
                <a href="images/cartop.jpg" title="this is cartop">
                    <img src="images/cartop.jpg" alt="cartop" />
                </a>
            </li>
        </ul>
        <img id="placeholder" src="images/car.jpg" alt="my image gallery">
        <p id="description">Choose an image.</p> 
        <style>
            body{
            font-family: "Helvetica","Arial",serif;
            color: #333;
            background-color: #ccc;
            margin: 1em 10%;
        }
        h1{
            color: #333;
            background-color: transparent;
        }
        a{
            color: #c60;
            background-color: transparent;
            font-weight: bold;
            text-decoration: none;
        }
        img{
            display: block;
            clear: both;
        }
        #placeholder{
            display: block;
            clear: both;
            width: 500px;
            height: 300px;
            border: 2px solid #fff;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.4);
        }
        #imagegallery{
            list-style: none;
            padding: 0;
        }
        #imagegallery li{
            float: left;
            padding: 1em;
            display: inline-block;
        }
        #imagegallery li a img{
            border: 0;
            width: 100px;
            border: 1px solid #ffffff;
        }
        </style>
        <script>
            // 展示图片
            function showPic(whichpic){
                if(!document.getElementById("placeholder")) return false;
                var source = whichpic.getAttribute("href");
                var placeholder = document.getElementById("placeholder");
                // nodeName 属性总是返回一个大写字母的值，即使元素在HTML文档中是小写字母
                if(placeholder.nodeName != "IMG") return false;
                placeholder.setAttribute("src", source);
                if(document.getElementById("description")){
                    // 三元操作符，优化函数
                    var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : ""; 
                    var description = document.getElementById("description");
                    if(description.firstChild.nodeType == 3){
                        description.firstChild.nodeValue = text;
                    }   
                }
                return true;
            }

            function prepareGallery(){
                // 检查点
                if(!document.getElementsByTagName) return false;
                if(!document.getElementById) return false;
                if(!document.getElementById("imagegallery")) return false;
                var gallery = document.getElementById("imagegallery");
                var links = gallery.getElementsByTagName("a");
                for(var i=0; i<links.length; i++){
                    links[i].onclick = function(){ 
                       // 如果图片切换成功，返回true; 如果图片切换不成功，返回false
                       return showPic(this) ? false : true;;
                    }
                }              
            }

            // addLoadEvent函数
            function addLoadEvent(func){
                var oldonload = window.onload;
                if(typeof window.onload != 'function'){
                    window.onload = func;
                }else{
                    window.onload = function(){
                        oldonload();
                        func();
                    }
                }
            }
            addLoadEvent(prepareGallery);  
        </script>
    </body>
</html>

这里写图片描述

addLoadEvent函数

            /* 
             * 把现有的window.onload事件处理函数的值存入变量oldonload
             * 如果在这个处理函数上还没有绑定任何函数，就像平时那样把新函数添加给它
             * 如果在这个处理函数上已经绑定了一些函数，就把新函数添加到现有指令的末尾
             */
            function addLoadEvent(func){
                var oldonload = window.onload;
                if(typeof window.onload != 'function'){
                    window.onload = func;
                }else{
                    window.onload = function(){
                        oldonload();
                        func();
                    }
                }
            }