使用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.

相关阅读:
用DecimalFormat格式化十进制数字的实际应用
ETL测试小结
浅谈DB2的四个隔离级别
POI处理Excel中各种日期格式问题
如何将Object类型转换成String类型
ArrayList和LinkedList
DB2 编目并访问远程数据库
EXCEL解析之终极方法WorkbookFactory
DB2中coalesce函数的应用
【Linux学习】Linux用户管理2—用户配置文件

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