《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 相关文章推荐
js中top/parent/frame概述及案例应用
Feb 06 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
Jun 04 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
layui使用templet格式化表格数据的方法
Sep 16 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 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
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
jQuery dialog 异步调用ashx,webservice数据的代码
2010/08/03 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
Python实现求两个csv文件交集的方法
2017/09/06 Python
Python检测网络延迟的代码
2018/05/15 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
python获取Linux发行版名称
2019/08/30 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
Python如何使用input函数获取输入
2020/08/06 Python
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
幼儿教师自我鉴定
2013/11/02 职场文书
自我评价怎么写好呢?
2013/12/05 职场文书
优秀通讯员事迹材料
2014/01/28 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
股份合作协议书
2014/09/10 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS