《JavaScript DOM 编程艺术》读书笔记-CSDN博客

本文链接：https://blog.csdn.net/flywaterfree/article/details/51628053

《JavaScript DOM 编程艺术》读书笔记——其三

第四章

案例：JavaScript图片库

1、事件处理函数：在特定事件发生时调用特定的JavaScript代码。

 在onclick事件处理函数所触发的JavaScript代码里增加一条return false语句，则这个链接的默认行为没有被触发，这样可以防止用户被带到目标链接窗口。举例：onclick="showPic(this);return false;"

2、几个新的DOM属性

（1）childNodes属性
     在一棵节点树上，可以用来获取任何一个元素的所有子元素，它是一个包含这个元素全部子元素的数组。
（2）nodeType属性
     每个节点都有nodeType属性，这个属性可以让我们知道现在正与哪一种节点打交道（注：nodeType的值并非英文）。
     nodeType属性总共有12种可取值，有三种有实用价值：
     （1）元素节点nodeType属性值为1
     （2）属性节点nodeType属性值为2
     （3）文本节点nodeType属性值为3
（3）nodeValue属性
     用来得到（和设置）一个节点的值。
（4）firstChild和lastChild属性
     childNodes数组的第一个元素与最后一个元素。

3、例子代码：

test.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <link rel="stylesheet" href="../css/test.css" media="screen" />
    </head>
    <body>
        <h1>Snapshots</h1>
        <ul>
            <!--图片链接列表-->
            <li>
                <!--showPic()函数需要一个参数：一个带有href属性的元素节点参数，使用到了this关键字，即“这个<a>元素节点”-->
                <a href="../img/1.jpeg" title="picture01" onclick="showPic(this);return false;">Breakfast</a>
            </li>
            <li>
                <a href="../img/2.jpeg" title="picture02" onclick="showPic(this);return false;">Sea</a>
            </li>
            <li>
                <a href="../img/3.jpeg" title="picture03" onclick="showPic(this);return false;">Flower</a>
            </li>
            <li>
                <a href="../img/4.jpeg" title="picture04" onclick="showPic(this);return false;">Tree</a>
            </li>
            <li>
                <a href="../img/5.jpg" title="picture05" onclick="showPic(this);return false;">Street</a>
            </li>
            <li>
                <a href="../img/6.jpeg" title="picture06" onclick="showPic(this);return false;">Sky</a>
            </li>
        </ul>
        <!--“占位符”图片-->
        <img id="placeholder" src="../img/2.jpeg" alt="my image gallery" style="width: 60%; height: 20%; margin-top: 60px;" align="center" />
        <p id="description">Choose an image.</p>
        <script type="text/javascript" src="../js/test.js"></script>
    </body>
</html>

test.js:

//showPic为函数名,whichpic为指向某个图片<a>元素的元素节点参数
function showPic(whichpic)
{
    var source = whichpic.getAttribute("href");//获取路径"href"
    var placeholder = document.getElementById("placeholder");//获取“占位符”图片
    placeholder.setAttribute("src",source);//设置“占位符”元素的src属性
    var text = whichpic.getAttribute("title");//获取whichpic对象的title属性值
    var description = document.getElementById("description");
    description.firstChild.nodeValue = text;//利用nodeValue属性刷新description对象的第一个子节点
}

test.css:

body
{
    font-family:"Helvetica","Arial",serif;
    color: #333333;
    background-color: lightgoldenrodyellow;
    margin: 1em 10%;
}
h1
{
    color: #333333;
    background-color: transparent;
}
a
{
    color: #c60;
    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;
}