JS笔记(四): BOM和DOM对象

/*
BOM对象:  浏览器窗口对象模型
        1. windows对象(即全局对象):   一个html文档对应一个window对象
            1> 创建: 直接使用
            2> 方法: alert()  // 警示框
                    var res = confirm('info')  // 确认框
                    var res = prompt('info','default-value') // 输入框

                    open("URL")  // 打开一个新窗口   close() // 关闭当前窗口
                    setInterval(f,time) // 循环执行f,会创建一个cloak对象   clearInterval(clock) //清除循环
                    setTimeout(f, time) // 定时调用,会创建一个cloak对象    cleaTimeout(clock)  // 清除定时
       2. history:
          1> 方法:
                 <button onclick=" history.forward()">>>></button>
                 <button onclick="history.back()">back</button>

       3. location:
          1> 方法:
                 location.assign(url)       // 指向新url, 可返回
                 location.reload()          // 刷新
                 location.replace(url)      // 用新url代替当前网页, 不可返回

 */

/*
DOM 对象: HMTL /XML 文本对象
         1. 分为 document , element 节点对象
         2. 每个node节点有 自身属性, 导航属性
            * 自身属性:  nodeName  // 节点名
                       attr     // 节点值属性值
                       innerHTML  // 节点内容，包含内部html
                       innerText  // 节点文本， 不包含html
                       // nodeType   // 节点类型
                       // attributes // 节点属性

            * 导航属性:  parentElement             // 父节点
                       children                  //所有子节点, 返回集合
                       firstElementChild         // 第一个子节点
                       lastElementChild          // 最后一个子节点
                       nextElementSibling        // 下一个兄弟节点
                       previousElementSibling    // 上一个兄弟节点
         3. 查找方法:
                   getElementById("id");       //唯一， element不支持
                   getElementsByTagName("p");  // 标签集合
                   getElementsByClassName("");  // class集合
                   getElementsByName("");       // 自定义类集合， element不支持

         4. 事件events:
              1.> 添加事件的两种方式:
                  <input type="text" onclick="begin()">  // 直接写在html文件
                  ele.onclick = function(){};            // 在js文件中添加  , √

              2.> 事件类型:
                        onclick       // 单击
                        ondblclick    // 双击

                        onfocus     //元素获得焦点
                        onblur      // 元素失去焦点，表单验证
                        onsubmit     // 确认按钮被点击。 只能给form元素使用.在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交

                        onkeydown      // 键盘按下一个键
                        onload         // 页面加载完成时执行 onload 属性开发中 只给 body元素加

                        onmousemove    // 鼠标被移动。
                        onmouseout     // 鼠标从某元素移开。
                        onmouseover    // 鼠标移到某元素之上。
                        onmouseleave   // 鼠标从元素离开

                        event           // 记录事件的信息   event.preventDefault();  // 阻止该事件
                                                         event.stopPropagation(); // 阻止该事件向外传播

转载于:https://www.cnblogs.com/lancelotxly/p/10844596.html