点击链接更换图片和相应文本 childNotes nodeType nodeValue

最新推荐文章于 2022-06-06 22:04:55 发布

Wangdanting123

最新推荐文章于 2022-06-06 22:04:55 发布

阅读量932

点赞数

文章标签： DOM javascript

本文链接：https://blog.csdn.net/Wangdanting123/article/details/51106572

版权

用JavaScript和DOM创建图片库

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h1>图片点击显示</h1>
    <ul>
        <li>
            <a href="images/app.png" title="first photo">first photo</a>
        </li>
        <li>
            <a href="images/app-1.png" title="second photo">second photo</a>
        </li>
        <li>
            <a href="images/az2.jpg" title="third photo">third photo</a>
        </li>
        <li>
            <a href="images/az3.png" title="four photo">four photo</a>
        </li>
    </ul>
</body>
</html>

下面我想改进几个地方

1.当点击某个链接时，我希望保留在这个网页而不是跳转到另一个网页。

2.当点击某个链接时，我希望能在这个网页上同时看到那张图片以及原有的图片清单,图片下面的文本更换为链接的title属性值。

2.步骤：

1.通过增加一个占位符图片，在这个页面上为图片预留一个浏览区域。

2.在点击某个链接时，拦截这个网页的默认行为，οnclick="showPic（this）"，如果仅仅把事件处理函数放到图片列表的一个链接中，我们会遇到一个问题，点击这个链接时，不仅showPic函数被调用，链接被点击的默认行为也会被调用，这意味着用户还是会被带到图片调用窗口，而这是我不希望发生的，我需要阻止这个默认行为被调用。

了解事件处理函数的工作机制，在给某个函数添加事件处理函数后，一旦事件发生，相应的JavaScript代码就会得到执行，被调用的JavaScript代码可以返回一个值，这个值将被传递给那个事件处理函数，例如，我们给某个链接添加一个onclick事件处理函数，并让这个处理函数所触发的JavaScript返回布尔值，当这个链接被点击时，如果那段JavaScript代码返回的是true,onclick事件处理函数，就认为这个链接被点击了，反正，如果是false，onclick事件处理函数就认为这个链接没有被点击。

例如：

 <a href="www.baidu.com" οnclick="return false">WWW.baidu.com</a>

3.把每个链接的title属性取出来并让它相应的图片一同显示在网页上。

在一棵节点树上，吃了点childNodes属性可以用来获取任何一个元素的所有子元素。 element.childNodes;

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

每个节点都有nodeType属性，nodeType的值是数字，nodeType共有12种可取值，但其中仅有3种具有实用价值。

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

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

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

4.nodeValue属性，如果想改变一个文本节点的值，那就实用DOM提供的nodeValue属性，它是用来得到或设置一个节点的值，node.nodeValue;

<p id="description">选择一张图片</p>

<span style="font-family: Arial, Helvetica, sans-serif;">alert(description.nodeValue);</span>

有个细节，再用nodeValue属性获取description对象的值时，得到的并不是包含在这个段落里的文本。而是null,因为本身的nodeValue属性是一个空值，而你真正需要的是元素所包含文本的值，包含在元素里的文本是另一种节点，它是元素的第一个子节点，因此我们想要的是的第一个子节点的nodeValue属性值。

<span style="font-family: Arial, Helvetica, sans-serif;">alert(description.childNodes[0].nodeValue);</span>

node.childNodes[0]同义词node.firstchild;

还有node.lastchild等同于node.childNodes[node.childNodes.length-1];

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h1>图片点击显示</h1>
    <ul id="ulList">
        <li>
            <a href="images/app.png" title="first photo" >first photo</a>
        </li>
        <li>
            <a href="images/app-1.png" title="second photo" >second photo</a>
        </li>
        <li>
            <a href="images/az2.jpg" title="third photo" >third photo</a>
        </li>
        <li>
            <a href="images/az3.png" title="four photo" >four photo</a>
        </li>
    </ul>

    <img id="placeholder" src="images/app.png" alt="我的图片库"> <!--通过增加一个占位符图片，在这个页面上为图片预留一个浏览区域。-->
    <p id="description">选择一张图片</p>
    <script type="text/javascript">
        window.οnlοad=function(){
            if(!document.getElementById) return false;
            if(!document.getElementsByTagName) return false;
            if(!document.getElementById("ulList")) return false;
            var ulList=document.getElementById("ulList");
            var links=ulList.getElementsByTagName("a");

            function showPic(whichpic){
                if(!document.getElementById("placeholder")) return false;   //图片切换不成功返回false
                var source=whichpic.getAttribute("href");
                var placeholder=document.getElementById("placeholder");
                if(placeholder.nodeName!='IMG') return false;
                placeholder.setAttribute("src",source);
                if(document.getElementById("description")){
                    var description=document.getElementById("description");
                    if(whichpic.getAttribute("title")){
                        var text=whichpic.getAttribute("title");
                    }
                    else{
                        text="";
                    }
                    if(description.firstChild.nodeType==3){
                        description.firstChild.nodeValue=text;
                    }
                }
                return true;   //图片切换成功返回true
            }

            if(links.length>0){
                for(var i=0;i<links.length;i++){
                    links[i].οnclick=function(){
                        showPic(this);
                        return !showPic(this);
                    }
                    links[i].οnkeypress=links[i].onclick;   //使用键盘
                }
            }
        }
    </script>
</body>
</html>