《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 相关文章推荐
限制复选框的最大可选数
Jul 01 Javascript
学习并汇集javascript匿名函数
Nov 25 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 Javascript
$.extend 的一个小问题
Jun 18 Javascript
JavaScript中子对象访问父对象的方式详解
Sep 01 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 Javascript
vue iview多张图片大图预览、缩放翻转
Jul 13 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
Sep 04 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
《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
用 PHP5 轻松解析 XML
2006/12/04 PHP
php 分页原理详解
2009/08/21 PHP
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
python实现数据库跨服务器迁移
2018/04/12 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
python批量修改xml属性的实现方式
2020/03/05 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
numba提升python运行速度的实例方法
2021/01/25 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
vue项目实现分页效果
2021/03/24 Vue.js
医学生实习自我鉴定
2013/09/27 职场文书
校园演讲稿汇总
2014/05/21 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
入党申请书怎么写?
2019/06/11 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript