《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 相关文章推荐
让回调函数 showResponse 也带上参数的代码
Aug 13 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 Javascript
浅谈javascript六种数据类型以及特殊注意点
Dec 20 Javascript
Jquery动态添加及删除页面节点元素示例代码
Jun 16 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 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
浅析is_writable的php实现
2013/06/18 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
JavaScript寄生组合式继承实例详解
2018/01/06 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
vue使用laydate时间插件的方法
2018/11/14 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
Python3实现并发检验代理池地址的方法
2016/09/18 Python
Python常用特殊方法实例总结
2019/03/22 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
python实现逻辑回归的示例
2020/10/09 Python
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
50道外企软件测试面试题
2014/08/18 面试题
新书吧创业计划书
2014/01/31 职场文书
数控专业个人求职信范文
2014/02/05 职场文书
手机银行营销方案
2014/03/14 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
倡议书的写法
2014/08/30 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android
vue.js Router中嵌套路由的实用示例
2021/06/27 Vue.js