bom和dom总结

BOM
1.1    介绍
    1.BOM是browser object model的缩写，简称浏览器对象模型
    2.BOM提供了独立于内容而与浏览器窗口进行交互的对象
    3.由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window
    4.BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
    5.BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C
    6.BOM最初是Netscape浏览器标准的一部分

各个对象间的关系    window--
            1.doucment--2.frames--3.history--4.location--5.navigator--6.screen
            1.document--1.1 anchors--1.2 links--1.3 forms--1.4 images--1.5 location

BOM的主要功能包括：
    1 . 弹出新浏览器窗口的能力。
    2. 移动、 关闭和更改浏览器窗口大小的能力。
    3. 提供web浏览器详细信息的导航对象。
    4. 提供浏览器载入的页面的详细信息的本地对象。
    5. 提供供用户屏幕分辨率详细信息的屏幕对象。
    6. 支持cookie。
    7. IE对BOM进行扩展以包括ActiveX对象类， 可以通过JavaScript来实现ActiveX对象。
注意：BOM是宿主对象。

1.2    定时器（window对象）
   1 .2.1    实现window对象的函数在指定的毫秒数后执行。
        setTimeout( executedFunction, millisecond) ;          //只执行一次

eg:    setTimeout( function( ) {            //放入匿名函数
            console. info( "执行函数！ " ) ;
            }, 1000)

eg：    function execute( ) {                //放入命名函数
            console. info( "执行函数！ " ) ;
            }
        setTimeout( execute, 1000) ;

eg:    setTimeout( " console. info( ' 执行函数！ ' ) " , 1000) ; //直接放入执行代码

tips:    另外， setTimeout()可以返回一个值， 这个值可以传递给clearTimeout()用于销毁这个timeout定时器。
        eg:    var timer = setTimeout( function( ) {
            console. info( 1) ;
            }, 1000) ;
        clearTimeout( timer) ;

1 .2.2     setInterval(间隔执行)
    tips:    window对象的setInterval方法与setTimeout方法很类似， 只是这个方法会在指定毫秒数的间隔里重复调用。

eg:    setInterval( function( ) {            //setInterval也可执行放入执行代码或者命名函数的引 用
            console. info( "执行函数！ " ) ;
                }, 1000) ;
    tips:    使用clearInterval可销毁这个interval定时器.
    eg:    var timer = setInterval( function( ) {
            console. info( "执行函数！ " ) ;
            }, 1000) ;
        clearInterval( timer) ;

1.3 弹出对话框(window对象)
   1 .3.1 alert
    alert()向用户显示一条消息并等待用户关闭对话框。    
    tips:    alert方法会产生阻塞， 也就是说在用户关掉他们所显示的对话框之前， alert后面的代码不会执行。
         这就意味着在弹出一个对话框之前， 代码就会停止运行。
   1 .3.2 confirm
    confirm()也显示一条消息， 要求用户单击“确定”或“取消”按钮， 并返回一个布尔值。    
    eg：    var bool = confirm( " May I have a date with you?" ) ;
            console. info( bool) ;
    tips:    confirm方法也会产生阻塞。
   1 .3.3 prompt
    prompt()同样也显示一条消息， 等待用户输入字符串， 并返回那个字符串。
    prompt()有两种写法,分别是：
    eg：    var inputVal = prompt( "请输入一个值" ) ;
            console. info( typeof inputVal) ;        //有typeof 即是返回值的类型，无则返回值。
    eg：var inputVal = prompt( "请输入一个值" , "默认值" ) ;
    tips：    prompt方法也会产生阻塞。

