《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 浮点数运算 精度问题
Oct 06 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
JS弹出窗口的运用与技巧大全
Nov 01 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
JavaScript实现分页效果
Mar 28 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
8个有意思的JavaScript面试题
Jul 30 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
JS实现判断移动端PC端功能
Feb 21 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 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 MsSql server时遇到的中文编码问题
2009/06/11 PHP
php之XML转数组函数的详解
2013/06/07 PHP
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
PHP抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
vue二级路由设置方法
2018/02/09 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
[45:25]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
python访问sqlserver示例
2014/02/10 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
详解django中Template语言
2020/02/22 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
Kathmandu新西兰官网:新西兰户外运动品牌
2019/07/27 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
C语言中break与continue的区别
2012/07/12 面试题
毕业生自荐信格式
2014/03/07 职场文书
社区植树节活动总结
2015/02/06 职场文书
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS
Python数据分析之pandas读取数据
2021/06/02 Python