《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获取某年某月的最后一天附截图
Jun 23 Javascript
js实现跨域的方法实例详解
Jun 24 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
jQuery多个版本和其他js库冲突的解决方法
Aug 11 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
基于JavaScript实现的快速排序算法分析
Apr 14 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
Vue.js的复用组件开发流程完整记录
Nov 29 Javascript
JavaScript实现弹出窗口效果
Dec 09 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
php全排列递归算法代码
2012/10/09 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
Python入门_浅谈数据结构的4种基本类型
2017/05/16 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
Python multiprocessing多进程原理与应用示例
2019/02/28 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
python包的导入方式总结
2021/03/02 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
法学专业应届生求职信
2013/10/16 职场文书
教师找工作推荐信
2013/11/23 职场文书
物流毕业生个人的自我评价
2014/02/13 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
高三学生评语大全
2014/04/25 职场文书
小学德育工作总结2015
2015/05/12 职场文书
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python