3_案例研究：JavaScript图片库（DOM编程艺术）

最新推荐文章于 2024-11-13 17:27:29 发布

Akii7

最新推荐文章于 2024-11-13 17:27:29 发布

阅读量180

点赞数

文章标签： js javascript css html dom

本文链接：https://blog.csdn.net/cheng_09/article/details/109409354

版权

4. 案例研究：JavaScript图片库

4.1 标记

4.2 JavaScript

4.2.1 非DOM解决方案

4.2.3 最终的函数代码清单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<!-- 在HTML文档的body标签前插入链接引用js脚本文件 -->
<script type="text/javascript" src="scripts/showPic.js"></script>

<body>
    <h1>Snapshot</h1>
    <ul>
        <li><a href="images/006Dik0Jly1gihxzbkr41j30x61ds47r.jpg" onclick="showPic(this);return false;"
                title="YuYan01">芋圆01</a></li>
        <li><a href="images/006Dik0Jly1gipka8bte8j322w3p44qr.jpg" onclick="showPic(this);return false;"
                title="YuYan02">芋圆02</a></li>
        <li><a href="images/006Dik0Jly1gjq4qf0yz8j32to48i7wq.jpg" onclick="showPic(this);return false;"
                title="YuYan03">芋圆03</a></li>
        <li><a href="images/006Dik0Jly1gjq4yt1ljbj32uh49pu16.jpg" onclick="showPic(this);return false;"
                title="YuYan04">芋圆04</a></li>

        <img src="images/006Dik0Jly1gjqgtjr0fhj32by3hy7wn.jpg" id="placeholder" alt="my image gallery" />
    </ul>
</body>

</html>

//改变图片的src属性
function showPic(whichpic) {
    var source = whichpic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src", source);
}

body {
    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;
}

ul {
    padding: 0;
}

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

img {
    display: block;
    clear: both;
}

4.3 应用这个JavaScript函数

4.4 对这个函数进行扩展

不仅显示不同的图片，还要显示不同的文本

4.4.1 childNodes属性

在一棵节点树上，childNodes属性可以用来获得任何一个元素的所有子元素，它是一个包含这个元素全部子元素的数组

element.childNodes

假设需要把某个文档的body元素的全部子元素检索出来。首先需要使用getElementByTagName得到body元素。因为每份文档只有一个body元素，所以它将是getElementByTagName(“body”)方法所发挥的数组中的第一个（也是唯一一个）元素

接下来可以用如下所示的语法获取body元素的全体子元素

var body_element = document.getElement("body")[0];
body_element.childNodes;

4.4.2 nodeType属性

语法：

node.nodeType

nodeType属性总共有12种可取值，但其中仅有3种具有实用价值

元素节点——1
属性节点——2
文本节点——3

4.4.3 在标记里增加一段描述

4.4.4 用JavaScript改变这段描述

4.4.5 nodeValue属性

在用nodeValue属性获取description对象的值时，得到的并不是包含在这个段落里的文本

4.4.6 firstCHild和lastChild

数组元素childNodes[0]有个更直观易读的同义词。无论何时何地，只需要访问childNodes数组的第一个元素，都可以把它写成firstChild：

node.firstChild
//等价于node.childNodes[0]
node.lastChile
//等价于node.childNodes[node.childNodes.length-1]

4.4.7 利用nodeValue属性刷新这段描述

nodeValue不仅可以用来检索节点的值，还可以用来设置节点的值

4.5 小结

利用案例学习了DOM几个新属性

childNodes
nodeType
nodeValue
firstChild
lastChild

Akii7

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