Javascript.DOM编程艺术读书笔记(5-6章）_在多个函数都会去的一组类似元素的情况下可以考虑-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44202459/article/details/88312467

本文深入探讨了DOM编程的关键技术和最佳实践，包括平稳退化、渐进增强、CSS与JavaScript的角色分工，以及如何优化脚本加载和执行。通过具体实例，如创建弹窗和图片库，展示了如何编写高效且兼容的DOM操作代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

其余章节链接

最佳实践

没有不好的技术，只有用不好的技术
使用JavaScript前确认这么做会对用户的浏览体验产生怎样的影响
平稳退化：某些功能无法使用，但基本的操作仍能顺利完成
创建新的浏览器窗口：window.open(url,name,faetures)。最后一个参数是一个以逗号分隔开的字符串，其内容是新窗口的各种属性，对这个参数应掌握新窗口的浏览功能要少而精的原则。
"javascript:"伪协议，可以通过一个链接来调用JavaScript函数，例：

<!--如果用户禁用JavaScript，则这个链接无效-->
<a href="javascript:popUp('http://www.example.com/');">Example</a>

在HTML文档里通过“javascript:”伪协议调用JavaScript代码的做法非常不好
平稳退化的例子:

<!--如果用户禁用JavaScript，则这个链接依然有效-->
<a href="http://www.example.com/" onclick="popUp(this.href);return false;">Example</a>

CSS技术最大的优点是能够将Web文档的内容结构（标记）和版面设计（样式）分离开来，真正能从CSS技术获益的方法，是把样式全部转移到外部文件中去
渐进增强原则：用一些额外的信息层去包裹原始数据。按照“渐进增强”原则创建出来的网页几乎都符合“平稳退化”原则
CSS代码负责提供关于“表示”的信息，JavaScript代码负责提供关于“行为”的信息
如果JavaScript文件是从HTML文档的<head>部分用<script>标签调用的，它将在HTML文档之前加载到浏览器里；如果<script>标签位于文档底部</body>标签之前，就能保证哪个文件最先结束加载（浏览器可能一次加载多个）
若脚本加载时文档不完整，导致模型不完整，没有完整的DOM，getElementByTagName等方法就不能正常工作，所以为确保模型完整，当window对象触发onload事件时，则document对象已经存在

window.load = function;//当window.omload后执行function函数，此处不加括号，为声明函数

对象检测：

if(!object) return false; //如果检测对象是方法，则要删去方法名后的圆括号，否则测试的将是方法的结果

尽量少访问DOM和尽量减少标记，在多个函数都会取得一组类似元素的情况下，可以考虑重构代码，把搜索结果保存在一个全局变量里，或者把一组元素直接以参数形式传递给函数
包含脚本的最佳方式就是使用外部脚本文件，外部文件与标记能清晰的分离开，而且浏览器也能对站点中的多个页面重用缓存过的相同脚本。同时尽量减少脚本文件的数量，这样可以减少加载页面时发送的请求数量，而减少请求数量通常都是在性能优化时首先要考虑的
位于<head>块中的脚本会导致浏览器无法并行加载其他文件（如图片或其他脚本），一般来说，根据HTTP规范，浏览器每次从同一域名中最多只能同时下载两个文件，在下载脚本期间，浏览器不会下载其他任何文件，即使是来自不同域名的文件也不会下载，所有其他资源都要等脚本加载完毕后才能下载。所以建议把所有的<script>标签都放到文档末尾，</body>标签之前，可以让页面加载更快
压缩脚本，指的是把脚本文件中不必要的字节（空格、注释等）统统删除。压缩后的代码虽然可读性差，但能大幅减少文件大小。多数情况下，应该有两个版本，一个是工作副本，可以修改代码并添加注释；另一个是压缩副本，用于放在服务器上。通常为了区分非压缩版本，最好在压缩副本的文件名中加上min字样
压缩工具推荐，Douglas Crockford的JSMin、Google的Closure Compiler

图片库改进版

JavaScript图片库回顾

Javascript.DOM编程艺术读书笔记(第4章）

任务目标

检查当前浏览器是否理解geteEementsByTagName和getElementById
检查当前浏览器是否存在一个id为gallery的元素
遍历gallery元素中的所有链接
设置onclick事件，让它在有关链接被点击时完成以下操作：1.把这个链接作为参数传递给showPic函数；2.取消链接被点击时的默认行为，不让浏览器打开这个链接

实现代码

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>logos</title>
    <link rel="stylesheet" href="css/style.css" media="screen">
</head>
<body>
    <h1>Auto Logos</h1>
    <ul id="gallery">
        <li>
            <a href="images/audi.jpg" title="奥迪">奥迪</a>
        </li>
        <li>
            <a href="images/bmw.jpg" title="宝马">宝马</a>
        </li>
        <li>
            <a href="images/byd.jpg" title="比亚迪">比亚迪</a>
        </li>
        <li>
            <a href="images/dazh.jpg" title="大众">大众</a>
        </li>
    </ul>
    <img id="default" src="images/0.png" alt="默认图片">
    <p id="info">选择图片</p>    
    <script src="js/showpic.js"></script>
</body>
</html>

style.css

body{
    font-family: Arial, Helvetica, sans-serif;
    color: #edf1f3;
    background-color: #5b717c;
    margin: 1em 10%;
}

h1{
    color: #333;
    background-color: transparent;
}

a{
    color: #fff;
    background-color: transparent;
    font-weight: bold;
    text-decoration: none;
}

ul{
    padding: 0;
}

li{
    float: left;
    padding: 1em;
    list-style: none;
}

img{
    display: block;
    clear: both;
    width: 270px;
    height: auto;
}

p{
    color: #fff;
    font: bold;
    width: 270px;
    text-align: center;
}

showpic.js

function showpic(whichpic){
    var pic = whichpic.getAttribute("href");   //也可以写做pic = which.href
    var defaults = document.getElementById("default");
    defaults.setAttribute("src",pic);       //也可以写做defaults.src = pic
    var text = whichpic.getAttribute("title")
    var info = document.getElementById("info");
    info.firstChild.nodeValue = text;
}
//统计<body>子元素的个数
function countBodyChildren(){
    var body_count = document.getElementsByTagName("body")[0];
    alert(body_count.childNodes.length);
}
// window.onload = countBodyChildren;

function prepareGallery(){
    if(!document.getElementById){
        return false;
    }
    if(!document.getElementsByTagName){
        return false;
    }
//预防性措施，防止图片库被删除后网页js报错
    if(!document.getElementById("gallery")){
        return false;
    }
    var gallery = document.getElementById("gallery");
    var links = gallery.getElementsByTagName("a");
    for(var i=0;i<links.length;i++){
        links[i].onclick = function(){
            showpic(this);
            return false;      
        }
    }
}
window.onload = prepareGallery;