《JavaScript DOM编程艺术（第2版）》笔记

hzwinner

2019-07-01

关注关注

《JavaScript DOM 编程艺术（第2版）》笔记

第1章：JavaScript 简史

JavaScript 的起源

JavaScript 是 Netscape 公司和 Sun 公司合作开发的。

DOM 是一套对文档的内容进行抽象和概念化的方法。

浏览器战争

今天，几乎所有的浏览器都内置了对 DOM 的支持，只要遵循 DOM 标准，就可以放心大胆的去做。

第2章：JavaScript 语法

语句
建议在每条语句末尾都加上分号。

注释

// 单行注释
/* 多行注释
   多行注释*/

变量
```
var mood = "happy";
var age = 33;
```
数据类型
- 字符串
- 数值
- 布尔值
- 数组
  - 数组
  - 关联数组
- 对象
操作符
- 算术操作符
+ ,-,*,/,++,--,+=
- 比较操作符
>,=,<,>=,<=,==,!=,===.......
==并不表示严格相等，认为 false 与 "" 表示的含义相同。
```
false == '';
// true
```
=== 进行严格比较，不仅比较值，而且比较变量的类型。
```
false === '';
// false
```
- 逻辑操作符

条件语句和循环语句

if (condions) {
    statemen}

while循环
```
while (conditions) {
    statements;
}
```
for 循环

函数与对象
- 函数：
```
function name(arguments) {
    statements;
}
```
- 对象(object)：
对象是一种非常重要的数据类型。

对象的两种访问形式：

属性 Object.property
方法 Object.method()
宿主对象：在Web应用中就是由浏览器提供的预定义对象。

第3章：DOM

DOM：

文档：D (document)
对象：O(object)
- 用户定义对象
- 内建对象：如 Array,Math,Data等。
- 宿主对象：由浏览器提供的对象。
模型: M(model)

节点(node)：

元素节点
文本节点
属性节点

获取元素：

getElementById
getElementsByTagName
getElementsByClassName

获取属性：

getAttribute

设置属性：

setAttribute

第4章：案例研究：JavaScript图片库

介绍了 DOM 提供的几个新属性：

childNodes
nodeType
nodeValue
firstChild
lastChild

第5章：最佳实战

平稳退化

平稳退化(graceful degradation)：正确使用 JavaScript 脚本，可以让访问者在他们的浏览器不支持 JavaScript 的情况下仍然能顺利地浏览你的网站。

不能平稳退化会影响你的网页在搜索引擎上的排名。

"javascript:" 伪协议：这种做法非常不好
- 真协议：用来在因特网上的计算机之间传输数据包，如HTTP协议(http://)、FTP协议(ftp://)等。
- 伪协议：非标准化的协议。
```
// 用"javascript:" 伪协议调用 popUp()函数：
<a href="javascript:popUp('http://www.example.com/');">Example</a>
```
内嵌的事件处理函数
```
<a href="#" onclick="popUp('http://www.example.com/'); return false;">Example</a>
```
非常不好，因为#只是创建了一个空链接。
平稳退化办法：将 href 属性设置为真实存在的 URL 地址，让它成为一个有效的链接。
```
<a href="http://www.example.com/" onclick="popUp(this.href); return false;">Example</a>
```
这样，即使 javascript 被禁止，这个链接也是可用的。

渐进增强

渐进增强就是用一些额外的信息层去包裹原始数据。

按照“渐进增强”原则创建出来的网页几乎都符合“平稳退化”原则。

结构、样式、行为要分离。

向后兼容

对象检测

// 例如
if (!document.getElementById) {
    return false;
}

浏览器嗅探技术
通过提取浏览器供应商提供的信息来解决向后兼容问题。

性能考虑

尽量少访问DOM和尽量减少标记
合并和放置脚本
- 推荐把 functionA.js,functionB.js,functionC.js合并到一个脚本文件中，这样可以减少加载页面时发送的请求数量。
- 把 <script>标签都放到文档的末尾</body>标记之前。因为位于<head>中的脚本会导致浏览器无法并行加载其他文件。
压缩脚本
- JSMin(http://javascript.crockford.c...)
- YUI Compressor

第6章：案例研究：图片库改进版

共享onload事件：`addLoadEvent()`函数

需要多个函数都在页面加载时执行。addLoadEvent只有一个参数：打算在页面加载完毕时执行的函数的名字。

把现有的 window.onload 事件处理函数的值存入变量 oldonload;
如果这个处理函数上还没有绑定任何函数，就像平时那样把新函数添加给它；
如果这个处理函数上已经绑定了一些函数，就把新函数追加到现有指令的末尾。

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != "function") {
        window.onload = func;
    } else {
        window.onload = function (){
            oldonload();
            func();
        }
    }
}

第7章动态创建标记

动态添加

注意：用document.createElement创建一个空白的p元素，想在p元素内部添加内容，实际上内容也是一个文本节点，所以应该document.createTextNode创建一个文本节点，再用.appendChild添加到p节点中。

window.onload = function () {
    var testdiv = document.getElementById("testdiv");
    var para = document.createElement("p"); // 创建 p 元素节点
    var txt1 = document.createTextNode("This is"); // 创建 文本节点
    var em = document.createElement("em"); // 创建 em 元素节点
    var txt2 = document.createTextNode("content."); // 创建 文本节点
    var txt3 = document.createTextNode("my "); // 创建 文本节点
    testdiv.appendChild(para); // 将 p 元素节点添加到 div 中
    para.appendChild(txt1); // 将文本节点添加到 p 元素中
    para.appendChild(em);
    para.appendChild(txt2);
    em.appendChild(txt3); // 将文本节点添加到 em 元素中
}

在现有元素后插入一个元素：insertAfter()函数

function insertAfter(newElement, targetElement) {
    var parent = targetElement.parentNode;
    if (parent.lastChild == targetElement) {
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

第8章：充实文档的内容

把文档里的缩略语显示为一个“缩略语列表”
为文档里引用的每段文献节选生成一个“文献来源链接”
把文档所支持的快捷键线是位于分“快捷键清单”

第9章：CSS-DOM

给一个元素追加新的 class:

function addClass(element,value) {
    if (!element.className) {
        element.className = value;
    } else {
        newClassName = element.className;
        newClassName+= " ";
        newClassName+= value;
        element.className = newClassName;
    }
}

第10章：用JavaScript实现动画效果

位置position
- static
- fixed
- relative
- absolute
时间
- var variable = setTimeout("function",interval)
- clearTimeout(variable)
parseInt把字符串里的数值信息提取出来