使用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 ...
随机推荐
- Matlab 如何/怎样 读取图片 显示图片 转换成灰度图
% 读取图片 im = imread('路径') >> im = imread('ny.png'); % 显示图片 imshow(im) >> imshow(im) % 转换成 ...
- 你想知道吗？come
从大二接触Java开始,到现在也差不多三个年头了.从最基础的HTML.CSS到最后的SSH自己都是一步一个脚印走出来的,其中开心过.失落过.寂寞过.虽然是半道出家但是经过自己的努力也算是完成了“学业” ...
- 在Ubuntu下安装lrzsz
目录 自动安装 手动安装 下载 解压 安装 创建连接 在Ubuntu 14.04x64下安装lrzsz 自动安装 在终端中,输入命令 sudo apt-get install lrzsz 由于一些原因 ...
- git忽视上传规则文件 .gitignore
语法 语法 作用 例子 "/" 忽略根目录下的文件 /data "*" 忽略所有文件 *.txt => 1.txt,2.txt... "?&qu ...
- 大数据量下的SQL Server数据库自身优化
原文: http://www.d1net.com/bigdata/news/284983.html 1.1:增加次数据文件 从SQL SERVER 2005开始,数据库不默认生成NDF数据文件,一般情 ...
- 左耳听风-ARTS-第2周（2019/3/31-2019/4/6）
Algorithm 验证括号题(https://leetcode.com/problems/valid-parentheses/).这道题在极客时间上覃超的<算法面试通关40讲>(http ...
- MySQL常用命令（数据库，表相关的命令）
数据库相关命令 显示数据库列表 mysql> SHOW DATABASES; 创建数据库 mysql> CREATE DATABASE 库名; 如下,创建一个名为crashcours ...
- 专访笨叔叔：2019年可能是Linux年？（转）
链接:https://zhuanlan.zhihu.com/p/57815479 2017年9月<奔跑吧 Linux内核>一书出版后得到了广大Linux从业人员和爱好者(特别是从事Linu ...
- 在windows系统上使用pip命令安装python的第三方库
在windows系统上使用pip命令安装python的第三方库 通过cmd启动命令行后,直接输入pip命令,有时候命令行会提示我们pip不是一个指令,这个时候我们可以通过python的集成开发环境里面 ...
- js赋值后，不影响源变量的方法。
以前都没发现这个问题,特记录一下. var productListData={pages:001}; var data=productListData;//这样就会有问题. data=$.extend ...