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

第3章 DOM

• 即使在整个文档里这个标签只有一个元素，getElementsByTagName也返回一个数组。此时的数组长度是1。
• HTML5 DOM 新增 getElementsByClassName
• 在使用类名获取标签匹配时，如果有多个类名，类名顺序和带有更多类名都可以匹配。
• 检查某项数据是否是null时，我们其实是在检查它是否存在。
• 通过setAttribute对文档做出修改后，在通过浏览器查看源代码看到的仍是改变前的属性值，也就是说，setAttribute做出的修改不会反映在文档本身的源代码里。这中表里不一的现象来自DOM的工作模式：先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。对页面内容进行刷新却不需要再浏览器里刷新页面。
• setAttribute实际完成两项操作：创建属性，设置值。

if(something) == if(something != null)

---

第4章 事件处理函数

事件处理函数的作用是，在特定事件发生时调用特定的JavaScript代码。
事件处理函数的工作机制是，在给某个元素添加了事件处理函数后，一旦事件发生，相应的JavaScript代码就会得到执行。被调用的JavaScript代码可以返回一个值，这个值会被传递给那个事件处理函数。例如：我们可以给某个链接添加一个onclick事件处理函数，并让这个处理函数所触发的JavaScript代码返回布尔值true或false。这样一来，当这个链接被点击时，如果那段JavaScript代码返回的值是true，onclick事件处理函数就认为“这个链接被点击了”；反之，如果返回的值是false，onclick事件处理函数就认为“这个链接没有被点击”。

---

第5章 最佳实践

一首老歌中这样写道：不在于你做什么，只在于你怎么做。

---

1.平稳退化

有的用户在使用浏览器时可能禁止了JavaScript脚本（例如使用插件避开广告）。
如果正确的使用了JavaScript脚本，就可以让访问者在他们禁止JavaScript的情况下仍能顺利的浏览网页。这就是平稳退化。
虽然某些功能无法使用，但最基本的操作仍能进行。

2.渐进增强

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

在给HTML内容加上各种标记后，就可以使用各种CSS指令控制内容的显示效果。CSS指令构成一个表示层。这个标识层就像是一张透明的彩色薄膜，可以包裹到文档的结构上，使其内容产生各种色彩。

3.分离JavaScript

考虑外部引入的JavaScript脚本内代码声明逻辑与HTML文档标签顺序逻辑在程序执行时的先后顺序。因为脚本加载时文档可能不完整，所以模型也不完整。没有完整的DOM，DOM方法就不无法正常工作。

<head>
    <script src=""></script>
</head>
<body>
    <a href=""></a>
</body>

先加载脚本，后续标签还未读取。DOM不完整。

<head>  
</head>
<body>
    <a href=""></a>
    <script src=""></script>
</body>

当引入多个JS脚本，浏览器可能会一次加载多个，不能保证哪个文件最先结束加载。

如果让目标代码在HTML文档加载到浏览器之后马上开始执行：
HTML文档全部加载完毕时会触发onload事件。

window.onload = function;

4.向后兼容

对象检测：检测浏览器对JavaScript的支持程度。这有点像游乐园里的警告牌：“你必须到达这一身高才能参与这项活动”。换句话说需要在DOM脚本里表达出下面的含义：“你必须理解这么多的JavaScript语言才能执行这些语句”。

if(method){
    statements
}

如果你理解这个方法，请进来坐坐，给你拿拖鞋，我给你倒咖啡，我们聊聊人生……

if(!method){
    statements
    return false;
}

如果你不理解这个方法，请离开。

if(!document.getElementsByTagName || document.getElementById) return false;

如果你不理解getElementById和getElementsByTagName，你就不能参加这项游乐活动。

5.性能考虑

• 尽量少访问DOM和减少标记

不管什么时候，只要是查询DOM中的某些元素，浏览器都会搜索整个DOM树，从中查找可能匹配的元素。

好的做法是将第一次搜索的结果存到变量里。

• 引入外部脚本，尽量合并脚本
• 压缩脚本代码

---

第6章 案例：图片库改进

网页的行为层（JavaScript）是作用于其结构层（HTML）之上的。
文档的结构内容与文档点的行为分离非常重要：如果想用JavaScript给某个网页添加一些行为，就不应该让JavaScript代码对这个网页的结构有任何依赖。

作者的思路很清晰，编程前列出所有需求与功能，然后逐一实现。

• 改变事件处理函数默认行为

return false;
翻译成人类语言：按照这个链接没被点击的情况采取行动。
规章制度下的人情世故

DOM Core 和 HTML DOM

• getElementById
• getElementsByTagName
• getAttribute
• setAttribute

这些方法都是 DOM Core 的组成部分。它们并不专属于JavaScript，支持DOM的任何一种设计语言都可以使用它们。

属性onclick属于HTML-DOM，它们出现在DOM Core之前。

document.getElementByTagName("form")

document.forms  // HTML-DOM提供了forms对象

element.getAttribute("src")

element.src

a.setAttribute("src",source)

a.src = source

---

第7章 动态创建标记

innerHTML 属性

用DOM的眼睛来看一段结构：

从innerHTML的角度来看：

div标签里有面只有一个 HTML字符串
值是:

<p>This is<em>my</em>content.</p>

innerHTML属性无细节可言。想要获得细节，就必须使用DOM方法和属性。标准化的DOM像手术刀一样精细，innerHTML属性就像大锤一样粗放。

标准的DOM可以替代innerHTML，同时提供了更高的精确性和更强大的功能。

---

DOM方法

DOM是文档的表示。DOM所包含的信息与文档里的信息一一对应。
（文档是玩家，DOM是你游戏里创建的1:1仿真角色，浏览器是游戏）
DOM是一条双车道。不仅可以获取文档的内容，还可以更新文档的内容。改变了DOM树，文档在浏览器里的呈现效果就会发生变化。setAttribute方法并不改变文档的物理内容，如果用编辑器而不是浏览器去打开这个文档，我们将看不到任何变化。只有在用浏览器打开文档时才能看到文档呈现效果的变化。

这是因为浏览器实际显示的是那颗DOM节点树。在浏览器看来，DOM节点树才是文档。动态方式创建标记实际上并不是在创建标记，而是在改变DOM节点树。从DOM的角度思考问题。

在DOM看来，一个文档就是一颗节点树。如果你想要在节点树上添加内容，就必须插入新的节点。

• createElement 方法：创建一个元素节点

createElement(nodeName)

将新创建的元素赋给一个变量是个好主意：

var newElementP = document.createElement("p");

变量现在包含着一个指向刚创建出来的那个p元素的引用。
虽然现在这个新创建的p元素已经存在了，但它还不是任何一颗DOM节点树的组成部分，它只是游荡在JavaScript世界里的一个孤儿。这种情况称为 文档碎片（document fragment）。

• appendChild 方法：将新创建的节点插入节点树

parent.appendChild(child)

现在可以将孤儿放到属于他的家了。

• createTextNode 方法：创建一个文本节点

document.createTextNode(text)

创建元素节点，插入元素节点之后，我想要写一条文本节点，就要用到这个方法。

• insertBefore 方法：把一个新元素插入到一个现有元素的前面

parentElement.insertBefore(newElement,targetElement)

newElement:想插入的元素
targetElement:想插在那个元素之前
parentElement:目标元素的父元素