使用nodeValue获取值与a标签默认跳转的冲突问题

今天看javascript DOM编程艺术（第2版）发现这样一个例子：

效果图：

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
     #placeholder{
         width: 300px;
         height: 200px;
     }
     img{
         display: block;
     }
    </style>
</head>
<body>

<h3>图片展示</h3>
    <ul>
        <li><a href="images/logo.png" title="天灵图标">天灵图标</a></li>
        <li><a href="images/panda.png" title="熊猫图标" >熊猫图标</a></li>
        <li><a href="images/gameLogo.png" title="游戏图标">游戏图标</a></li>
    </ul>

    <img  id="placeholder" src="images/placeholder.jpg" alt="mypic">
    <p id="description">选择一张图片</p>
</body>
<script>
function showPic(whichPic){
     var source=whichPic.getAttribute('href');
     var placeholder=document.getElementById('placeholder');
     placeholder.setAttribute("src",source);
     var text  =whichPic.getAttribute('title');
     var description=document.getElementById('description');
     // description.childNodes[0].nodeValue= text;
     description.firstChild.nodeValue= text;
     // description.innerHTML=text;
}
 var dianji=document.getElementsByTagName('a');
 for(var i=0;i<dianji.length;i++){
       dianji[i].onclick=function(){
          showPic(this);
          return false;
       }
 }
</script>
</html>

View Code

问题：

发现不加内容时

Uncaught TypeError: Cannot set property 'nodeValue' of null(…)

为避免这种情况，建议使用innerHTML来设置内容或是使用html5中的data-src.

相关阅读:
什么是进程！
【2016.5.9】不考研，那就好好学
ajax的秘密
Input标签中Type的类型及详细用法
html5 Canvas颜色渐变（画图很重要）
页面的自动滚动效果
HTML:让表单文本框只读，不可编辑的方法
<s：property/>标签
在HTML中实现上划线，中划线和下划线
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)

原文地址：https://www.cnblogs.com/xinjianheyi/p/6873709.html