JavaScript DOM 编程艺术(第2版)读书笔记(4)
案例研究:JavaScript 图片库
改变图片的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
<!--
作者:纤锐
出处:http://www.cnblogs.com/beginner2014/p/4152647.html
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。谢谢合作。
-->
JavaScript DOM 编程艺术(第2版)读书笔记(4)的更多相关文章
- Javascript DOM 编程艺术(第二版)读书笔记——基本语法
Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...
- 读书笔记:JavaScript DOM 编程艺术(第二版)
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- 《JavaScript DOM编程艺术(第二版)》读书总结
这本书是一本很基础的书,但对于刚入前端不久的我来说是一本不错的书,收获还是很大的,对一些基础的东西理解得更加透彻了. 1.DOM即document object model的缩写,文档对象模型,Jav ...
- 【读书笔记】读《JavaScript DOM 编程艺术-第2版》
1.DHTML DHTML曾被认为是HTML/XHTML.CSS和JavaScript相结合的产物,就像今天的HTML5那样,但把这些东西真正凝聚在一起的是DOM.如果真的需要来描述这一过程的话,“D ...
- Javascript DOM 编程艺术(第二版)读书笔记——DOM基础
1.DOM是什么 D=document(文档) O=object(对象) M=Model(模型) DOM又称节点树 一些术语: parent(父) child(子) sibling(兄弟) ...
- JavaScript -- JavaScript DOM 编程艺术(第2版)
/* 渐进增强 平稳退化 网页 结构层(structural layer): HTML 表示层(presentation layer): CSS <link rel="styleshe ...
- 《JavaScript DOM 编程艺术 第 2 版》
第 5 章 最佳实践 平稳退化:现在基本所有带交互的网站都使用 Ajax,SAP 也火起来了,平稳退化真是很难实现了(看到第七章发现我之前的观点是错了) 分离 JS 向下兼容 性能考虑 第 6 章 案 ...
- JavaScript DOM编程艺术读后感(1)—— 平稳退化
最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发 ...
- JavaScript DOM编程艺术(第2版)的简单总结
介绍 JavaScript DOM编程艺术(第2版)主要讲述了 JavaScript.DOM 和 HTML5 的基础知识,着重讲述了 DOM 编程,并通过几个实例演示了具有专业水准的网页开发. 下面介 ...
- 《JavaScript Dom 编程艺术》读书笔记-第4章
我的前端入门第一本书是<JavaScript Dom 编程艺术>,网上查找资料发现前端的入门推荐书籍最受好评的就是这本和<JavaScript 高级程序设计>了.之所以先选这本 ...
随机推荐
- docker offical docs:Working with Containers
enough ---------------------------------------------------------------------------------- Working wi ...
- mongodb远程连接以及备份、还原、导出、导入
一.远程连接mongodb 连接命令:mongo -u username -p pwd 192.168.41.215:27017/database(用户名对应的数据库) 二.mongodump备份数据 ...
- 当As3遇见Swift(二)
字符串:String 都是用String来表示,都是值类型,在传递过程中都会进行拷贝. 计算字符数量 As3: str.length Swift: countElements(str) 数组:Arra ...
- postgres-toolkit (A Victorinox for PostgreSQL DBA )
postgres-toolkit A collection of scripts and utilities to manage PostgreSQL servers. Allows DBA to p ...
- CSS 中文字体的英文名称
宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 Ming ...
- Lintcode: Single Number III
Given 2*n + 2 numbers, every numbers occurs twice except two, find them. Example Given [1,2,2,3,4,4, ...
- [转]java工程师成神之路
转载http://www.hollischuang.com/archives/489https://linux.cn/article-6739-1.html 一.基础篇 1.1 JVM 1.1.1. ...
- prezi破解教程
http://www.joenchen.com/archives/998 http://www.joenchen.com/archives/945 Prezi Desktop 4.7.5免注册无时间限 ...
- MVC4中下拉菜单和单选框的简单设计方法
举例一: @Html.LabelFor(model => model.Gender) @Html.DropDownListFor(model => model.Gender, new[] ...
- canvas基本画图
<img src="img/lamp.gif" id="lamp"/> <img src="img/eg_tulip.jpg&quo ...