1.4 打开新窗口和关闭窗口 (window对象)
   1 .4.1 open函数
    使用window对象的open函数可以打开一个新的浏览器窗口（或标签页， 这通常和浏览器的配置选项有关） 。 window.open()载入指定的url到新的或已
    存在的窗口中， 并返回代表那个窗口的window对象。 它有4个可选的参数。
    1 . 第一个参数是要在新窗口中显示的文档的url。 如果这个参数省略了（可以是空串） ， 那么会使用空白页面的url about:blank。
    2. 第二个参数是新打开的窗口的名字（即window.name） ， 如果使用 _blank、 _self、 _parent 或 _top 参数值则是指定引 用的文档将要显示在新的
    空白窗口、 自身窗口、 父窗口或顶层窗口中， 有点类似于a标签的target。
    3. 第三个参数是非标准的， HTML5规范也主张浏览器应该忽略它， 它有很多键值对可以用来设置新打开的窗口的大小位置等信息。
    4. 第四个参数只在第二个参数命名的是一个已存在的窗口时才有用。 它是一个布尔值， 声明了由第一个参数指定的url是应用替换掉窗口浏览器历史
    的当前记录（true） ， 还是应该在窗口浏览历史中创建一个新的记录（false） ， 后者是默认的设置。

1 .4.2 window.close函数
    window.close()函数将关闭一个窗口。
    
    eg：window. close( ) ;    //会关闭掉窗口， firefox是清空文档
    eg：    var newWindow = open( " https: //www. baidu. com" , " _blank" , " " ) ;        //也可以关闭已打开的窗口
        setTimeout( " newWindow. close( ) ; " , 1000) ;

1.5 访问指定URL(window.location对象)
    window对象的location对象属性有一个href属性， 用来指定需要载入的页面的url。
    eg：location. href = " https: //www. baidu. com" ;            //与a标签有点相识。
    
1.6 访问历史(window.history对象)
   1 .6.1 history.back函数
    该函数用来使页面退回到上一个浏览页面， 如果该页面时第一个打开的， 则该方法没有任何效果。
    eg：    history. back( ) ;                 //返回上一个页面

1 .6.2 history.foward函数
    该函数用来使页面前进到下一个浏览页面， 前提是之前使用了back或者go方法。    //前进到刚才浏览的网页。
    eg：history. foward( ) ;                 //进入下一个页面

1 .6.3 history.go()函数
    go(num)函数可指定前进或后退多少个页面， 其中的num控制前进、 后退的页面数， 若num为正数则为前进（如果为1 则相当于foward函数），
    如果num为负数则为后退（如果为-1 则相当于back函数） 。
    eg：    history. go( - 1) ;                 //返回上一个页面，相当于back函数。

1.7 获取客户端屏幕信息(window.screen对象)
    1. window.screen.height                屏幕高度， 以像素记。
    2. window.screen.width                屏幕宽度， 以像素记。
    3. window.screen.availHeight                可以使用的屏幕高度， 不包含工具栏等， 以像素记。
    4. window.screen.availWidth                可以使用的屏幕高度， 以像素记。

2 DOM(Document Object Model)                //文档对象模型
    DOM   ---tpis：
        通过 JavaScript，可以重构整个HTML文档。可以添加、移除、改变或重排页面上的项目。
        要改变页面的某个东西，JavaScript就需要有HTML文档中所有元素进行访问的入口。    
        这个入口，连同对HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。
        在 1998 年，W3C 发布了第一级的 DOM 规范。这个规范允许访问和操作 HTML 页面中的每一个单独的元素。
        所有的浏览器都执行了这个标准，因此，DOM 的兼容性问题也几乎难觅踪影了。DOM 可被 JavaScript 用来读取、改变     
        HTML、XHTML 以及 XML 文档。

2.1 DHTML(Dynamic HTML)
    简介：    DHTML指动态HTML（Dynamic HTML）。
        DHTML 是一种用来创建动态站点的技术组合物。 对大多数人来说， DHTML 意味着 HTML 4.0、 样式表以及 JavaScript 的结合物。
    由四个部分的技术组成：
    1 . HTM L4.0    2. 层叠样式表(CSS)    3. 文档对象模型(DOM )    4. JavaScript

2.2 浏览器工作原理
    1.浏览器将载入的html变为dom树， 但是此时没有任何显示样式。
    2.所有显示的样式， 都是css定义的， 浏览器只会通过css来渲染视图样式。
    3.浏览器会在分别加载好dom树和计算形成css最终样式之后， 在一起渲染成一个完整的页面呈现出来

