《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中关于break,continue的特殊用法与介绍
May 24 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
《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 编写的 25个游戏脚本
2009/05/11 PHP
PHP 命令行参数详解及应用
2011/05/18 PHP
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
thinkphp如何获取客户端IP
2015/11/03 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
JS逆序遍历实现代码
2014/12/02 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
javascript正则表达式总结
2016/02/29 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
Vue表单控件绑定图文详解
2019/02/11 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
python常见数制转换实例分析
2015/05/09 Python
python单元测试unittest实例详解
2015/05/11 Python
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
static关键字的用法
2013/10/07 面试题
哈弗商学院毕业生求职信
2014/02/26 职场文书
继承公证书样本
2014/04/04 职场文书
社团活动总结
2014/04/28 职场文书
给老婆的检讨书
2015/01/27 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
电工生产实习心得体会
2016/01/22 职场文书