BOM

BOM

1. 概念： Browser Object Model 浏览器对象模型
       * 将浏览器的各个组成部分封装成对象
2. 组成： 
       * Windos: 窗口对象
       * Navigator： 浏览器对象
       * Screen : 显示器屏膜对象
       * History ：历史记录对象
       * Location： 地址栏对象 
3. Window:窗口对象
       1. 创建
       2. 方法
             1. 与弹出框有关的方法
             alert()显示带有一段消息和一个确认按钮的警告框
             confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
             prompt() 显示可提示用户输入的对话框
             * 返回值：获取用户输入的值
             2. 与打开关闭有关的方法。
             close()  关闭浏览器窗口
                 * 谁调用我，我关谁
             open()  打开一个新的浏览器窗口
                 * 返回新的Window对象
             3. 与定时器有关的方式
                 setTimeout() 在指定的毫秒数后调用函数或计算表达式
                       *参数：
                            1. js代码或者方法对象
                            2. 毫秒值
                       * 返回值：唯一标识，用于取消定时器 	     
                 clearTimeout() 取消由 setTimeout()方法设置的timeout
                 setInterval()  按照指定的周期(以毫秒计)来调用函数或计算表达式
       3. 属性
             1. 获取其他BOM对象
                 history
                 location
                 Navigator
                 Screen
             2. 获取Dom对象
                 document
       4. 特点
            * Window 对象不需要创建可以直接使用   window使用,window.方法名();
            * Window 引用可以省略。   方法名().
4. Location：地址栏对象
            1. 创建(获取)
                1. window.location
                2. location
            2. 方法
                * reload() 重新加载当前文档。刷新
            3. 属性
                * href   设置或返回完成的 urL.
            案例实现倒计时读秒效果
    <script>
    var seccond = 5;
    function fun() {
        seccond--;
        if (seccond <= 0) {
            location.href = "https://www.baidu.com";
        }
        var elementById = document.getElementById("time");
        time.innerHTML = seccond + "";
    }
    //设置定时器，1秒执行一次该方法
    setInterval(fun, 1000);
</script>
5.History ： 历史记录对象
          1. 创建(获取)：
               1. window.history
               2. history
          2. 方法
               * back() 加载 history 列表中的前一个 URL
               * forward() 加载 history 列表中的下一个 URL
               * go()      加载 history 列表中的某个具体页面
          3. 属性
               * length 返回当前窗口历史列表中的 url 数量。

DOM

* 概念 ：Document Object Model 文档对象模型
       * 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作
* W3C DOM 标准被分为3个不同的部分
       * 核心 DOM - 针对任何结构化文档的标准模型
               * Document ： 文档对象
               * Element :  元素对象
               * Attribute ：属性对象
               * Text : 文本对象
               * Comment : 注释对象
               * Node:节点对象，其他5个的父对象
       * XML DOM - 针对XML 文档的标准模型
       * HTML DOM - 针对HTML文档的标准模型
* 核心DOM模型：
       * Document : 文档对象
               1. 创建(获取)：在html dom模型中可以使用windos对象来获取
                     1. window.document
                     2.document
               2. 方法
                     1. 获取Element对象：
                            1. getElementById():根据id属性值获取元素对象。id属性值一般唯一
                            2.getElementByTagName：根据元素名称获取元素对象们。返回一个数组
                            3.getElementByClassName():根据Class属性值获取元素对象们。返回一个数组
                            4.getElementByName()：根据name属性值获取元素对象们。返回值是一个数组
                     2.创建其他DOM对象
                             createAttribute(name);
                             createComment()
                             createElement()
                             createTexNode()
                      3.属性           
                         
       * Element  ：元素对象
               1. 获取/创建：通过document来获取和创建
               2. 方法：
                      1. removeAttribute(): 删除属性
                      2. setAttribute(): 设置属性
       * * Node :   节点对象，其他5个的父对象
               1. 特点：所有dom对象都可以被认为是一个节点
               2. 方法： 
                       * CRUFD dom输
                       *  appendChild(): 向节点的子节点列表的结尾添加新的节点
                       *  removeChild(): 删除(并返回)当前节点的指定子节点
                       *  replaceChild(): 用新节点替换一个字节点。 
               3./*
                  超链接功能： 1. 可以被点击，样式
                              2. 点击后跳转到href指定的urL
                              需求：保留1功能，去掉2功能
                              实现：href="javascript:void(0);"
               */            
HTML DOM
        1. 标签体的设置和获取: InnerHTML
                * 获取 div.InnerHTML
                * 替换 div.InnerHTML = "<input type='text'>"；
                * 追加 div.InnerHTML  += "<input type='text'>"；
             

事件监听机制：

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