读《JavaScript DOM编程艺术》
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了读《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. 综合示例
以上是关于读《JavaScript DOM编程艺术》的主要内容，如果未能解决你的问题，请参考以下文章
Javascript DOM 编程艺术读书笔记16/04/01