用JavaScript和DOM建立图片库（二）

最新推荐文章于 2024-11-08 16:09:18 发布

努力做一只合格的前端攻城狮

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量819

点赞数 1

分类专栏：扩展文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/shao_xuan_/article/details/121297587

版权

扩展专栏收录该内容

17 篇文章 1 订阅

订阅专栏

用JavaScript和DOM建立图片库（二）

childNodes属性
nodeType属性
在标记中增加一段描述
nodeValue属性
成品展示

上一个图片图片库已经能完成一些基本操作了，那么现在我们需要它能完成在同一个网页上切换显示不同的文本。我们需要用到几个新的DOM属性。先介绍一下新属性吧。

childNodes属性

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

element. childNodes

假设需要把某个文档的body 元素的全体子元素检索出来。首先，我们使用getElementsBy-TagName得到body元素。因为每份文档只有一个body元素，所以它将是getElementsByTagName("body" )方法所返回的数组中的第一一个(也是唯一一个) 元素:

var body_ element = document . getElementsByTagName("body")[0];

现在，变量body_element已经指向了那个文档的body元素。接下来，可以用如下所示的语法获取body元素的全体子元素:

// An highlighted block
body_ element. childNodes

这显然要比像下面这样写简明得多:

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

nodeType属性

根据001.html文件的结构，body 元素应该只有3个子元素:一个h1元素、一个u1元素和一个img元素。可是，countBodyChildren()函数给出来的数字却远大于此，这是因为文档树的节点类型并非只有元素节点一种。

由childNodes属性返回的数组包含所有类型的节点，而不仅仅是元素节点。事实上，文档里几乎每一样东西都是一个节点，甚至连空格和换行符都会被解释为节点，而它们也全都包含在childNodes属性所返回的数组当中。

因此，countBodyChildren 的返回结果才会这么大。

还好，每一个节点都有nodeType属性。这个属性可以让我们知道自已正在与哪种节点打交道，差劲的一点是nodeType的值并不是英文。

用下面的语法获取节点的nodeType属性:

node.nodeType

nodeType的值是一一个数字而不是像element或attribute那样的英文字符串。

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

元素节点的nodeType属性值是1。

属性节点的nodeType属性值是2。

文本节点的nodeType属性值是3。

这就意味着，可以让函数只对特定类型的节点进行处理。例如，完全可以编写出一个只处理元素节点的函数。

在标记中增加一段描述

为增强我的图片库函数，我决定维护一个文本节点。我想在显示图片时，把这个文本节点的值替换成目标图片链接的title的值。

首先，需要为目标文本安排显示位置。我在001.html文件里增加一个新的文本段。我把它安排在标签之后，为它设置一个独一无二的id值，这样就能在JavaScript函数里方便地引用它:

<p id=" description" >Choose an image. </p>

我想达到的效果是:在某个图片链接被点击时，不仅要把“占位符”图片替换为那个链接的href属性所指向的图片，还要把这段文本同时替换为那个图片链接的title属性值。为了实现这一效果，对showPic函数要做些改进。

 function showPic(whichpic){
            var sourse = whichpic.getAttribute("href");
            var placeholder = document.getElementById("placeholder");
            placeholder.setAttribute("src",sourse);
            var text = whichpic.getAttribute('title');
            var discription = document.getElementById("description");
        }

nodeValue属性

如果想改变一个文本节点的值，那就使用DOM提供的nodeValue 属性，它用来得到(和设置)一个节点的值:

node . nodeValue

但这里有个大家必须注意的细节:在用nodeValue属性获取description对象的值时，得到的并不是包含在这个段落里的文本。可以用下面这条alert语句来验证这一点:

alert (description.nodeValue);

这个调用将返回一个 null值。

元素本身的nodeValue属性是一个空值，而你真正需要的是<P元素所包含的文本的值。

包含在P元素里的文本是另一种节点，它是<p>元素的第一个子节点。因此，你想要得到的其实是它的第一个子节点的nodeValue属性值。

下面这条alert语句可以显示你想要的内容:

alert(description.childNodes[0].nodeValue);

这个调用的返回值才是我们正在寻找的“Choose an imag."这个值来自childNodes数组的第一个(下标是0)元素。

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

function showPic(whichpic){
            var sourse = whichpic.getAttribute("href");
            var placeholder = document.getElementById("placeholder");
            placeholder.setAttribute("src",sourse);
            var text = whichpic.getAttribute('title');
            var discription = document.getElementById("description");
            description.childNodes[0].nodeValue = text;
        }

那么现在我们的替换功能就实现了。

成品展示

<!DOCTYPE html>
<html lang="en">
<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>Picture library</h1>
    <ul>
        <li>
            <a href="../image/1.jpg" title="one image" onclick="showPic(this);return false;">one image</a>
        </li>
        <li>
            <a href="../image/2.jpg" title="two image" onclick="showPic(this);return false;">two image</a>
        </li>
        <li>
            <a href="../image/3.jpg" title="three image" onclick="showPic(this);return false;">three image</a>
        </li>
        <li>
            <a href="../image/4.jpg" title="four image" onclick="showPic(this);return false;">four image</a>
        </li>
    </ul>
    <img id="placeholder" src="../image/Gallery.png" alt="my image Gallery">
    <p id="description">Choose an image.</p>

    <script>
        function showPic(whichpic){
            var sourse = whichpic.getAttribute("href");
            var placeholder = document.getElementById("placeholder");
            placeholder.setAttribute("src",sourse);
            var text = whichpic.getAttribute('title');
            var discription = document.getElementById("description");
            description.childNodes[0].nodeValue = text;
        }
    </script>
</body>
</html>