《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库


Posted in Javascript onJanuary 09, 2015

改变图片的src属性的两种方式:

1,setAttribute方法是“第1级DOM”的组成部分,它可以设置元素节点的任意属性。

2,element.src = source;这是在“第1级DOM”出现之前的方法,现在也有效。

“第1级DOM”的优势是可移植性好,那些老方法只适用于Web文档,DOM则适用于任何一种标记语言。

事件处理函数

当点击某个链接时,我希望留在这个网页面而不是转到另一个窗口,代码如下:

<a href="http://www.example.com" onclick="showPic(this); return false ;">Click</a>

当点击这个链接时,因为onclick事件处理函数所触发的Javascript代码返回的值是false,所以这个链接的默认行为没有被触发.

childNodes属性

childNodes属性可以用来获取任何一个元素的所有子元素。由childNodes属性返回的数组包含所有类型的节点,而不仅仅是元素节点。事实上,文档里几乎每一样东西都是一个节点,甚至连空格和换行符都会被解释为节点,而它们全都包含在childNodes属性所返回的数组中。

但每个节点都有nodeType属性。nodeType属性总共有12种可取值,但其中仅有3种具有使用价值:元素节点的nodeType属性值是1,属性节点的nodeType属性值是2,文本节点的nodeType属性值是3.

如果想改变一个文本节点的值,那么就用DOM提供的nodeValue属性。

数组元素childNodes[0]有个更直观易读的同义词,可以把它写成firstChild;DOM还提供了一个与之对应的lastChild属性。

示例:

<p id="description">Choose an image</p>

首先创建一个变量来存放它:

var description = document.getElementById("description");

description.nodeValue的返回值是null。<p>元素本身的nodeValue属性是一个空值,而如果想要得到<p>元素包含的文本的值,要用description.childNodes[0].nodeValue或者description.firstChild.nodeValue

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
Nov 21 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
5种处理js跨域问题方法汇总
Dec 04 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 Javascript
基于webpack.config.js 参数详解
Mar 20 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
Vue 监听元素前后变化值实例
Jul 29 Javascript
javascript使用canvas实现饼状图效果
Sep 08 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 #Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 #Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 #Javascript
javascript获取四位数字或者字母的随机数
Jan 09 #Javascript
JS JQUERY实现滚动条自动滚到底的方法
Jan 09 #Javascript
JavaScript Math.ceil 方法(对数值向上取整)
Jan 09 #Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 #Javascript
You might like
完美实现GIF动画缩略图的php代码
2011/01/02 PHP
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
PHP生成压缩文件实例
2015/02/07 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
2013/10/23 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
JavaScript保存并运算页面中数字类型变量的写法
2015/07/06 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
将python图片转为二进制文本的实例
2019/01/24 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
创意广告词
2014/03/17 职场文书
审计班子对照检查材料
2014/08/27 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
病房管理制度范本
2015/08/06 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL