JS 浏览器BOM

BOM:Browser Object Model  浏览器对象模型

   2.组成:
       window :窗口对象
          1.创建:
          2.方法:
            *与弹出框有关
              1.alert(); 弹出警告框
              2.confirm(); 显示带有一段消息和确认按钮的对话框
                   如果用户点击确定按钮则方法返回true,如果用户点击取消按钮,则方法返回false

  //confirm练习
      var flag = confirm("您确定要退出吗?");
       if(flag){
           //退出操作

           alert("欢迎再次光临")

      }else{
           //提示
           alert("手抖了吗");
       }

              3.prompt(); 显示可提示用户输入的对话框
                   返回值,用来回去用户输入的信息
  //prompt练习 输入框  
 var result = prompt("请输入用户名"); 
 alert(result); 

            *与打开关闭有关的方法
               1.close();关闭浏览器窗口
                  当前窗口,谁调用我,我关谁
               2.open();打开一个新的浏览器窗口
                 返回新的window 对象

 //打开一个新窗口

      <input id="openBtn" type="button" value="打开窗口">
          <input id="closeBtn" type="button" value="关闭窗口">
      var newWindow;
     var openBtn = document.getElementById("openBtn");
     openBtn.onclick=function(){
         //打开窗口
         newWindow=  open("http://www.baidu.com");
     }
     //关闭
      var closeBtn = document.getElementById("closeBtn");
      closeBtn.onclick=function(){
          //关闭窗口
          newWindow.close();
      }

            *与定时器有关的
               1.setTimeout(); 在指定的毫秒数后调用函数或计算表达式
                 clearTimeout();取消上述
                    参数:
                       1.js代码或方法对象
                       2.毫秒值
                    返回值:
                    唯一标号,用于取消定时器

               2.setInterval();指定周期
                 clearInterval();取消

 //一次性的定时器
      var id = setTimeout("alert('boom~~~')",3000);

      //取消
      clearTimeout(id)
      function fun(){

          alert('boom~~~~~');
      }
      //循环定时器
      setInterval(fun,2000);   //每隔2秒出现弹框

定时

          3:属性:
              1.获取BOM对象
                 history
                 location
                 Navigator
                 Screen
              2.获取Dom对象
                 document

          4.特点:
             不需要创建,直接使用window使用    window.方法名();
             window引用可以省略.

       Location : 地址栏对象

           方法:
            *   1.reload 刷新
            *   2.href  :跳转

 var btn = document.getElementById("btn");
     btn.onclick=function(){
         location.reload();

     }

 var href = location.href;
     var gotobaidu = document.getElementById("gotobaidu");
     gotobaidu.onclick=function(){

         location.href="https://www.baidu.com";

     }

简单的刷新跳转

           Navigator :浏览器对象

       Screen:  显示器屏幕对象
       History : 历史记录对象

              属性:
               * length 返回当前窗口历史列表中的url值.

 var btn = document.getElementById("btn");
     btn.onclick =function(){

         var length = history.length;
         alert(length)

     }

 document  文档对象

1.创建
  window.document
  document
2.方法
 1.获取Element对象
   1.getElementByIdById();根据id属性直接获取元素对象,id一般唯一
   2.getElementsByTagName();根据元素名称获取元素名称们,返回值是一个数组
   3.getElementsByClassName();根据class属性值获取元素对象们
   4.getElementsByName();根据name属性获取元素对象们

 <div id="div1">div1</div>
 <div id="div2">div2</div>
 <div id="div3">div3</div>

 <div class="cls1">div4</div>
 <div class="cls1">div5</div>

 <input type="text" name="username">
 <script>
    //1.
    //2.
     var divs = document.getElementsByTagName("div");
     alert(divs.length);

     //
     var cls1 = document.getElementsByClassName("cls1");
     alert(cls1.length);

     //4.
     var user = document.getElementsByName("username");
     alert(user.length);

 </script>

 2.创建其他DOM对象
   createAttribute(name)
   createComment()
   createElement()
   createTextNode()
 3.属性
   .  Element 元素对象
           1.获取/创建:通过document来获取和创建
           2.方法:
                1.removeAttribute();:删除属性
                2.setAttribute():    设置属性
      Node:节点对象,其他的5个父对象

  Element对象

   <a>点我试一试</a>
   <input type="button" id="btn_set" value="设置属性">
   <input type="button" id="btn_remove" value="删除属性">
 <script>
     //获取btn
     var btn_set = document.getElementById("btn_set");
     btn_set.onclick=function(){
         //获取a标签
         var element = document.getElementsByTagName("a")[0];
         element.setAttribute("href","https://www.baidu.com");
     }

     var btn_remove = document.getElementById("btn_remove");
     btn_remove.onclick=function(){
         //获取a标签
         var element = document.getElementsByTagName("a")[0];
         element.removeAttribute("href");
     }

 </script>

 Node 节点对象

