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

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. Microsoft Visual Studio 2012注册密钥

    Microsoft Visual Studio Ultimate 2012 旗舰版 有效注册密钥:YKCW6-BPFPF-BT8C9-7DCTH-QXGWCMicrosoft Visual Studi ...

  2. IOS WebView修改contentInset 导致webview长按弹出菜单跳动的解决方法

    最近在项目中需要用到webview 加载H5 并且在webview 底部使用原生UI添加其他空间比如广告.或者评论(Scrollview) 最初使用修改webview中scrollview 的cont ...

  3. 【转】STM32中的抢占优先级、响应优先级概念

    STM32(Cortex-M3)中有两个优先级的概念--抢占式优先级和响应优先级,有人把响应优先级称作'亚优先级'或'副优先级',每个中断源都需要被指定这两种优先级. 具有高抢占式优先级的中断可以在具 ...

  4. 理解Condition的用法

    这个示例中BoundedBuffer是一个固定长度的集合,这个在其put操作时,如果发现长度已经达到最大长度,那么会等待notFull信号,如果得到notFull信号会像集合中添加元素,并发出notE ...

  5. NHibernate Demo 和 效率测试

    本文关于NHibernate的Demo和效率测试,希望对大家有用. 1.先去官网下载Nhibernate 2.放入到项目中并建立Helper类 private static ISession _Ses ...

  6. 代码管理 – SVN

    代码管理工具也用了不少年了,整理下. 管理工具比较 用过VSS,CVS,TFS,SVN还有一个微软内部使用的不记得什么名字了.这里进行一些简单比较,重点介绍SVN的用法. CVS历史悠久,1986年就 ...

  7. CRM 2016 子表单中N:1关系 字段要求与新建时的关系

    父表单在新建子表单项时弹出的窗口和 子表单的N:1关系是有关系的.说白了就是子表单窗体上的父表单字段是不是必填项. 关系如下: 1 非必填项 点击子表单的"+"号时,会出现look ...

  8. C++ vector erase函数的使用注意事项

    最近使用了顺序容器的删除元素操作,特此记录下该函数的注意事项. 在C++primer中对c.erase(p) 这样解释的:  c.erase(p)    删除迭代器p所指向的元素,返回一个指向被删元素 ...

  9. gradle修改AndroidManifest.xml中的版本号

    def VersionCode = "19" ant.replaceregexp(file:"../Assets/Plugins/Android/AndroidManif ...

  10. [转载]《民航科技》2012年4月专家论坛：程延松《关于中国民航SWIM框架及技术实现探讨》

    专家介绍:程延松,现任成都民航空管发展有限公司总经理,理学博士,高级工程师,长期从事空管技术研究和产品研发工作,作为课题负责人,参与了国家863计划.国家科技支撑计划.国家空管委重点课题.民航局重点课 ...