《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的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
Jul 10 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
Feb 14 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
vue+高德地图写地图选址组件的方法
May 18 Javascript
JS数组方法concat()用法实例分析
Jan 18 Javascript
node koa2 ssr项目搭建的方法步骤
Dec 11 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
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
js玩一玩WSH吧
2007/02/23 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
Javascript中的默认参数详解
2014/10/22 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
jQuery中的基本选择器用法学习教程
2016/04/14 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
javascript实现画板功能
2020/04/12 Javascript
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
Python中的变量和作用域详解
2016/07/13 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
python实现控制台打印的方法
2019/01/12 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
银行员工辞职信范文
2014/01/20 职场文书
村道德模范事迹材料
2014/08/28 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
教师党员个人自我评价
2015/03/04 职场文书
学习党史心得体会2016
2016/01/23 职场文书
一文搞懂Python Sklearn库使用
2021/08/23 Python