BOM

    1. 概念： Browser Object Model 浏览器对象模型

      * 将浏览器的各个组成部分封装成对象

    2. 组成：
      (1) window: 窗口对象

      a.创建
b.方法
    与弹出框有关的方法:
        * alert() 显示带有一段消息和一个确认按钮的警告框
        * confirm() 显示带有一段消息及确认按钮和取消按钮的对话框
        * 如果用户点击确定按钮，则方法返回true
        * 如果用户点击取消按钮，则方法返回false
        * prompt() 显示可提示用户输入的对话框
        * 返回值: 获取用户输入的值

    与打开和关闭有关的方法
        * close() 关闭浏览器窗口
        * 哪个对象调用，就关闭谁
        * open() 打开浏览器窗口
        * 返回值: 新的window对象

    与定时器有关的方法
        * setTimeout():    在指定的毫秒数后调用函数或计算表达式
        * 参数:
            ** js代码或方法对象
            ** 毫秒值
            ** 返回值: 唯一标识，用于取消定时器
        * clearTimeout(): 取消由setTimeout()方法设置的timeout
        * setInterval(): 按照指定的周期(以毫秒计)来调用函数或计算表达式
        * clearInterval(): 取消由setInterval()方法设置的timeout

    3. 属性

      1. 获取其它DOM对象:

        • history
        • location
        • Navigator

    1. 特点

                 * window对象不需要创建可以直接使用window使用，window.方法名();
           * window引用可以省略，方法名();
   * Nvaigator: 浏览器对象
   * Screen: 显示器屏幕对象
   * History: 历史记录对象
       1. 创建(获取):
           1. window.history
           2. history
       2. 方法:
           * back() 加载history列表中的前一个url
           * forward() 加载history列表的下一个url
           * go(参数) 加载history列表中的具体某个界面
               * 参数:
                   * 正数: 前进几个历史记录
                   * 负数: 后退几个历史记录
       3. 属性
           * length: 返回当前窗口列表的url数量
   * Location: 地址栏对象
       1. 创建(获取):
           1. window.location
           2. location
       2. 方法:
           * reload() 重新加载当前文档，即刷新功能
       3. 属性:
           * href 设置或返回完整的URL

    2. DOM

      1. 概念: Document Object Model 文档对象模型

        • 将标记语言文档的各个组成部分，封装为对象，可以使用这些对象，对标记语言文档进行CRUD的动态操作

      2. W3C DOM 标准分为3个不同的部分:

        • 核心DOM-针对任何结构化文档的标准模型

          1. Document: 文档对象

            1. 创建(获取): 在HTML DOM模型中可以使用window对象来获取

              1. window.document
              2. document

            2. 方法:

              1. 获取Element对象:

                1. getElementById(): 返回唯一对象
                2. getElementsByTagName(): 根据元素名称获取元素对象们，返回值是数组
                3. getElementsByClassName(): 返回值是数组
                4. getElementsByName(): 返回值是数组

              2. 创建其它DOM对象

                • createElement("<xxx>");

          2. Element: 元素对象

            1. 创建(获取): 通过docunment对象来创建和获取

            2. 方法:

              1. removeAttribute(): 删除属性
              2. setAttribute(): 设置属性
          3. Attribute: 属性对象
          4. Text: 文本对象
          5. Comment: 注释对象

          6. Node: 节点对象，是其它5个对象的父对象

            1. 特点: 所有DOM对象都可以被认为是一个节点

            2. 方法:

              • DOM树

                1. appendChild(): 向节点的子节点列表的结尾添加新的子节点
                2. removeChild(): 删除当前节点的指定子节点
                3. replaceChild(): 用新的节点替换一个子节点

            3. 属性:

              • parentNode: 返回节点的父节点
        • XML DOM-针对XML文档的标准模型

        • HTML DOM-针对HTML文档的标准模型

          1. 标签体的设置和获取: innerHtml
          2. 使用html元素对象的属性: 如: img.src = "";

          3. 控制元素的样式

            • 提前定义好类选择器的样式，通过元素的ClassName属性来设置class属性值
            • 使用元素的style属性来设置: div1.style.border = "1px soild red";

      3. 事件监听机制

        1. 概念: 某些组件被执行了某些操作后，触发某些代码的执行

        2. 常见的事件:

          常见的事件:

          1. 点击事件:

            1. onclick :单击事件
            2. ondblclick :双击事件

          2. 焦点事件

            1. onblur :失去焦点
            2. onfocus :元素获得焦点。

          3. 加载事件:

            1. onload :一张页面或-幅图像完成加载

              • 一般用于JS代码的开始，等待整个网页加载完毕，再开始跑JS代码，不然容易获得不到元素

          4. 鼠标事件:

            1. onmousedown 鼠标按钮被按下

              • 定义方法时，定义一个形参，接收event对象
              • event对象的button属性可以获取鼠标按键的位置
            2. onmouseup 鼠标按键被松开
            3. onmousemove 鼠标被移动
            4. onmouseover 鼠标移到某元素之上
            5. onmouseout 鼠标从某元素移开

          5. 键盘事件:

            1. onkeydown 某个键盘按键被按下
            2. onkeyup 某个键盘按键被松开

          6. 选择和改变

            1. onchange 域的内容被改变
            2. onselect 文本被选中

          7. 表单事件:

            1. onsubmit 提交按钮被点击

              • 注意: 根据返回值true或false来判断是否提交
            2. onreset 重置按钮被点击
    
    * Screen
b. 获取DOM对象:
    * document