《JavaScript DOM 编程艺术》 ——笔记

浏览数：76 / 时间：2015年06月08日

　　以下只是个人的读书笔记，限于本人的知识局限性，可能有偏差。请见谅，欢迎指出问题。

　　1.本书的名字就是《JavaScript DOM 编程艺术》，那么首先什么是DOM呢？

　　DOM-Document Object MOdel,按字面上的意思翻译就是文本对象模型。“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

　　它将网页抽象成一个节点树：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>文档标题</title>
</head>
<body>
    <a href="">我的链接</a>
    <h1>我的标题</h1>
</body>
</html>

　　以上的代码就可以用下面的树来表示

技术分享

　　可以看出树是由节点与线条组成的。其中节点又分为三类，分别是元素节点(element node)、文本节点(text node)和属性节点(attribute node)(*不只有3类)。而线条表达了节点之间的父子关系，处于线条起始的节点是结束节点的父节点。<html>就是<head>和<body>的父元素。<head>与<body>之间则是兄弟关系。

　　2.什么是平稳退化？

　　平稳退化就是在当js、css等文件失效时网页也能表达出最基本的含义。我们虽然做了许多努力做出了一个精美的网页，但是却无法确保用户的网络环境是否良好。如果网页的内容与js强耦合，那么当js传递的过慢或阻塞时那么网页会奔溃掉。要做到平稳退化，需要遵守渐进增强与分离js。

　　3.文中的一些坑

　　P129

<abbr title="Document Object Model"><em>DOM</em></abbr>

 var key = current_abbr.lastChild.nodeValue;
 console.log(key);       //null

　　可以发现key无法获取到值，是因为nodeValue属性设置或返回指定节点的节点值。而current_abbr.lastChild获取的是<em>元素节点。

    if (!current_abbr.lastChild.hasChildNodes()) {
      var key = current_abbr.lastChild.nodeValue;
    }else{
      var key = current_abbr.lastChild.lastChild.nodeValue;
    };

　　可以先判断下有没有子元素再取值，暂时还没想到其他方法。。。。

　　还有在最后一个综合事例中，最后一个ajax事例中。用火狐没有问题，IE的话会在一直停在载入动画中，是用chrome就会提示出错，我chrome版本号是 42.0.2311.90 m

　　chrome错误信息如下

XMLHttpRequest cannot load file:///C:/Users/Administrator/Desktop/chapter12/domsters/submit.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Uncaught TypeError: Cannot read property ‘length‘ of null

Uncaught NetworkError: Failed to execute ‘send‘ on ‘XMLHttpRequest‘: Failed to load ‘file:///C:/Users/Administrator/Desktop/chapter12/domsters/submit.html‘.submitFormWithAjax @ global.js:438thisform.onsubmit @ global.js:367
Navigated to file:///C:/Users/Administrator/Desktop/chapter12/domsters/submit.html

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

《JavaScript DOM 编程艺术》 ——笔记