读《JavaScript DOM编程艺术》

国庆假期花了三四天看了这本书,书很薄,因为是入门书,干货也不是很多。

4. childNodes nodeType nodeValue firstChild lastChild

childNodes返回所有直接子节点,元素节点为1,属性节点为2,文本节点为3,甚至还包括换行和空格也作为节点来看(和children的区别)

p 的第一个firstChild是其中的文本,难道不应该可以是属性节点??——————知乎

注意JavaScript中的firstChild属性和CSS的first-Child的区别

5.
平稳退化

向CSS学习,分离出JavaScript,在HTML文档中使用诸如onclick之类的属性是一种既没有效率又容易引发问题的做法。

向后兼容,对象/方法检测

性能考虑

6. 重写图片库

7. 动态创建标记

传统技术:document.write innerHTML
DOM方法:createElement、createTextNode、appenChild和insertBefore

在指定了请求的目标,也明确了如何处理响应之后,就可以使用send方法来发送请求了:
request.send(null);

异步请求有一个容易忽略的问题就是异步性,就是脚本在发送XMLHttpRequest请求之后,仍然会继续执行,不会等待响应返回。为此,如果其他脚本依赖于服务器的响应,那么就得把相应的代码都转移到指定给onreadystatechange属性的那个函数中。

在使用Ajax时,千万要注意同源策略。使用XMLHttpRequest对象发送的请求只能访问与其所在的HTML处于同一个域中的数据,不能向其他域发送请求。

Ajax应用的一个特色就是减少重复加载页面的次数,可以增强站点的可用性,用户无需刷新页面,从而可以很快地得到响应。但这种缺少状态记录的技术会与浏览器的一些使用惯例产生冲突,导致用户无法使用后退按钮或者无法为特定状态下的页面添加书签。

8. 充实文档的内容

渐进增强与平稳退化

此前编写的displayAbbreviations和displayCitations函数有许多共同之处:从创建一个由特定元素
(abbr元素或blockquote元素)构成的节点集合开始,用一个循环去遍历这个节点集合并在每次循环中创建出一些标记,最后把新创建的标记插入到文档里。

用JavaScript函数先把文档结构中的一些现有信息提取出来,再把那些信息以一种清晰和有意义的方式重新插入到文档里去。

在需要对文档里的现有信息进行检索时,以下DOM方法最为有用:getElementById,getElementsByTagName,getAttribute

在需要把信息添加到文档里去时,以下DOM方法最有用:
createElement,createTextNode,appendChild,insertBefore,setAttribute

希望大家始终记住:JavaScript脚本只应该用来充实文档的内容,要避免使用DOM技术来创建核心内容。

9. CSS-DOM

不能简单地查询style对象的font-family,因为“font”与“family”之间的连字符会被JavaScript解释为减号,从而报错,当需要引用一个中间带减号的CSS属性时,DOM要求必须用驼峰命名法

在外部样式表里声明的样式不会进入style对象,在文档的<head>部分声明的样式也是如此,他们不能用DOM style属性检测出来。

顺便:CSS三种样式的优先级:行内样式>内嵌样式>连接样式

previousSibling,nextSibling,parentNode,firstChild,lastChild等是不能用来更新信息的

何时该用DOM脚本设置样式:根据元素在节点树里的位置来设置样式;根据某种条件反复设置样式;响应事件。

在很多场合,采用纯粹的CSS或者DOM脚本来设置样式都是行得通的,这时至少需要考虑这些因素:
这个问题最简单地解决方案是什么,哪种解决方案会得到更多浏览器的支持。

className属性

className属性是一个可读/可写的属性,凡是元素节点都有这个属性。
与其使用DOM直接改变某个元素的样式,不如通过JavaScript代码去更新这个元素的class属性,然后在CSS样式表中有对于这一class的样式设置。

通过className属性设置某个元素的class属性时将替换(而不是追加)该元素原有的class设置,而我们实际需要的是追加效果,即将多种样式叠加。

为此,可以通过封装一个函数addClass,这个函数带两个参数:第一个是需要添加新class的元素(element),第二个是新的class的设置值(value)。

 1 function addClass(element, value){
 2     if(!element.className){
 3         element.className = value;
 4     }
 5     else{
 6         newClassName = element.className;
 7         newClassName += " ";//注意需要有一个空格
 8         newClassName += value;
 9         element.className = newClassName;
10     }
11 }                                

函数的抽象。

10. 用JavaScript实现动画效果

通过结合使用CSS-DOM和JavaScript的setTimeout函数,很容易实现一个简单的动画。

CSS的overflow属性用来处理一个元素的尺寸超过其容器尺寸的情况。当一个元素包含的内容超出自身的大小时,就会发生内容溢出,这种情况,你可以对内容进行“裁剪”,只让一部分内容可见。你还可以通过overflow属性告诉浏览器是否需要显示滚动条,以便让用户能够看到内容的剩余部分。

overflow的属性的可取值有4种,visible,hidden,scroll,auto。

12. 综合示例

时间: 2024-10-14 16:00:36

读《JavaScript DOM编程艺术》的相关文章

深入理解Java虚拟机到底是什么

摘自:http://blog.csdn.net/zhangjg_blog/article/details/20380971 什么是Java虚拟机 我们都知道Java程序必须在虚拟机上运行.那么虚拟机到底是什么呢?先看网上搜索到的比较靠谱的解释: 虚拟机是一种抽象化的计算机,通过在实际的计算机上仿真模拟各种计算机功能来实现的.Java虚拟机有自己完善的硬体架构,如处理器.堆栈.寄存器等,还具有相应的指令系统.JVM屏蔽了与具体操作系统平台相关的信息,使得Java程序只需生成在Java虚拟机上运行的

(1) 深入理解Java虚拟机到底是什么?

好文转载:http://blog.csdn.net/zhangjg_blog/article/details/20380971 什么是Java虚拟机 作为一个Java程序员,我们每天都在写Java代码,我们写的代码都是在一个叫做Java虚拟机的东西上执行的.但是如果要问什么是虚拟机,恐怕很多人就会模棱两可了.在本文中,我会写下我对虚拟机的理解.因为能力所限,可能有些地方描述的不够欠当.如果你有不同的理解,欢迎交流. 我们都知道Java程序必须在虚拟机上运行.那么虚拟机到底是什么呢?先看网上搜索到

《深入理解Java虚拟机》读书笔记---第一章 走进Java

一.为什么要读此书 <深入理解Java虚拟机>这本书读了很多次,每次读都会有不一样的感受.首先说一下为什么要读这本书,如果把Java比喻成乾坤大挪移,那了解虚拟机的工作原理就是练习九阳神功,java语言是招式,对虚拟机的认识是内功心法,只有内功心法强大,所使的招式才强大,这就是为什么阳顶天只能把乾坤大挪移练到第四层,而张无忌能练到第七层.由于java虚拟机的强大,把很多功能都隐藏了,例如内容管理,垃圾回收机制等,使得很多java程序猿对这一块的知识所有缺失,编码的时候也是似懂非懂的,以至于遇到

jvm--深入理解java虚拟机 精华总结(面试)(转)

深入理解java虚拟机 精华总结(面试)(转) 一.运行时数据区域 3 1.1 程序计数器 3 1.2 Java虚拟机栈 3 1.3 本地方法栈 3 1.4 Java堆 3 1.5 方法区 3 1.6 运行时常量池 4 二. hotspot虚拟机对象 4 2.1 对象的创建 4 检查 4 分配内存 4 Init 4 2.2 对象的内存布局 4 2.3 对象的访问定位 4 使用句柄访问 4 使用直接指针访问 5 三. OutOfMemoryError 异常 5 3.1 Java堆溢出 5 3.2

深入理解Java虚拟机(类文件结构+类加载机制+字节码执行引擎)

