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

时间: 2024-11-10 12:39:08

JavaScript DOM 编程艺术(第2版)读书笔记(4)的相关文章

JavaScript DOM编程艺术(第二版)读书笔记 ——(一)

学习和工作中经常会通过搜索引擎的引导进入到博客园中,技术大牛们的知识概括往往一针见血解决了困扰我很久的大大小小的问题.可是一直都是看别人写的博客,自己一直没动过手,直到看到一个博客说到,从简到繁地记记读书笔记或知识总结是促进技术进步的一个很好的方法,觉得非常在理,学习后的整理更能记得牢固,于是最近下定决心,开始我的博客园"生活". 说了从简到繁,作为一个前端小小小小白,我决定把经典的前端书籍的读书笔记写在这里,说不定以后遗忘的时候返回来看到会有豁然开朗的感觉(偷笑). 第一章--Jav

javascript dom编程艺术 第2版

W3C 推出了标准化的DOM, 就是我们现在常用方法, 比如获取一个元素:document.getElementById(id) 语法用JavaScript编写的脚本,都是由一系列指令构成,这些指令叫做语句(statement). 只要按照正确的语法编写出来的语句才能得到正确的解释.JavaScript 每条语句以换行符或分号视为结束. 如下为两条语句:first statementsecond statement也可以放在一行:first statment; second statment;建

《JavaScript DOM编程艺术(第二版)》读书总结

这本书是一本很基础的书,但对于刚入前端不久的我来说是一本不错的书,收获还是很大的,对一些基础的东西理解得更加透彻了. 1.DOM即document object model的缩写,文档对象模型,JavaScript做的就是对DOM的操作,或者说对节点(node)的操作. 2.js中DOM.this这是都是对象,有属性有方法. 3.document对象有body属性,所以可以直接写成document.body,无需再获取body元素(document.getElementsByTagName("b

JavaScript -- JavaScript DOM 编程艺术(第2版)

/* 渐进增强 平稳退化 网页 结构层(structural layer): HTML 表示层(presentation layer): CSS <link rel="stylesheet" href="style.css" media="screen"/> 行为层(behavior layer): JavaScript <script src="scripts.js"></script>

《JavaScript DOM 编程艺术 第 2 版》

第 5 章 最佳实践 平稳退化:现在基本所有带交互的网站都使用 Ajax,SAP 也火起来了,平稳退化真是很难实现了(看到第七章发现我之前的观点是错了) 分离 JS 向下兼容 性能考虑 第 6 章 案例研究:图片库改进版 键盘访问(提高可访问性) onclick 已经帮我们处理了,eg:下面这个绑定了 onclick 的按钮鼠标左键点击和 tab 然后回车一样弹出 "clicked" <!DOCTYPE html> <html lang="en"&

javascript DOM编程艺术中文pdf版提供

http://www.readnovel.com/novel/99350/5019.htmlhttp://www.readnovel.com/novel/99350/5020.htmlhttp://www.readnovel.com/novel/99350/5021.htmlhttp://www.readnovel.com/novel/99350/5022.htmlhttp://www.readnovel.com/novel/99350/5023.htmlhttp://www.readnovel

Javascript Dom编程艺术(第2版)读书笔记

Javascript Dom编程艺术这本书我看的是第2版的,真心觉得这本书不错,它将DOM编程的一些基本原则,及如何让Javascript代码在浏览器不支持的情况下,或浏览器支持了Javascript但用户禁用它的情况下做到平衡退化,让最基本的操作仍能顺利完成,以及如何让结构与样式分享做到真正的渐近增强叙述得很清楚,也很容易理解接受.我也是看了这本书之后,才对代码优化,结构,行为,样式有了进一步的加深理解. Javascript Dom编程艺术(第2版)读书笔记,布布扣,bubuko.com

Javascript DOM 编程艺术读书笔记16/04/01

愚人节快乐 开始用webstorm了,随着学习深入,代码越来越长,因为不借助ide还真是挺难的 今天发现了一个严重的误区,text和textNode是完全不同的两个概念,之前没有特别注意,写代码很容易跳过createTextNode直接用parentNode.appendChild(text) 单独拎出来晒一晒,以后引以为戒 Javascript DOM 编程艺术读书笔记16/04/01

JavaScript DOM编程艺术 读书笔记

3 DOM DOM分别指document,object和model. DOM中包含的节点主要分为三种:元素节点.文本节点和属性节点.DOM的原子是元素节点,标签的名字就是元素的名字,元素可以包含其他的元素.没有被包含在其他元素里的唯一元素是<html>元素,它是树节点的根元素:在XHTML文档里,文本节点总是被包含在元素节点的内部.但并非所有的元素节点都包含有文本节点:属性节点用来对元素做出更具体地描述. 有3种DOM方法可获取元素节点,分别是通过元素ID.通过标签名字和通过类名字来获取. 1

JavaScript DOM 编程艺术(第2版)---序中故

前言: 虽然已入行近乎一载,却还是对自己所处的职业-前端,模模糊糊,浑浑噩噩.故,不求鹤立独群,但略知一二.从<JavaScript DOM 编程艺术(第2版)>入手,打一打基础的同时,了解一下行业发展历史.多一些不明所以的坚持,少一丝追名逐利的执念. 明确词语含义: (X)HTML,DHTML 从知乎上扒来的图片: 图片出处:HTML4,HTML5,XHTML 之间有什么区别? "浏览器嗅探":用来探测浏览器的具体品牌和具体版本的测试及分支代码 DOM(Document