帮助文档

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++)


你可能感兴趣的:(dom,知识点)