周志明的<深入理解Java虚拟机>很好很强大,阅读起来颇有点费劲,尤其是当你跟随作者的思路一直探究下去,开始会让你弄不清方向,难免有些你说的啥子的感觉.但知识不得不学,于是天天看,反复看,就慢慢的理解了.我其实不想说这种硬磨的方法有多好,我甚至不推荐,我建议大家阅读这本书时,由浅入深,有舍有得,先从宏观去理解去阅读,再慢慢深入,有条不紊的看下去.具体来说,当你看书的某一部分时,先看这部分的章节名,了解这部分这一章在讲什么,然后再看某一章,我拿"类文件结构"这一章来说,我必须

读深入理解Java中的String(包括JVM)一文总结和提升

读深入理解Java中的String(包括JVM)一文总结和提升 摘要:String作为Java语言中的字符串模拟类,无论是实际的编程工作还是笔试面试过程,都需要我们都String类非常熟悉,对于String类的大部分字符串操作方法,都必须达到熟练运用的程度才行.但是,笔试和面试过程中,面试官往往喜欢问一些String特性相关的题目,来考察面试者对于String基础知识的掌握是否牢固.(本人尚未研读深入理解JVM这本书,分析JVM都是查看网上资料来分析的,若在接下来的内容有分析不到位的地方请见谅和

《深入理解Java虚拟机》:类加载的过程

<深入理解Java虚拟机>:类加载的过程 类从被加载到虚拟机内存中开始,到卸载出内存为止,它的整个生命周期包括:加载.验证.准备.解析.初始化.使用和卸载七个阶段.其中类加载的过程包括了加载.验证.准备.解析.初始化五个阶段. 下面详细讲述类加载过程中每个阶段所做的工作. 加载 加载时类加载过程的第一个阶段,在加载阶段,虚拟机需要完成以下三件事情: 1.通过一个类的全限定名来获取其定义的二进制字节流. 2.将这个字节流所代表的静态存储结构转化为方法区的运行时数据结构. 3.在Java堆中生成一

【深入理解Java虚拟机】类加载机制

本文内容来源于<深入理解Java虚拟机>一书,非常推荐大家去看一下这本书. 本系列其他文章: [深入理解Java虚拟机]Java内存区域模型.对象创建过程.常见OOM [深入理解Java虚拟机]垃圾回收机制 1.类加载机制概述 虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这就是虚拟机的类加载机制. 在java中,类型的加载.连接和初始化过程都是在程序运行期间完成的,这种策略虽然会带来一些性能开销,但是却为jav

深入理解java虚拟机笔记(一)-java内存区域与内存溢出

1. 前言 这是深入理解java虚拟机一书的笔记,来自第二章.因为这本书讲的比较深奥,这是第二次看,需要记录一下笔记. 2. 运行时数据区域 java虚拟机所管理的内存分为以下几个区域. ps:图片来自网络 2.1 程序计数器 程序计数器是一块较小的内存空间,他可以看做是当前线程所执行字节码的行号指示器.字节码解释器工作时就是通过改变这个计数器的值来选去下一条要执行的字节码指令,分之.循环.跳转.异常处理.线程恢复等基础功能都需要依赖这个计数器来完成. 这块内存是线程私有的内存. 如果线程在执行

《深入理解java虚拟机》:类的初始化

深入理解java虚拟机>:类的初始化 类从被加载到虚拟机内存中开始,到卸载出内存为止,它的整个生命周期包括:加载.验证.准备.解析.初始化.使用和卸载七个阶段.其中验证.准备.解析3个部分统称为连接.类加载的过程包括了加载.验证.准备.解析.初始化五个阶段. 加载.验证.准备.初始化和卸载这5个阶段的顺序时确定的,类的加载过程必须按照这种顺序按部就班的开始,而解析阶段则不一定,它在某些情况下可以在初始化阶段之后开始,这是为了支持Java语言的运行时绑定(也成为动态绑定或晚期绑定).另外注意这里的