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

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


 

  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

 


 

转载于:https://www.cnblogs.com/chenrj23/p/4440168.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值