今天看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="data: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>

问题：

发现不加内容时

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

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

使用nodeValue获取值与a标签默认跳转的冲突问题的更多相关文章

  1. 解决MUI阻止a标签默认跳转事件—方法总结

    用过mui的小伙伴们一定不会陌生,有时候真的很烦mui本身会阻止a标签默认跳转.一般只要用了mui的ui组件,比如头部,底部或者弹框,你就不能在用a标签进行跳转了. 注:项目中引用了mui后,可能也会 ...

  2. radio，checkbox，select，input text获取值，设置哪个默认选中

    11 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title& ...

  3. 阻止a标签默认跳转事件

    1:<a href="####"></a> 2:<a href="javascript:void(0)"></a> ...

  4. 如何获取select中的value、text、index相关值 && 如何获取单选框中radio值 && 触发事件 && radio 默认选中

    如何获取select中的value.text.index相关值 select还是比较常用的一个标签,如何获取其中的内容呢? 如下所示: <select id="select" ...

  5. Django学习——Django settings 源码、模板语法之传值、模板语法之获取值、模板语法之过滤器、模板语法之标签、自定义过滤器、标签、inclusion_tag、模板的导入、模板的继承

    Django settings 源码 """ 1.django其实有两个配置文件 一个是暴露给用户可以自定义的配置文件 项目根目录下的settings.py 一个是项目默 ...

  6. htmlcss笔记--标签默认值样式重置css reset

    1.<a>标签 有默认文字修饰:下划线, 去除:text-decoration:none; text-decoration属性值: none 默认.定义标准的文本. underline 定 ...

  7. 总结那些有默认margin,padding值的html标签

    一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16, ...

  8. html标签默认属性值之margin;padding值

    一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16, ...

  9. 6、前端--DOM操作（查找标签、节点操作、获取值操作、class操作、样式操作、绑定事件、内置参数this）

    DOM操作之查找标签 前缀关键字>>>:document # 基本查找(核心) document.getElementById 根据ID获取一个标签 document.getElem ...

随机推荐

  1. 如何让浏览器直接输出HTML代码而不解析

    方法一: 将HTML代码嵌入到<script type='text/html' style='display:block'></scipt>中 <script type= ...

  2. Web应用程序的安全问题

    常规的安全问题主要分为以下几大类 一,跨站脚本攻击(XSS) 指的是攻击者向web页面注入恶意的Javascript代码,然后提交给服务器,但是服务器并没有做校验和转义等处理,随即服务器的响应页就被植 ...

  3. 关于html引用php文件在编译器正常运行，web浏览器出问题的一点心得

    首先上图 第一张图是预期效果,也就是编译器运行的效果,第二张则是在浏览器打开的效果.那么为甚么会出现这何种问题呢? 原来:编译器能正常运行 是因为是走的cli模式,而浏览器现在走的是web模式,php ...

  4. C# DES加密类，16位的加密。

    这个加密类是与java写的DES加密不同时,自己写的,最后与Java的加密相同了,解决了加密后不同的问题. 可以直接调用里面的加密和解密的方法. using System; using System. ...

  5. GAN试验记录.

    1.GAN目标函数不收敛,参数难调 2.数据集与生成集比例 3.生成四不像,模式崩塌

  6. 使用docker构建简约高效的镜像

    背景介绍 最近在思考一个问题,我的golang运行到docker环境上的时候,需要安装很大依赖.思考发现我需要就是一个运行二进制的环境而已并不需要golang的编译器等等其他任何多余的. 当前的doc ...

  7. 学习笔记CB005:关键词、语料提取

    关键词提取.pynlpir库实现关键词提取. # coding:utf-8 import sys import importlib importlib.reload(sys) import pynlp ...

  8. 【scarpy】笔记三：实战一

    一.前提 我们开始爬虫前,基本按照以下步骤来做: 1.爬虫步骤:新建项目,明确爬虫目标,制作爬虫,存储爬虫内容 二.实战(已豆瓣为例子) 2.1 创建项目 1.打开pycharm -> 点开te ...

  9. Ubuntu 16.04 LTS 安装 miniconda

    Ubuntu 16.04 LTS 安装 miniconda 下载 miniocnda 的 bash 文件下载链接 https://conda.io/miniconda.html ,我选择的是 64-b ...

  10. day-06数据类型与深浅拷贝

    深浅拷贝 # 值拷贝:应用场景最多 ls = [1, 'abc', [10]] ls1 = ls # ls1直接将ls中存放的地址拿过来# ls内部的值发生任何变化,ls1都会随之变化 ls2 = l ...