浅谈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 去控制行为;

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

原文地址:https://www.cnblogs.com/qiuzhimutou/p/5146426.html