javascript DOM 第四章-CSDN博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascriptDOM第四 章</title>
    <style>
        #placeholder{
            border: 1px solid #fff;
            width: 440px;
            height: 421px;
        }
    </style>
</head>
<body>
<h1>snapshots</h1>
<ul>
    <li><a href="img/1.jpg" title="you love" οnclick="show(this);return false">one</a></li>
    <li><a href="img/2.jpg" title="Do you love me" οnclick="show(this);return false">two</a></li>
    <li><a href="img/3.jpg" title="you none" οnclick="show(this);return false">key</a></li>
    <li><a href="img/4.jpg" title="l like javascript" οnclick="show(this);return false">nou</a></li>
    <li><a href="img/5.jpg" title="my liss you me" οnclick="show(this);return false">sai</a></li>
    <li><a href="img/6.jpg" title="wink do we do" οnclick="show(this);return false">qqh</a></li>
    <li><a href="img/7.jpg" title="love me" οnclick="show(this);return false">lve</a></li>
    <li><a href="img/8.jpg" title="me to" οnclick="show(this);return false">sin</a></li>
 </ul>
<img id="placeholder" src="img/9.jpg" alt="my image gollery">
<p id="pta" >你想知道什么</p>
<script>
   function show(whai){
       var sour = document.getElementById("placeholder");
       var soii = whai.getAttribute("href");
       sour.setAttribute("src",soii);
       var text = whai.getAttribute("title")
       var soto = document.getElementById("pta");
       soto.firstChild.nodeValue=text;
   }

</script>
</body>
</html>

　　firstChild用选中p文本text 他是soto.childNodes[0]的缩写。 nodeValue是调用p文本中的text元素进行替换，

用onclick = show(this);return false 中 return false 用来执行JS 但禁止对a标签的响应。使其不会打开新的页面。

this 代表的是这个元素。

转载于:https://www.cnblogs.com/lianyuewuxia/p/6496119.html