浅谈JavaScript DOM编程艺术读后感和一点总结

  最近工作不是很忙就想想想JavaScript的内部组成和一些要点,就是从这本书开始的。对新手来说还好,简单易懂。

  简单终结下我重书中学到的一些要点。

  下面都是个人学习的要点提取:

  1.给自己预留退路,现在浏览器基本都支持Javascript,但是当时可能有一些浏览器不支持还是怎么的,毕竟我没经历过那个年代。作者的这种做法很厉害,不管你的浏览器支持还是不支持Javascript,网站最基本的信息你是能看见的,不会出现不支持Javascript就什么都看不到。例子:

<a href="http://www.cnblogs.com/" onclick="popUp(‘http://www.cnblogs.com‘);">Example</a>

把href属性设置为真是存在的URL地址后,既是JavaScript已被禁用,这个链接也是可用的;这是一个典型的"预留退路"例子;

现在可能不会用到,但是可以学习这种思考问题的方式。

  2.DOM的一些理论知识吧,通过setAttribute()方法对文档做出的修改,将使得文档在浏览器窗口里的显示效果和/或行为发生相应的变化,但我们在通过浏览器的view source(查看源代码)选项去查看文档的源代码时看到的仍将是原来的属性值—也就是说,setAttribute()方法做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自于DOM的工作模式:先加载文档的静态内容、再以动态方式对它们进行刷新,动态刷新不影响文档的静态内容。

  3.由childNodes属性返回的数组包含着所有类型的节点,出来所有的元素节点,所有的属性节点和文本节点也包含在其中。事实上,文档里几乎每一样东西都有一个节点—甚至连空格和换行符都会被解释成节点,而它们也全部包含在childNodes属性所返回的数组当中。

  4.Node Types

文档、元素、属性以及 HTML 或 XML 文档的其他方面拥有不同的节点类型。

存在 12 种不同的节点类型,其中可能会有不同节点类型的子节点:

节点类型 描述 子节点
1 Element 代表元素 Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference
2 Attr 代表属性 Text, EntityReference
3 Text 代表元素或属性中的文本内容。 None
4 CDATASection 代表文档中的 CDATA 部分(不会由解析器解析的文本)。 None
5 EntityReference 代表实体引用。 Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
6 Entity 代表实体。 Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
7 ProcessingInstruction 代表处理指令。 None
8 Comment 代表注释。 None
9 Document 代表整个文档(DOM 树的根节点)。 Element, ProcessingInstruction, Comment, DocumentType
10 DocumentType 向为文档定义的实体提供接口 None
11 DocumentFragment 代表轻量级的 Document 对象,能够容纳文档的某个部分 Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
12 Notation 代表 DTD 中声明的符号。 None

节点类型 - 返回值

对于每种节点类型,nodeName 和 nodeValue 属性的返回值:

节点类型 nodeName 返回 nodeValue 返回
1 Element 元素名 null
2 Attr 属性名称 属性值
3 Text #text 节点的内容
4 CDATASection #cdata-section 节点的内容
5 EntityReference 实体引用名称 null
6 Entity 实体名称 null
7 ProcessingInstruction target 节点的内容
8 Comment #comment 注释文本
9 Document #document null
10 DocumentType 文档类型名称 null
11 DocumentFragment #document 片段 null
12 Notation 符号名称 null

NodeTypes - Named Constants

NodeType Named Constant
1 ELEMENT_NODE
2 ATTRIBUTE_NODE
3 TEXT_NODE
4 CDATA_SECTION_NODE
5 ENTITY_REFERENCE_NODE
6 ENTITY_NODE
7 PROCESSING_INSTRUCTION_NODE
8 COMMENT_NODE
9 DOCUMENT_NODE
10 DOCUMENT_TYPE_NODE
11 DOCUMENT_FRAGMENT_NODE
12 NOTATION_NODE

  5.很早的onload,现在都不用封装了,但是还是记录以后能看看是什么原理来执行的:

function addLoadEven(func){

  var oldonload = window.onload;

  if (typeof window.onload != ‘function‘){

    window.onload = func;

  }else{

    window.onload = function(){

      oldonload();

      func();

    }

  }

}  

  6.当事也没有DOM方法和属性把一个节点插入到另一个节点的后面。简单介绍下insertAfter()函数:

function insertAfter(newElement,targetElement){

  var parent = targetElement.parentNode;

  if (parent.lastChild == targetElement){

    parent.appendChild(newElement);

  }else{

    parent.insertBefore(newElement,targetElement.nextSibling);

  }

}

  7.要记住JavaScript脚本值应该用来充实文档的内容,要避免使用DOM技术来直接插入核心内容。很实在的例子,我现在的这个公司项目就是用这种历练,最主要的内容基本没有几个DIV就解决了,其他全是动态添加进去,angular.js这点分的更厉害。

  8.有时候我们容易混淆CSS和JavaScript到底什么时候用,或者在那里用,这里有个基本原则:

  如果你想改变某个元素的呈现效果,就应该选用CSS;如果你想改变某个元素的行为,就应该选用DOM也就是JavaScript 去控制行为;