2.3 DOM介绍
    2.3.1 DOM树
      1.为了使我们能够通过编程的方式来控制网页， W3C组织提出了文档对象模型DOM（Document Object Model） 。
      2.DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。
      3. 这是表示和处理一个HTML或XML文档的常用方法。
      4. DOM的设计是以对象管理组织的规约为基础的， 因此可以用于任何编程语言。

2.3.2 DOM节点类型
        1.文档节点 Document ====根节点。
        2.文档类型节点 DocumentType ====DTD引 用即<! DOCTYPE>。
        3.元素节点 Element=======标签。
        4.文本节点 Text  ======标签中的文本或CDataSection内包含的普通文本。
        5.属性节点 Attr======元素的属性。
        6.CDataSection ====通常是文本节点和注释节点的父类。
        7.注释节点 Comment ===== 注释

2.3.3 节点的属性和方法
        nodeName                节点名字
        nodeValue                节点的值
        nodeType Number                 节点的类型常量之一
        ownerDocument Document             所属文档
        firstChild                     childNodes列表中的第一个节点
        lastChild                     childNodes列表中的最后一个节点
        childNodes                 NodeList 节点的列表
        previousSibling                 前一个兄弟节点
        nextSibling                 后一个兄弟节点
        hasChildNodes()                 是否含有子节点
        attributes                     属性集合
        appendChild(node)                 将node添加到childNodes的末尾
        insertBefore(newnode, refnode)         在childNodes中的refnode之前插入newnode
        removeChild(node)                 从childNodes中删除node
        replaceChild(newnode, oldnode)        将childNodes中的oldnode替换成newnode

2.3.4 DOM节点类型的常量和值
        节点类型         节点类型常量             节点类型值
        元素节点         Node.ELEMENT_NODE             1
        属性节点         Node.ATTRBUTE_NODE               2
        文本节点         Node.TEXT_NODE                  3
        CDATA节点     Node.CDATA_SECTION_NODE              4
        注释节点          Node.COMMENT_NODE                  8
        文档节点           Node.DOCUMENT_NODE                9
        文档类型节点      Node.DOCUMENT_TYPE_NODE          10

3DOM操作HTML
   3.1 所有类型节点的通用操作
    3.1 .1 获取节点
        1 .利用节点关系获取节点
           childNodes - 获取所有子节点。
           firstChild - 获取第一个子节点。
           lastChild - 获取最后一个子节点。
           previousSibling - 获取上一个兄弟节点。
           nextSibling - 获取下一个兄弟节点。
           parentNode - 获取父节点。

2.直接获取节点
           document.getElementById("id") - 根据id获取节点。
             document.getElementsByTagName("div") - 根据标签名称获取节点。
           document.getElementsByClassName("class") - 根据类名获取节点。
             document.getElementsByName("name") - 根据名称获取节点。

3.1 .2 创建的节点
        1 .创建新的节点
        createElement("div") - 创建div的元素节点。
        createTextNode("text") - 创建包含“text”的文本节点。
        eg：
        document. createElement( " p" ) ;
        document. createTextNode( "哈哈" ) ;
    tpis：这个时候你在页面上是看不到p标签的， 因为它还没有跟dom树关联在一起， 创建了一个节点一定要跟dom树发生关联。

2.克隆节点
        cloneNode(bool) - 克隆节点。
        bool为false时只克隆该元素节点。
        bool为true时会克隆该节点和该节点的所有子节点。

3.1 .3 添加节点
        appendChild(node) - 在所有子节点之后添加一个node。
        insertBefore(node, refnode) - 在refnode之前添加一个node，。
        记住此次添加是发生在某元素的子节点上的， 即在某元素的refnode子节点前面加一个node。

3.1 .4 删除节点
        removeChild(node) - 删除node子节点。

3.1 .5 替换节点
        raplaceChild(newnode, oldnode) - 把oldnode替换为newnode。
    tips：记住此次替换是发生在某元素的子节点上的， 即是把某元素的oldnode子节点替换为newnode。

3.1 .6 通用操作（ 增删改）
        innerHTML - 某元素节点所包含的所有HTML， 包括所有元素节点 、 文本节点 以及属性节点。