JavaScript DOM编程艺术之案例研究—

本文链接：https://blog.csdn.net/liaoai/article/details/120384028

文章目录

1.图片库初始版

功能

点击相应文字在当前页面出现相应图片（不会打开新链接窗口），并且图片下有与图片对应的文本。

1.1 HTML代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Snapshots</h1>
    <ul>
        <li>
            <a href="images/fireworks.jpg" title="A fireworks display" onclick="showPic(this);return false;">Fireworks</a>  
            <!-- return false作用为：链接的默认行为没有被触发 防止用户被带到目标窗口 -->
        </li>
        <li>
            <a href="images/coffee.jpg" title="A cup of black coffee" onclick="showPic(this);return false;">Coffee</a>
        </li>
        <li>
            <a href="images/rose.jpg" title="A red rose" onclick="showPic(this);return false;">Rose</a>
        </li>
        <li>
            <a href="images/bigben.jpg" title="The famous clock" onclick="showPic(this);return false;">Big Ben</a>
        </li>
    </ul>
    <img id="placeholder" src="images/blank.jpg" alt="my image">
    <p id="description">Choose an image.</p>
    <script type="text/javascript" src="example2.js"></script>
</body>
</html>

1.2 JavaScript代码

//DOM解决方案
function showPic(whichpic){
    var source=whichpic.getAttribute("href");
    var placeholder=document.getElementById("placeholder");
    placeholder.setAttribute("src",source);
    var text=whichpic.getAttribute("title");
    var description=document.getElementById("description");
    description.firstChild.nodeValue=text;
}

以上涉及：

获取特定元素 
  1.getElementById       返回一个对象
  2.getElementsByTagName    返回一个对象数组
  3.getElementsByClassName   返回一个对象数组  
  
getAttribute         获取属性，不属于document对象，只能通过元素节点对象调用
setAttribute 	     修改属性				

childNodes 获取任何一个元素的子元素（数组）（包含所有类型的节点，不仅仅是元素节点）
nodeType   可以让我们知道正在与哪一种节点打交道 元素节点的nodeType值为1 属性节点为2 文本节点为3
nodeValue  得到（设置）一个节点的值
		注：<p>元素本身的nodeValue属性是空值，若获得文本，而文本是p元素的第一个子节点，可以写为childNodes[0].nodeValue
		
firstchild=childNodes[0]
lastchild=chilsNodes[node.childNodes.length-1]

2.图片库改进版

检查两个问题

支持平稳退化吗

支持平稳退化，即使JavaScript被禁用，用户也可以浏览图片。
JavaScript与HTML标记是分离的吗

JavaScript和HTML标记不是分离的，onclick时间处理函数直接插入到标记文档中。

注：平稳退化：访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览你的网站。

解决问题1： 在js代码中增加了几项检查和测试使得平稳退化。

解决问题2： 找到一种挂钩把JavaScript代码与HTML文档中的有关标记关联起来。

2.1 改进后HTML代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Snapshots</h1>
     <ul id="imagegallery">   <!-- 给列表清单设置id值 -->
        <li>
            <a href="images/fireworks.jpg" title="A fireworks display">Fireworks</a>
        </li>
        <li>
            <a href="images/coffee.jpg" title="A cup of black coffee">Coffee</a>
        </li>
        <li>
            <a href="images/rose.jpg" title="A red rose">Rose</a>
        </li>
        <li>
            <a href="images/bigben.jpg" title="The famous clock">Big Ben</a>
        </li>
    </ul>
    <img id="placeholder" src="images/blank.jpg" alt="my image">
    <p id="description">Choose an image.</p>
    <script type="text/javascript" src="example22.js"></script>
</body>
</html>

2.2 改进后JavaScript代码

//DOM解决方案
function showPic(whichpic){
    if(!document.getElementById("placeholder")) return true;
    var source=whichpic.getAttribute("href");
    var placeholder=document.getElementById("placeholder");
    placeholder.setAttribute("src",source);
    if(document.getElementById("description")){
        if(whichpic.getAttribute("title")){
            var text=whichpic.getAttribute("title");
        }else{
            var text="";
        }
        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=document.getElementsByTagName("a");
    for(var i=0;i<links.length;i++){
        links[i].onclick=function(){
            return !showPic(this);          //this指links[i] 某个a节点
            //若存在"placeholder"，showPic返回值为true 那么此时返回false，禁止浏览器默认行为。
            //若不存在"placeholder"，showPic返回值为false，那么此时返回true，浏览器依然会跳转到相应链接。
        }
    }
}