《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 相关文章推荐
关于javascript event flow 的一个bug详解
Sep 17 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
JavaScript中this详解
Sep 01 Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 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
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
mongo Table类文件 获取MongoCursor(游标)的实现方法分析
2013/07/01 PHP
PHP小教程之实现链表
2014/06/09 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
vue实现分页加载效果
2019/12/24 Javascript
vue实例的选项总结
2020/06/09 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
Python实现的矩阵类实例
2017/08/22 Python
python爬取m3u8连接的视频
2018/02/28 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
悬挂训练绳:TRX
2017/12/14 全球购物
校领导推荐信
2013/11/01 职场文书
金融专业推荐信
2013/11/14 职场文书
党员个人思想汇报
2013/12/28 职场文书
应届生简历中的自我评价
2014/01/13 职场文书
优秀的2014年两会精神解读
2014/03/17 职场文书
武当山导游词
2015/02/03 职场文书
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