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