zoukankan      html  css  js  c++  java
  • 浅谈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 去控制行为;

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

  • 相关阅读:
    递归的狂想(菜鸟的胡思乱想)
    关于fiddler的使用总结
    关于mac下 sublime 安装配置java及运行java个人建议
    关于VMwareFusion占用内存过多的问题提几点自己的解决方案
    (ubuntu)ubuntu的root密码设置
    Refactoring to Patterns 学习笔记2 为什么要重构?
    Refactoring to Patterns 学习笔记1 什么是重构?
    [转载]数据结构树之红黑树
    【转载】数据结构之图(存储结构、遍历)
    STL库之单链表:forward_list
  • 原文地址:https://www.cnblogs.com/qiuzhimutou/p/5146426.html
Copyright © 2011-2022 走看看