《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实现背景图片切换效果代码
Nov 14 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
JavaScript实现弹出广告功能
Mar 30 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
Vue拖拽组件开发实例详解
May 11 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 28 Javascript
史上最为详细的javascript继承(推荐)
May 18 Javascript
uni-app如何实现增量更新功能
Jan 03 Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 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 stream_get_meta_data返回值
2013/09/29 PHP
PHP安装memcached扩展笔记
2015/05/28 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
2019/08/06 Javascript
vue实现计步器功能
2019/11/01 Javascript
js瀑布流布局的实现
2020/06/28 Javascript
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
python实现C4.5决策树算法
2018/08/29 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
幼儿教师工作感言
2014/02/14 职场文书
《湘夫人》教学反思
2014/02/21 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server