读《JavaScript DOM编程艺术》

时间:2023-11-15 18:49:38

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

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