读《JavaScript DOM编程艺术》

2023-03-12 15:12:34

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

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. 综合示例

码农公寓

相关文章