今天看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" ...
-
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, ...
-
单选框radio总结（获取值、设置默认选中值、样式）
单选框 radio <div class="radio-inline"> <input type="radio" name="kil ...
-
struts框架问题六之从值栈中获取值
6. 问题六: 在JSP中获取值栈的数据 * 总结几个小问题: > 访问root中数据 不需要# > 访问context其它对象数据 加 # > 如果向root中存入对象的话,优先使 ...
随机推荐
-
使用BeanNameAutoProxyCreator实现spring的自动代理
提到代理,我们可以使用ProxyBeanFactory,并配置proxyInterfaces,target和interceptorNames实现,但如果需要代理的bean很多,无疑会对spring配置 ...
-
错误：StrictMode $ AndroidBlockGuardPolicy.onNetwork
you have to insert 2 lines "StrictMode" on MainActivity Class, example's below: 在onCreate( ...
-
软件工程 speedsnail 第二次冲刺4
20150521 完成任务:划线第四天,能蜗牛遇到线能反弹,加了障碍物: 遇到问题: 问题1 有一个方向碰到线没有反弹 解决1 没有解决 明日任务: 完善问题1
-
更多隐式Intent用法
上几篇无论是显示的Intent或者隐式的Intent,都是要跳转的自己添加指定的页面,如果想要跳转到百度首页或者跳转到联系人面板等,前面的知识显然是很不实用的.这里,将要针对其它的一些Intent用法 ...
-
qmake和moc的功能（★firecat推荐★）
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://devbean.blog.51cto.com/448512/355100 前面我们 ...
-
写sql语句注意事项
做管理系统的,无论是bs结构的还是cs结构的,都不可避免的涉及到数据库表结构的设计,sql语句的编写等.因此在开发系统的时候,表结构设计是否合理,sql语句是否标准,写出的sql性能是否优化往往会成为 ...
-
四， 判断语句； 循环； 使用dict和set
1) 练习 小明身高1.75,体重80.5kg.请根据BMI公式(体重除以身高的平方)帮小明计算他的BMI指数,并根据BMI指数: 低于18.5:过轻 18.5-25:正常 25-28:过重 28- ...
-
xadmin的使用
01-下载源码 GitHub地址:https://github.com/sshwsfc/xadmin # 安装xadmin 由于使用的是Django2.0的版本,所以需要安装xadmin项目djang ...
-
Laravel 中通过自定义分页器分页方法实现伪静态分页链接以利于 SEO
我们知道,Laravel 自带的分页器方法包含 simplePaginate 和 paginate 方法,一个返回不带页码的分页链接,另一个返回带页码的分页链接,但是这两种分页链接页码都是以带问号的动 ...
-
详解 ManualResetEvent（转）
原文:http://www.cnblogs.com/li-peng/p/3291306.html 今天详细说一下ManualResetEvent 它可以通知一个或多个正在等待的线程已发生事件,允许线程 ...