使用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="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标签默认跳转的冲突问题的更多相关文章
- 解决MUI阻止a标签默认跳转事件—方法总结
用过mui的小伙伴们一定不会陌生,有时候真的很烦mui本身会阻止a标签默认跳转.一般只要用了mui的ui组件,比如头部,底部或者弹框,你就不能在用a标签进行跳转了. 注:项目中引用了mui后,可能也会 ...
- radio，checkbox，select，input text获取值，设置哪个默认选中
11 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title& ...
- 阻止a标签默认跳转事件
1:<a href="####"></a> 2:<a href="javascript:void(0)"></a> ...
- 如何获取select中的value、text、index相关值 && 如何获取单选框中radio值 && 触发事件 && radio 默认选中
如何获取select中的value.text.index相关值 select还是比较常用的一个标签,如何获取其中的内容呢? 如下所示: <select id="select" ...
- Django学习——Django settings 源码、模板语法之传值、模板语法之获取值、模板语法之过滤器、模板语法之标签、自定义过滤器、标签、inclusion_tag、模板的导入、模板的继承
Django settings 源码 """ 1.django其实有两个配置文件 一个是暴露给用户可以自定义的配置文件 项目根目录下的settings.py 一个是项目默 ...
- htmlcss笔记--标签默认值样式重置css reset
1.<a>标签 有默认文字修饰:下划线, 去除:text-decoration:none; text-decoration属性值: none 默认.定义标准的文本. underline 定 ...
- 总结那些有默认margin,padding值的html标签
一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16, ...
- html标签默认属性值之margin;padding值
一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16, ...
- 6、前端--DOM操作（查找标签、节点操作、获取值操作、class操作、样式操作、绑定事件、内置参数this）
DOM操作之查找标签 前缀关键字>>>:document # 基本查找(核心) document.getElementById 根据ID获取一个标签 document.getElem ...
随机推荐
- 正确处理下载文件时HTTP头的编码问题（Content-Disposition）
留坑 参考: 正确处理下载文件时HTTP头的编码问题(Content-Disposition) HTTP协议header中Content-Disposition中文文件名乱码 文件下载,content ...
- Centos7-跟踪用户操作记录并录入日志
1. 添加bash全局配置文件: cd /etc/profile.d sudo -e vi log_command.sh 输入如下内容: export PROMPT_COMMAND='RETRN_VA ...
- 中文输入法input事件
var iscancel = false; $("#sysearch").on({ input: function (e) { if (!iscancel) { //do some ...
- svg 图片
https://studio.qcloud.coding.net/rs2/d67e3c26b502365f8ab7c05d71c70471.svg 腾讯编辑器loading页面的svg
- 修改oracle数据库内存报错
今天修改oracle数据库内存时, alter system set memory_max_target=10240M scope=spfile;语句正确修改:但重启时却报错 : SQL> al ...
- git 分支管理记录
测试环境 :虚拟机(VMware Fusion Centos 6.5) 1.安装git环境 [root@localhost ~]# yum -y install git 2.检测git是否安装成功 [ ...
- C++ 中用cin方式获取输入的几种常用方式
一.前言 在C++程序的编写过程中,可能会经常用到cin方式用来捕获输入设备的输入信息.细分的话,主要的方式有:cin>>.cin.get.cin.getline.在借助键盘等字符输入设备 ...
- vue-cli项目在IE下运行钩子函数抛出异常“ReferenceError: “Promise”未定义"”的解决办法
兼容IE是个坑,低版本IE很多都没法跑起来 问题现象:vue-cli项目在IE下运行,会在钩子函数出现 ReferenceError: “Promise”未定义 解决办法: step1:安装最新的we ...
- Java技术之如何保证同一资源被多个线程并发访问时的完整性？
常用的同步方法是采用信号或加锁机制,保证资源在任意时刻至多被一个线程访问.Java语言在多线程编程上实现了完全对象化,提供了对同步机制的良好支持. 在Java中一共有四种方法支持同步,其中前三个是同步 ...
- Hadoop MapReduce2.0（Yarn）
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/cqboy1991/article/details/25056283 MapReduce2.0(Yar ...