节点对象 :其他5个的父对象
    特点:所有dom对可以认为是一个节点
    方法:
    CRUE dom 树:
        appendChild():向节点的子对象列表的节点添加字节点
        removeChild():删除并返回当前节点的指定子节点
        replaceChild():替换

 <title>节点对象</title>
     <style>
         div{
             border: 1px solid red;
         }
         #div1{
             width: 200px;
             height: 200px;
         }
         #div2{
             width: 100px;
             height: 100px;
         }
         #div3{
             width: 120px;
             height: 120px;
             color: aqua;
         }

     </style>
 </head>
 <body>
  <div id="div1">
      <div id="div2"></div>
      div1
  </div>
 <a href="JavaScript:void(0)" id="del">删除div的子节点</a>
  <a href="JavaScript:void(0)" id="add">增加div的子节点</a>
    <!--<button id="del">删除子节点</button>-->
    <script>
       var element_a = document.getElementById("del");
       element_a.onclick=function () {

           var div1 = document.getElementById("div1");
           var div2 = document.getElementById("div2");
           div1.removeChild(div3)

       }
       var element_add = document.getElementById("add");
       element_add.onclick=function () {

           var div1 = document.getElementById("div1");
           var div2 = document.getElementById("div2");
           var div3 = document.createElement("div");
           div3.setAttribute("id","div3");
           div1.appendChild(div3);

       }
  </script>

节点对象

事件对象系统学习

事件:操作
事件源:组件
监听器:代码
注册监听:将事件,事件源,监听器结合在一起

常见的事件:
   1.点击事件
     onclick:单击事件
     ondblclick:双击事件
   2.焦点事件
     onblur:失去焦点     一般用于表单校验
     onfocus:元素获得焦点

   3.加载事件
     onload:一张页面或一幅图像加载完成后实现
   4.鼠标事件
     onmousedown:鼠标按钮被按下
        *定义方法时,定义一个形参,结束event对象
        *event对象的button属性可以获得鼠标的哪个键被点击了
     onmousemove:鼠标被移动
     onmouseout:鼠标从某元素被移开
     onmouseover:鼠标移动到某元素上
     onmouseup:鼠标按键被松开

   5.键盘事件
     onkeydown:键盘某个按键被按下
     onkeyup:键盘按键被松开
     onkeypress:某个按下并松开
   6.选择和改变
     onchange:域的内容被改变
     onselect:文本被选中
   7,表单事件
     onsubmit:确认按钮被点击,表单提交
        可以阻止表单的提交,校验表单
     onreset:重置

 //加载事件
        window.onload=function(){
            //失去焦点事件
            document.getElementById("username").onblur=function(){
                alert("失去焦点了");
            }
               //鼠标移到元素之上
             document.getElementById("username").onmouseover=function(){
                    alert("鼠标来了");
                }
                //鼠标点击事件
            document.getElementById("username").onmousedown=function(event){
                //alert("鼠标点击了");
                alert(event.button);
            }
            //键盘被点击事件
            document.getElementById("username").onkeydown=function(event){
                //alert("键盘按了");
                if (alert(event.keyCode==13)){
                    alert("提交表单");
                }
            }
            //改变了触发
            document.getElementById("username").onchange=function(event){
                //alert("键盘按了");

                    alert("改变了...");
                }
            document.getElementById("city").onchange=function(event){
                //alert("键盘按了");

                alert("改变了...");
            }

            }

            //表单校验
        document.getElementById("from").onsubmit=function(){
            //
            var flag=true;

            return flag;

        }

    </script>

事件的简单案例