【DOM 编程艺术】4 案例探究：JavaScript图片库

来源：互联网发布：app数据接口怎么写编辑：程序博客网时间：2024/04/30 02:37

步骤一、创建一个链接清单

html代码：

<h1>Snapshots</h1><ul>    <li>        <a href="images/1.jpg" title="road">road</a>    </li>    <li>        <a href="images/2.png" title="book">book</a>    </li>    <li>        <a href="images/3.png" title="lamp">lamp</a>    </li>    <li>        <a href="images/4.png" title="moon">moon</a>    </li>    <li>        <a href="images/5.png" title="bend">bend</a>    </li></ul>

显示效果：
这里写图片描述

效果改进：

点击某个链接时，能停留在这个网页而不是跳转，并且能在这个网页上看到图片和列表。
解决方法：在网页上增加一个“占位符”

<img src="images/placeholder.jpg" id="placeholder" />

函数完整代码：

<script type="text/javascript">    //通过把图片的路径（href）传递给showPic函数，来改变占位符图片    function showPic(whichpic) {        var liHref = whichpic.getAttribute("href");        var placeholder = document.getElementById("placeholder");        placeholder[0].setAttribute("src","liHref");    }</script>

应用这个函数
完整代码如下：

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>4 案例探究：JavaScript图片库</title>    <script type="text/javascript">        //通过把图片的路径（href）传递给showPic函数，来改变占位符图片        function showPic(whichpic) {            var liHref = whichpic.getAttribute("href");            var placeholder = document.getElementById("placeholder");            placeholder.setAttribute("src", liHref);        }    </script></head><body><h1>Snapshots</h1><ul>    <li>        <a href="images/1.jpg" title="road" onclick="showPic(this);return false;">road</a>    </li>    <li>        <a href="images/2.png" title="book" onclick="showPic(this);return false;">book</a>    </li>    <li>        <a href="images/3.png" title="lamp" onclick="showPic(this);return false;">lamp</a>    </li>    <li>        <a href="images/4.png" title="moon" onclick="showPic(this);return false;">moon</a>    </li>    <li>        <a href="images/5.png" title="bend" onclick="showPic(this);return false;">bend</a>    </li>    <img src="images/placeholder.jpg" id="placeholder"/></ul></body></html>

childNodes属性

用来获取任何一个元素的所有子元素，它是一个包含这个元素全部子元素的数组
childNodes 属性返回节点的子节点集合

document.getElementsByTagName("body")[0].childNodes

返回结果：
这里写图片描述

nodeType属性nodeType 属性返回以数字值返回指定节点的节点类型 nodeType nodeName nodeValue 元素节点（元素标签） 1 大写的标签名 null 文本节点（文字） 3 #text 文字内容注释节点（注释） 8 #comment 注释内容 document 9 #document null

nodeValue属性

nodeValue 属性设置或返回指定节点的节点值。
设置节点值：node.nodeValue=value
返回节点值：node.nodeValue
注意：在用nodeValue属性获取description对象的值时，得到的并不是包含在这个段落里的文本。元素本身的nodeValue属性是一个空值。所以应该先获取元素的所有子元素，在运用nodeValue属性，即：description.childNodes[0].nodeValue

firstChild属性和lastChild属性

firstChild 属性返回指定节点的首个子节点，lastChild属性返回指定节点的最后一个子节点
上面的childNodes[0]等价于firstChild，而lastChild等价于childNodes[node.childNodes.length-1]

最终的JavaScript代码：

<script type="text/javascript">    //通过把图片的路径（href）传递给showPic函数，来改变占位符图片    function showPic(whichpic) {        var liHref = whichpic.getAttribute("href");        var placeholder = document.getElementById("placeholder");        placeholder.setAttribute("src", liHref);        var text = whichpic.getAttribute("title");        var description = document.getElementById("description");        description.firstChild.nodeValue = text;    }</script>

阅读全文

0 0