帮助文档

1. DOM概述：

    DHTML：动态HTML技术——凡是能够实现动态效果的技术

    DHTML=HTML+CSS+JS

    鄙视题：

    HTML   XHTML  DHTML  XML

    HTML：超文本标记语言，专门编写网页内容的语言

    XHTML：严格的HTML标准

    DHTML：动态HTML技术，是HTML+CSS+JS的统称

    XML：可扩展的标记语言，标签名和属性名可自定义！

              <student>

                   <name id="fbb">范冰冰</name>

                   <math>91</math>  

                   <chs>65</chs>

                    <eng>95</eng> 

               </student>

XML基本被JSON代替

    JSON：JavaScript Object Notation

          '{"name":范冰冰,"math":91,"chs":65,"eng":95}'

    BOM和DOM：

    window对象：2个角色：

          1. 代替了ES标准中Global，充当全局对象

          2. 封装当前浏览器窗口的功能和属性——BOM

    BOM：Browser Object Model——专门操作浏览器窗口的API

        包括：浏览器窗口的属性和功能

        缺点：没标准——兼容性差

    DOM：Document Object Model——专门操作网页内容的API

        包括：.html网页中编写的一切内容和属性

        优点：有国际标准，所有浏览器几乎100%兼容

       Document其实不仅指网页，而是指一切自描述的结构化文档

    DOM API：2大类：

        1. 核心DOM：通用API，即可以操作HTML文档，也可以操作XML文档。

                  优点：可以对文档内容做任何操作！

                  缺点：API操作繁琐

        2. HTML DOM：DOM Level2，提供了专门操作网页内容的简化版API。但仅对复杂HTML元素进行了简化。

                  优点：API简单

                  缺点：不能完成所有操作，都需要核心DOM补充

        开发：优先使用HTML DOM，再用核心DOM API补充

2. ***DOM Tree

    网页的加载过程：

             Browser                                        Server

       1. 浏览器send request：   -->      查找请求的.html页面

       2. 创建Document对象 <--.html<--返回response

       3. 读取HTML内容在Document对象下搭建DOM Tree

           JQuery

       4. 请求外部css文件:           -->       查找请求的.css文件

                                            <--.css <--  返回response

       5. 将样式设置到DOM Tree

           的节点对象上            

           *同时，计算对象间的大小和位置：layout(reflow)*

           生成Render Tree——加载完样式后的树

       6. 浏览器绘制界面

           window.onload

     根节点：document对象

     Node类型：所有节点对象的父类型

            三大通用属性：

            1. nodeType：当前节点的类型——返回的是数字

                    DOCUMENT_NODE  :  9

                    ELEMENT_NODE : 1

                    ATTRIBUTE_NODE : 2

                    TEXT_NODE : 3

            何时使用：判断获得的节点的类型时

             2. nodeName：节点名称

                    document  :  “#document”

                    ELEMENT :  "全大写标签名"

                    ATTRIBUTE : "属性名"

                    TEXT : "#text"

            何时使用：判断获得的元素节点的标签名时

                     if(obj.nodeName=="INPUT")

             3. nodeValue : 节点值——对元素节点无效

                    ATTRIBUTE : "属性值"

                    TEXT : “文本内容”

      DOM Tree 节点间关系：2组：

           1. 父子关系：parentNode   childNodes firstChild lastChild

           2. 兄弟关系：previousSibling    nextSibling

       **问题1：除了parentNode外，其余都会受到看不见的空字符的影响。空字符也是文本节点！

       **问题2：childNodes：返回NodeList类型的类数组对象

                               包含了父节点下的所有直接子节点对象

                       ***动态集合***：仅包含节点对象的引用，不包含实际属性值！每次访问结合的属性时，都要重新查询DOM树

                  遍历childNodes：

                 效率低：for(var i=0;i<obj.childNodes.length;i++)

                       后果：每循环一次，都要重新查询length的个数

                 解决：for循环的第一部分缓存length的值

                  for(var i=0,len=obj.childNodes.length;i<len;i++)