JavaScript DOM编程艺术 读书笔记（简略）

为了快速上手jQuery并使用Ajax，简要地学习了JavaScript，笔记写在了一个js文件中，格式与以往的有些不同。

  1. // OBJ CREATION  
  2. var obj = {name:kamitora, year:1998, age:20};  
  3. /*  
  4.    === 严格比较 value和type  
  5.    !== vice versa               
  6. */  
  7.   
  8. /*  
  9. and && 
  10. or || 
  11. not !                            
  12. */  
  13.    
  14. /** 
  15.  *  do {...} 
  16.     while(condition); 
  17.     至少执行一次。                */    
  18.   
  19. /** 
  20.  * function 先定义，后调用。 
  21.  * 使用var避免二义性隐患。 
  22.  */  
  23.   
  24. var out_f = 'initial value';  
  25. function f_name(argName){  
  26.     var in_f = 'test'; // 局部变量  
  27.     out_f = 'change'; // 未使用var, 是全局变量，并且会改变全局变量的值。  
  28. }  
  29. /** 
  30.  * 创建对象 
  31.  * JavaScript 有内建对象 native object 如 Array, Math, Date etc. 
  32.  * 用户定义对象（user-defined object）,不作讨论。 
  33.  * 浏览器提供的对象： 宿主对象（Host Object），如Form, Element, Image etc.用于获得网页上任何一个元素的信息，这个就是document对象。 
  34.  */  
  35. var newObj = new ObjectName;  
  36. /** 
  37.  * DOM: Docment Object Model 
  38.  * 最基础的对象： window对象。 
  39.  */  
  40. /** 
  41.  * DOM结点：元素节点， 文本节点， 属性节点 
  42.  * 为了区分元素——使用class属性或id属性 
  43.  * id本身只能使用一次，CSS可以利用id属性为包含在特定元素的其他元素定义样式。 
  44.  */  
  45. /** 
  46.  * 获取元素：通过元素id，通过标签名，通过类名 
  47.  */  
  48. document.getElementById(id); //返回一个对象，对应document对象中的元素。  
  49. document.getElementsByTagName(tag); //参数为标签名（eg."li"）返回数组,允许使用通配符。  
  50. document.getElementsByClassName(className); // 参数为类名，返回数组  
  51. document.getElementsByClassName("className1 className2 ..."); // 查找多个类名...  
  52. /** 
  53.  * 文档中的每个元素节点都是一个对象。 
  54.  * getAttribute("attributeName")——获取元素的各个属性，只能通过元素节点（eg. <p>, <li>, etc.）对象调用。若没有该属性，则返回null。 
  55.  * setAttribute("attributeName", value)——更改属性节点的值。  
  56.  * DOM的工作模式：先加载文档的静态内容，再动态刷新（不影响静态内容）。 
  57.  * 若一个站点用到多个JavaScript文件，为减少站点的请求次数，应该把所有.js文件合并到一个文件中。` 
  58.  * 事件处理函数（Event Handler）：鼠标悬停/离开触发——onmouseover/onmouseout;点击链接出发——onclick事件处理函数。 
  59.  */  
  60. event = "JavaScript Statements";  
  61. //eg.  
  62. onclick = "showPic(this)";  
  63. /** 
  64.  * onload事件处理函数——在页面加载时执行。 
  65. */  
  66. window.onload = functionName; // eg.  
  67. /** 
  68.  * childNodes属性用于获取任一元素的所有子元素，是一个包含这个元素全部子元素的数组。返回的数组包含所有类型的节点，每一个节点都有nodeType属性。 
  69.  * 元素节点的nodeType属性值：1 
  70.  * 属性节点的nodeType属性值：2 
  71.  * 文本节点的nodeType属性值：3 
  72.  */  
  73. node.nodeType; // 获取nodeType属性（值）  
  74. /** 
  75.  * nodeValue属性，用于获得和设置一个节点的值 
  76.  */  
  77. node.nodeValue  
  78. description.childNodes[0].nodeValue // 与以下方法相同  
  79. node.firstChild // lastChild, vice versa  
  80. /** 
  81.  * <link rel="stylesheet" href="xxx/xxx.css" media="screen" /> 
  82.  * 引入一个CSS文件 
  83.  */  
  84.   
  85.  /** 
  86.   * window对象的open()方法创建新的浏览器窗口 
  87.   */  
  88.  window.open(url, newTabName, "property1, property2, ..."); // property——新窗口的属性  
  89.  /** 
  90.   * 伪协议：非标准化的协议，"javascript:"伪协议使我们通过有一个链接来调用JavaScript函数。 
  91.   */  
  92.   // <a href='URL' onclick="functionName(this.href;) return false;"> example</a>  
  93.   //   
  94.   
  95.   /** 
  96.    * 渐进增强——用额外的信息层包裹原始数据。 
  97.    * */  
  98.   
  99.    /** 
  100.     * 外部JavaScript文件绑定事件到HTML文档的某个元素上 
  101.     */  
  102.    element.event = action // eg.  
  103.    getElementById(id).event = action // 到某个特定id的元素上  
  104.    /** 
  105.     * 若涉及多个元素——getElementByTagName & getAttribute 
  106.     *   1)将文档中所有链接放入一个数组  
  107.     *   2)遍历数组 
  108.     *   3)若某个链接的class属性等于函数名，即表示该链接被x时应该调用该函数。 
  109.     */  
  110.      
  111.     /** 
  112.      * 对象检测 
  113.      */  
  114.     if (method){  
  115.         statements;  
  116.     }  
  117.     // 检测出不支持某DOM方法的浏览器，方法名后不能加()  
  118.     /** 
  119.      * 尽量少访问DOM和尽量减少标记 
  120.      * 在多个函数都会取得一组类似元素的情况下，考虑把搜索结果保存在一个全局变量中，或者把一组元素直接以参数形式传递给函数。 
  121.      * 过多标记会增加遍历DOM树的时间。 
  122.      * HTTP规范：浏览器每次从同一个域名中最多只能同时下载两个文件。下载脚本期间，浏览器不会下载其他任何文件，即使来自不同域名。 
  123.      */  
  124.       
  125.      /** 
  126.       * 工作副本：可添加代码＆注释。 
  127.       * 精简版本：放在站点上，文件名中往往有min字样。 
  128.       */  
  129.   
  130.       /** 
  131.        * 共享onload事件：先创建一个匿名函数容纳函数，然后将那个匿名函数绑定到onload事件上。 
  132.        */  
  133.       window.onload = function(){  
  134.           firstFunction();  
  135.           secondFunction();  
  136.       }  
  137.   
  138.       // 解决方案：addLoadEvent  
  139.       /** 
  140.        * 完成的操作： 
  141.        *    把现有的window.onload事件处理函数的值存入oldonload； 
  142.        *    若还未绑定任何函数，添加新函数； 
  143.        *    若已绑定一些函数，在末尾追加新函数。 
  144.        * @param {*} func 在页面加载完毕时执行的函数的名字 
  145.        */  
  146.       function addLoadEvent(func){  
  147.           var oldonload = window.onload;  
  148.           if (typeof window.onload != 'function'){  
  149.               window.onload = func;   
  150.           } else{  
  151.               window.onload = function(){  
  152.                   oldonload();  
  153.                   func();  
  154.               }  
  155.           }  
  156.       }  
  157.   
  158.       /** 
  159.        * nodeName属性总是返回大写字母的值，即使在HTML文档中是小写。 
  160.        */  
  161.       if (description.nodeName == "IMG"){} //eg.  
  162.   
  163.       /** 
  164.        * DOM方法在可以用于处理任何一种标记语言写出的文档。（eg. XML, HTML, etc.） 
  165.        * innerHTML支持读取与写入，不会返回任何对插入的内容的引用。（HTML转悠，不能用于其他标记语言文档）     
  166.        */  
  167.   
  168.        /** 
  169.         * 创建元素节点并插入节点树——createElement方法 ＆appendChild方法 
  170.         */  
  171.        var para = document.createElement(nodeName); // eg. "p"  
  172.        // para："文档碎片"，指向引用，有nodeType和nodeName值。  
  173.        parent.appendChild(child);  
  174.        testdiv.appendChild(para); //eg.  
  175.          
  176.        /** 
  177.         * 创建文本节点——createTextNode方法，与前者类似。 
  178.         */  
  179.   
  180.         /** 
  181.          * insertBefore() 
  182.          * 1. 新元素 2. 目标元素 3. 父元素 
  183.          */  
  184.         parentElement.insertBefore(newElement, targetElement)  
  185.   
  186.         /** 
  187.          * Ajax 
  188.          *  对页面请求以异步方式发送到服务器，服务器后台处理 
  189.          *  按需加载和创建页面 
  190.          *  核心：XMLHttpRequest对象——充当浏览器的脚本与服务器之间的中间人。 
  191.          *  服务器端的脚本语言完成了大部分工作。 
  192.          *  不同浏览器XMLHTTP对象不尽相同。为兼容，getHTTPObject函数要...(待我去找个现成的- -) 
  193.          *  XMLHttpRequest最有用的方法：open，用于指定服务器上将要访问的文件，指定请求类型：GET/POST/SEND。getNewContent()...? 
  194.          *  onreadystatechange——事件处理函数，在服务器给XMLHttpRequest对象送回响应时被触发执行。 
  195.          *  指定函数引用时，函数名后不要加(),加括号表示立即调用。 
  196.          *  浏览器会在不同阶段更新readystate的值： 
  197.          *      1：uninitialized 
  198.          *      2：loading 
  199.          *      3：load complete 
  200.          *      4: 正在交互 
  201.          *      5: Complete 
  202.          *  服务器发送回的数据通过responseText属性（保存文本字符串）和responseXML属性（保存Content-Type header中"text/xml"的数据, which is a Document Fragment对象） 
  203.          *  同源策略：使用XMLHttpRequest对象发送的请求只能访问与其所在HTML处于同一个域中的数据，不能向其他域发送请求。 
  204.          *  脚本发送XMLHttpRequest请求后继续执行，不会等待响应返回。 
  205.          *  若其他脚本依赖于服务器响应，相应代码应指定给onreadystatechange属性的那个函数中。 
  206.          *  eg. 提交表单——提交表单触发submit事件，通过onsubmit捕获事件，取消其默认操作（提交整个页面），通过XMLHttpRequest对象向服务器发送数据。 
  207.          */  
  208.   
  209.          /** 
  210.           * 两项原则： 
  211.           * 渐进增强（progressive enhancement）：根据内容使用标记实现良好的结构；逐步加强内容。 
  212.           * 平稳退化：前者做到，后者必然。 
  213.           */  
  214.          /** 
  215.           * CDN（Content Delivery Network）解决分布共享库的问题。 
  216.           * 最终上线代码不要忘记使用Google Closure Tools（提高浏览器读取效率）。 
  217.           */  
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Hu-Yan/p/9111119.html