《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捕获超链接事件进行局部刷新代码
May 10 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
js修改原型的属性使用介绍
Jan 26 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
jQuery中change事件用法实例
Dec 26 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
常用的几个JQuery代码片段
Mar 13 Javascript
Vue指令的钩子函数使用方法
Mar 20 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
layui表格数据重载
Jul 27 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 获取完整url地址
2008/12/20 PHP
PHPLog php 程序调试追踪工具
2009/09/09 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
php-msf源码详解
2017/12/25 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
jQuery拖动布局其结果保存到数据库
2015/10/09 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
对layui数据表格动态cols(字段)动态变化详解
2019/10/25 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
linux 下selenium chrome使用详解
2020/04/02 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
写给爸爸的道歉信
2014/01/15 职场文书
读书演讲主持词
2014/03/18 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
班级活动总结格式
2014/08/30 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书