32-JavaScript-DOM-BOM简介-node常用方法和属性-window对象常用方法

- BOM 介绍
- dom 对象
   - dom对象简介
   - 常用dom对象层次图
- dom对象详解
   - window
   - event
   - document
   - body  
   - style
   - image
   - link
   - form
   - all
   - 其他

1. BOM

    Browser Object Model   
    不属于文档的一些东西, 
    Window Navigator Screen History Location
    w3c, 浏览器规范, 

2. DOM对象层次图

 window
   |-- event
   |-- Location         
   |-- History          
   |-- Navigator        
   |-- screen           
   |-- document    
             |-- body
             |-- styleSheet   
             |-- image
             |-- link
             |-- form
             |-- all
             |-- frame                   

3. 常用 DOM对象 的属性和方法

 1) 属性

    nodeName
    nodeValue
    nodeType
    fristChild
    lastChild
    childNodes
    previousSibling
    nextSibling
    ownerDocument
    attributes

 2) 方法

    hasChildNodes()
    appendChild(node)
    removeChild(node)
    replaceChild(oldNode, newNode)
    insertBefore(newNode, refNode)

4. window对象

 4.1 概念

    window对象 表示 一个浏览器窗口 或 一个框架.
    window对象是全局对象, 
    可直接引用当前window对象的属性和方法 

 4.2 常用方法

 1) alert(message)

    显示带有一条指定消息和一个 OK 按钮的警告框

 2) confirm(message)

  ① 功能

    用于显示一个带有指定消息和 OK 及取消按钮的对话框

    返回值

        确认 - 返回 true
        取消 - 返回 false

  ② 示例

<button οnclick="testConfirm()">conform</button>

    function testConfirm() {
        var result = window.confirm("您确认这么做?");
        console.info( typeof(result) + "  " + result );
    }

 3) setInterval(func, millisec[, args]) 

    / clearInterval(id_of_setinterval)

  ① 功能

    可按照指定的周期（以毫秒计）来调用函数或计算表达式
    一直执行, 直到 clearInterval() 被调用或窗口被关闭。

    参数

        func     - 要调用的函数或要执行的代码串。
        millisec - 周期性执行或调用 code 之间的时间间隔，以毫秒计。

    返回值    

        一个可以传递给 Window.clearInterval() 
        从而取消对 func 的周期性执行的值

  ② 示例 - 时钟 动画

    <button οnclick="run()">run</button>
    <button οnclick="stop()">stop</button>
    <div id="clock" style="background-color: gray;"></div>

    var id_of_setinterval;

    var clock;
    var img;
       
    window.onload = function() {
       clock = document.getElementById("clock");
       img = document.getElementById("img");
    }

    function showTime() {
        // console.info( new Date().toLocaleString() );
        clock.innerHTML = new Date().toLocaleString();
    }

    function run() {
       id_of_setinterval = window.setInterval(showTime, 1000);
    }

    function stop() {
        window.clearInterval(id_of_setinterval);
    }

    <button οnclick="animate()">动画</button><br/>
    <img id="img" src="1.jpg"/>

    // 让静态图片动起来, 
    // 1.jpg 2.jpg 3.jpg 3.jpg 连续更换
    function animate() {
        var count = 1;
        window.setInterval(function(){
            img.src = (count++ % 4 + 1) + ".jpg";
        }, 500);
    }

 4) setTimeout(code,millisec)

   / clearTimeout(id_of_settimeout)

  ① 功能

    用于在指定的毫秒数后调用函数或计算表达式,只执行一次

    参数

        code     要调用的函数后要执行的 JavaScript 代码串。
        millisec 在执行代码前需等待的毫秒数。

  ② 示例

    window.setTimeout("alert('setTimeout')",2000);