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

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）。

 function addClass(element, value){

     if(!element.className){

         element.className = value;

     }

     else{

         newClassName = element.className;

         newClassName += " ";//注意需要有一个空格

         newClassName += value;

         element.className = newClassName;

     }

 }

函数的抽象。

10. 用JavaScript实现动画效果

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

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

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

12. 综合示例

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

  1. 读《移山之道——VSTS软件开发指南》

    读<移山之道>这本书差不多用了一个星期的时间,感觉还是收获了一些知识的,以前只是会简单地编个小程序(虽然现在也是这样),但看过这本书之后我对软件开发这个概念的认识度有了从一片模糊到了解大体 ...

  2. 读《移山之道-VSTS软件开发指南》

    首先,我选择<移山之道>有几个原因.第一,书的名字给我一种新鲜感,而不是像另外两本书那么平常:第二,作者邹欣是老师推荐的,看一看他的书或许能让我发现老师对他推崇备至的原因,而实际上,读完这 ...

  3. 开发之道——读《移山之道——VSTS开发之道》后感

    开发之道——读<移山之道——VSTS开发之道>后感 <移山之道——VSTS开发之道>(下简称<移山之道>)是邹欣老师的另一本书.相传很有名的<构建之法> ...

  4. 《移山之道：VSTS软件开发指南》读书笔记

    这两天看了<移山之道:VSTS软件开发指南>,对团队软件开发又有了新的认识.也许对于我们这些软件开发的新手来说,最重要的是具体技术与应用框架,但读了这本书后我感觉到,实际团队项目中工具的使 ...

  5. 《移山之道》Reading Task

    老师布置的阅读任务虽然是附加的作业,但是对我来说是个很好的学习机会.软件工程主要是对工程的开发进行学习,毕竟在学校老师教了那么多的知识,我们课下做了那么多的练习并没有提高我们做一个工程的能力.一个项目 ...

  6. 《移山之道》第十一章：两人合作 读书笔记 PB16110698 第六周（~4.15）

     本周在考虑阅读材料时,我翻阅了<移山之道>,正好看到这一章:两人合作,心想:正好,我们正值结对作业的紧要关头,书中两人合作的宝贵经验和教诲应当对我们有很大帮助.于是,我开始一边在ddl苦 ...

  7. 《移山之道》Reading Task——by12061154Joy

    最近因为作业的原因所以接触到了这本书,给我最特别的感觉就是很新鲜,主要是因为这本书是以故事展开的,大概是我读的书太少,基本没有看到过专业书的知识体系是用故事串讲起来的,这样帮助读者理解了一些概念并且不 ...

  8. Pairproject 移山之道 阅读随笔和一些问题

    首先不得不承认这本书的写作方式很独特,不像其他的计算机类的图书那样枯燥,让人读起来感觉很有意思,他也颠覆了我对计算机类图书的看法,这种写作方式值得我们学习. 先谈谈收获吧.读了两年大学,这是第一次写类 ...

  9. Some questions after Reading 《移山之道》

    很少见到用故事的形式来写技术书籍的,这是我看到的第一本,书写得比较有趣,看了之后也是有一定的收获.  作者在此书中旁征博引,引用的东西虽不能一个一个查询是否正确,但是每次读到时候,感觉一种现代的软件工 ...

  10. 一个项目经理对主流项目管理工具的对比：禅道VS华为软件开发云

    禅道与软件开发云对比分析报告 1. 产品介绍 禅道是易软天创出品的一款项目管理软件,集产品管理.项目管理.测试管理.文档管理.组织管理于一体,覆盖了项目管理和测试管理的核心流程. 华为软件开发云 (D ...

随机推荐

  1. nginx-502错误，老是提示busy.优化php-fpm如下

    [global]pid = /usr/local/php/var/run/php-fpm.piderror_log = /usr/local/php/var/log/php-fpm.loglog_le ...

  2. WPF嵌入Unity3D代码下载

    这不是大家想找的资源,这是给我的一个帖子用的.当然可以使用u3d自带编译器打开.这是给wpf 嵌入u3d的例子贴用http://bbs.csdn.net/topics/391853486?page=1 ...

  3. linux c 获取头文件函数getenv

    #include <stdio.h>#include <stdlib.h> int main(){ printf("%s\n", getenv(" ...

  4. jquery遍历数组与筛选数组的方法

    grepgrep()方法用于数组元素过滤筛选 grep(array,callback,invert)array:待过滤数组;callback:处理数组中的每个元素,并过滤元素,该函数中包含两个参数,第 ...

  5. CentOS7 配置阿里云yum源

    1)下载repo文件 wget http://mirrors.aliyun.com/repo/Centos-7.repo 2)备份并替换系统的repo文件 cp Centos-7.repo /etc/ ...

  6. Python 多线程

    一.线程的使用 需导入模块: from threading import Thread 二.基本使用 def fun1(arg1, v): print(arg1) print('before') t1 ...

  7. Python 之 for循环中的lambda

    第一种 f = [lambda x: x*i for i in range(4)]  (如果将x换成i,调用时候就不用传参数,结果都为3) 对于上面的表达式,调用结果: >>> f ...

  8. AX 2012 两种lookup 的显示方式

    第一种:只能单选的lookup: 代码: public void BusinessUnitLookup(FormStringControl _formstrcontroll) { //OMOperat ...

  9. ADVDAV驱动

    // ADV7179 register configuration array for PAL mode ADI_DEV_ACCESS_REGISTER ADV7179_Cfg[]={ {ADV717 ...

  10. Spring配置

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "- ...