【干货】JavaScript DOM编程艺术学习笔记4-6
四、案例研究:JavaScript图片库
js:
function showPic(whichpic){
//取得链接
var source=whichpic.getAttribute("href");
//取得占位图
var placeholder=document.getElementById("placeholder");
//改变占位图src属性
placeholer.setAttribute("src",source);
//取得文字描述
var text=whichpic.getAttibute("title");
//取得占位文字
var description=document.getElementById("description");
//改变占位文字值
description.firstChild.nodeValue=text;
}
在html中调用:
<a onclick="showPic(this); return false;"></a>
注:
nodeValue属性:node.nodeValue节点的值,通常用这个属性来获取文本值,但要注意的是在<p id="description">text</p>中,description的值是null,它的第一个子节点firstChild的值才是text
nodeType属性:节点的nodeType属性返回的是数字,共有12种值,其中,元素节点是1,属性节点是2,文本节点是3.
childNodes属性:返回的是所有类型的节点,不仅是元素节点。
五、最佳实践
利用元素的class属性,将事件处理函数从html中分离出来。
window.onload=prepareLinks;
function prepareLinks(){
//获取所有链接
var links=document.getElementsByTagName("a");
//遍历所有链接
for(var i=0; i<links.length; i++){
//找出对应类的链接
if(links[i].getAttribute("class")=="popup"){
//为对应类的链接执行事件处理函数
links[i].onclick=function(){
popUp(this.getAttribute("href"));
return false;
}
}
}
}
function popUp(winURL){
//打开一个新窗口显示winURL,窗口名为popup,宽320,高480
window.open(winURL,"popup","width=320,height=480");
}
注:
平稳退化graceful degradation:让一些不支持javacript的浏览器也能顺利完成基本的操作。比如就算有事件处理函数,在链接中将a href设置成真实的URL。比如搜索机器人searchbot基本都不能理解javascript代码,如果不能平稳退化,搜索排名就会受损。
渐进增强:用一些额外的信息去包裹原始数据,按照渐进增强原则创建的网页几乎都能平稳退化。css代码负责关于表示的信息,javascript代码负责行为的信息,他们都应该表现为额外的指令层。
为什么用window.onload来执行函数,而不是直接执行:不管js代码放在头部还是尾部,都有可能在脚本加载时文档还不完整,有些方法就不能正常工作。而document对象是window对象的一个属性,当window对象触发onload事件时,document对象已经存在。
向后兼容:对象检测object detection如果你不理解这个方法,请离开。if(!document.getElementById) return false;
性能考虑:尽量少访问DOM和尽量减少标记数量;合并和放置脚本,将代码合并到一个js文件中,可以减少加载页面时发送的请求数量。另外,文件如果放在head里会导致浏览器无法并行加载其他文件,一般放在文档末尾body之前可以让页面变得更快;压缩脚本,有很多压缩工具,引用压缩版本,另一个在即添加注释作为副本。
六、案例研究:图片库改进版
将图片库案例的事件处理函数从html中分离出来,并增加了对象检测来保证平稳退化。
function prepareGallery(){
//对象检测
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementById("imagegallery")) return false;
//取得图片链接大框架
var gallery=document.getElementById("imagegallery");
//取得图片链接
var links=getElementsByTagName("a");
//遍历链接
for(var i=0; i<links.length; i++){
//对每个链接执行onclick事件,在占位showPic
links[i].onclick=function(){
//showPic执行成功了返回false,阻止默认行为。失败的话返回true,继续执行默认行为,到链接地址
return showPic(this)? false: true;
}
}
}
function showPic(whichpic){
//对象检测
if(!document.getElementById("placeholder")) return false;
//取出链接的href
var source=whichpic.getAttribute("href");
//获得占位图元素
placeholder=document.getElementById("placeholder");
//检测占位元素是否是图片元素
if(placeholder.nodenName!="IMG") return false;
//改变占位图地址为链接图片
placeholder.setAttribute("src",source);
var description=document.getElementById("description");
//有文字描述元素的话继续执行
if(description){
//链接title属性不存在的话赋值为空
var text=whichpic.getAttribute("title")? whichpic.getAttribute("title"): "";
//改变文字表述为链接的title
description.firstChild.nodeValue=text;
}
//函数执行成功的话,返回true
return true;
}
注:
this :是执行事件处理函数onclick时关联的那个元素链接
onload事件:如果只有一个函数的话直接window.onload=function1;这种情况下再加一个函数的话window.onload=function2;只有最后的那个才会被实际执行。所以如果多个的话要整合一个addloadEvent,这样每次要增加函数的话只用增加一条语句:addLoadEvent(func2);即可。
function addLoadEvent(func){
//把现有的处理函数值存入oldonload
var oldonload=window.onload;
//如果还没有绑定任何函数,则把func添加给它
if(!typeof oldonload!="function"){
window.onload=func;
}
//如果已经绑定了函数,则新函数追加到末尾
else{
window.onload=function(){
oldonload();
func();
}
}
}
DOM Core和HTML-DOM:
getElementById getElementsByTagName getAttribute setAttribute都是DOM Core,他们并不专属于javascript ,任何支持DOM的语言都可以使用;另外它们的用途也不仅限于处理网页,可以处理任何一种标记语言编写的文档。
HTML-DOM通常更短,用一个点比如用document.forms来代替document.getElementsByTagName("a"),用placeholder.src=sourc来代替placeholder.setAttribute("src",source)
【干货】JavaScript DOM编程艺术学习笔记4-6的更多相关文章
- JavaScript DOM编程艺术学习笔记(一)
嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...
- JavaScript DOM编程艺术-学习笔记
发现基础不是很好,补习一下.37买了2本书(dom编程和高级程序设计). 以前读书总是自己勾勾画画,有点没意思.现在写下来,说不定会成为传世经典.哈哈...........随便扯扯淡. 第一天(201 ...
- 【干货】JavaScript DOM编程艺术学习笔记1-3
从7月29号到8月8号,断断续续地看完了这本书,做了部分实践联系.总体感觉本书真的只能算是个入门,学完之后看到库的那一章才感觉是个大坑,实践中大部分应该都是用的现成的库吧,所以还要重新学习一个库,但是 ...
- 【干货】JavaScript DOM编程艺术学习笔记10-12【完】
十.用JavaScript实现动画效果 鼠标放到链接上,每次只显示图片的一小部分,加快加载速度. js: function prepareSlideshow(){ //对象检测 if(!documen ...
- 【干货】JavaScript DOM编程艺术学习笔记7-9
七.动态创建标记 在文档中不写占位图片和文字代码,在能调用js的情况下动态创建,文档支持性更好. 在原来的addLoadEvent prepareGallery showPic的基础上增加函数prep ...
- JavaScript DOM编程艺术学习笔记-第二章JavaScript语法
一.JavaScript示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- JavaScript DOM编程艺术学习笔记-第一章JavaScript简史
一,JavaScript的起源 JavaScript是Netscape与Sun公司合作开发,它是一种脚本语言,通常只能通过Web浏览器去完成一些操作.JavaScript为程序员提供了一些操控Web浏 ...
- JavaScript DOM编程艺术-学习笔记(第八章、第九章)
第八章 1.小知识点: ①某些浏览器要根据DOCTYPE 来决定页面的呈现模式(标准模式 / 怪异模式--也称兼容模式): 兼容模式意味着浏览器要模仿老一辈的浏览器的怪异行为,来让老站点得到运行,并让 ...
- JavaScript DOM编程艺术-学习笔记(第七章)
第七章: 1.dom方法创建并且插入标签:(这种方法并没有改变文档的物理内容,而是在改变dom树) ①创建元素节点:createElement(); ②内部前插入:appendChild() ③创建文 ...
随机推荐
- 12、多空格&多制表符文本之cut域分割终极方案
解决方法分为如下三步: (1) 使用“tr”命令将制表符转换为空格: (2) 使用“tr”命令将多个重复空格删除,保留一个空格: (3) 使用“cut”命令进 ...
- Luogu 3320 [SDOI2015]寻宝游戏
一开始还真没想到. 发现从所有有宝藏的点出发绕一圈只要不刻意绕路答案都是一样的,即我们呢要求的最后答案$ans = dis(x_1, x_2) + dis(x_2, x_3) +... + dis(x ...
- 9.利用msfvenom生成木马
这篇文章来介绍一下msf中一个生成木马的msfvenom模块. msfvenom命令行选项如下: 英文原版: 中文版: Options: -p, --payload <payload> 指 ...
- node安装和配置
windows 环境 安装node node下载地址 下载后点击安装,默认下一步即可(安装路径可更改为d:盘) 检测PATH环境变量是否配置了Node.js 点击开始=>运行=>输入&qu ...
- SQL笔记:中级篇
1.LIMIT 查询前多少条数据 例如:查询user表前三条数据 SELECT * FROM user LIMIT 3 ORACLE: SELECT name FROM user WHERE RO ...
- Android性能优化系列---管理你的app内存
文章出处:http://developer.android.com/training/articles/memory.html#YourApp Random-access memory(RAM)在任 ...
- DES加密解决算法
/// <summary> /// DES加密算法 /// sKey为8位或16位 /// </summary> /// <param name="pToEnc ...
- msyql分区与分库分表
分区 工作原理 对用户而言,分区表是一个独立的逻辑表,但是底层MySQL将其分成多个物理子表,这对用户来说是透明的,每一个分区表都会使用一个独立的表文件. 如果数据量比较大,可以进行分区.分区对PHP ...
- centos 基础设置
centos 6 关闭防火墙 查看防火墙是否开启 service iptables status 停止防火墙 service iptables stop 禁止开机自启动防火墙 chkconfig ip ...
- 自定义标签报 无法为TAG [my2:hello]加载标记处理程序类[null]
今天练习jsp自定义标签的时候,等我写好全部和检查万无一失的时候.执行然后报错了 无法为TAG [my2:hello]加载标记处理程序类[null] 我反复检查代码,发现代码也没什么问题.后面通过百度 ...