总结:大概就这些我觉的需要记录一下,以后好复习的要点,书真的是人类的一大奇迹,前人的知识能带动后代的人。

时间: 2024-10-21 11:20:14

浅谈JavaScript DOM编程艺术读后感和一点总结的相关文章

javascript+dom编程艺术 读后感

利用上班空闲2,3天把这本书看完了,整体来说,这本书很不错.虽然我js有一定的基础了,jquery基础也会使用,但是我觉得对js应该有个循序渐进的理解,所以还是把js系统的学习一遍.我看技术类的书总数当小说在看,也没有怎么思考,只是有点印象,所以我觉得还是要总结一些. 佩服的作者认真,严谨.js要给自己留退路,要在js禁用的情况下,不影响使用,链接效果失去了也要可以跳转.还要注意浏览的支持问题,对一下需要使用的对象进行存在检测.不过在这里我也认识到了jquery的实用和方便,至少对象不存在不会报

Javascript Dom编程艺术(第2版)读书笔记

Javascript Dom编程艺术这本书我看的是第2版的,真心觉得这本书不错,它将DOM编程的一些基本原则,及如何让Javascript代码在浏览器不支持的情况下,或浏览器支持了Javascript但用户禁用它的情况下做到平衡退化,让最基本的操作仍能顺利完成,以及如何让结构与样式分享做到真正的渐近增强叙述得很清楚,也很容易理解接受.我也是看了这本书之后,才对代码优化,结构,行为,样式有了进一步的加深理解. Javascript Dom编程艺术(第2版)读书笔记,布布扣,bubuko.com

JavaScript DOM编程艺术第一章:JavaScript简史

本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助,所以 如果您也看过这本书,希望不要喷小的"抄袭",其实我也懒得敲这些文字也想简单粗暴地上代码,但是只有实践没有理论不容易自己理解,为避免误导,该"抄"的地方还是要"抄"的,哈哈~~ 一.JavaScript的起源 JavaScript是Netscap

Javascript DOM 编程艺术读书笔记16/04/01

愚人节快乐 开始用webstorm了,随着学习深入,代码越来越长,因为不借助ide还真是挺难的 今天发现了一个严重的误区,text和textNode是完全不同的两个概念,之前没有特别注意,写代码很容易跳过createTextNode直接用parentNode.appendChild(text) 单独拎出来晒一晒,以后引以为戒 Javascript DOM 编程艺术读书笔记16/04/01

JavaScript DOM编程艺术学习笔记(一)

嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推荐给想了解HDOM的相关人员!首先非常感谢作者写出了这么好的一本书,谢谢!书中的内容比较多,我仅记下我认为对自己和他人有所帮助的一些内容! 嗯,首先还是让代码来说话吧! 下面是两段此书中反复强调且通用的经典代码段 1:相当的经典和实用,尤其是当需要为页面加载函数绑定多个函数的时候 /** * [addLoad

《javascript dom编程艺术》笔记(二)——美术馆示例

这几天把这本书看完了,里面大部分知识我已经会了,所以看得就略简单,好多地方都没有再去动手去做,我知道这样是不对的,以后补吧. 现在我要做的是把这本书的笔记完结掉,不然总觉得有啥事没有做. 这个版本不是书中的最后版本,好像是第二版吧.后面还有动态创建结点的一版本,我已经在别的地方实践过了,就不再做了. 只贴出两个函数. //显示图片方法 function showPicture (whichpic) { //综合绑定的事件考虑,条件执行失败,希望浏览器可以让用户打开图片,因此在onclick处re

JavaScript DOM编程艺术 读书笔记

3 DOM DOM分别指document,object和model. DOM中包含的节点主要分为三种:元素节点.文本节点和属性节点.DOM的原子是元素节点,标签的名字就是元素的名字,元素可以包含其他的元素.没有被包含在其他元素里的唯一元素是<html>元素,它是树节点的根元素:在XHTML文档里,文本节点总是被包含在元素节点的内部.但并非所有的元素节点都包含有文本节点:属性节点用来对元素做出更具体地描述. 有3种DOM方法可获取元素节点,分别是通过元素ID.通过标签名字和通过类名字来获取. 1

JavaScript Dom编程艺术 第6章的一个错误

今天在看JavaScript Dom编程艺术 第6章:图片库的改进版时:按照书上的代码,敲出来运行,确怎么也不能显示出正确的结果.加进去断点,调试,发现:prepareGallery 函数根本没被调用,而prepareGallery函数是绑定到window.onLoad事件上的,于是仔细检查书上代码,发现,window.onLoad = prepareGallery;后边少加了个括号.加上括号之后,结果正确.改正后的代码如下: 1 function addLoadEvent(func){ 2 v

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

以下只是个人的读书笔记,限于本人的知识局限性,可能有偏差.请见谅,欢迎指出问题. 1.本书的名字就是<JavaScript DOM 编程艺术>,那么首先什么是DOM呢? DOM-Document Object MOdel,按字面上的意思翻译就是文本对象模型.“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构和样式.” 它将网页抽象成一个节点树: <!DOCTYPE html> <html lang="en&