码迷,mamicode.com
首页 > Web开发 > 详细

JS 浏览器BOM

时间:2020-09-17 21:42:03      阅读:36      评论:0      收藏:0      [点我收藏+]

标签:输入   closed   body   移动   blur   校验   地址栏   定时   turn   

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

2.组成:
window :窗口对象
1.创建:
2.方法:
*与弹出框有关
1.alert(); 弹出警告框
2.confirm(); 显示带有一段消息和确认按钮的对话框
如果用户点击确定按钮则方法返回true,如果用户点击取消按钮,则方法返回false
 1  //confirm练习
 2      var flag = confirm("您确定要退出吗?");
 3       if(flag){
 4           //退出操作
 5 
 6           alert("欢迎再次光临")
 7 
 8 
 9      }else{
10           //提示
11           alert("手抖了吗");
12       }

 


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

*与打开关闭有关的方法
1.close();关闭浏览器窗口
当前窗口,谁调用我,我关谁
2.open();打开一个新的浏览器窗口
返回新的window 对象
 1 //打开一个新窗口
 2 
 3      <input id="openBtn" type="button" value="打开窗口">
 4          <input id="closeBtn" type="button" value="关闭窗口">
 5      var newWindow;
 6     var openBtn = document.getElementById("openBtn");
 7     openBtn.onclick=function(){
 8         //打开窗口
 9         newWindow=  open("http://www.baidu.com");
10     }
11     //关闭
12      var closeBtn = document.getElementById("closeBtn");
13      closeBtn.onclick=function(){
14          //关闭窗口
15          newWindow.close();
16      }

 


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


2.setInterval();指定周期
clearInterval();取消
技术图片
 1 //一次性的定时器
 2      var id = setTimeout("alert(‘boom~~~‘)",3000);
 3 
 4      //取消
 5      clearTimeout(id)
 6      function fun(){
 7 
 8          alert(‘boom~~~~~‘);
 9      }
10      //循环定时器
11      setInterval(fun,2000);   //每隔2秒出现弹框
定时

 





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

4.特点:
不需要创建,直接使用window使用 window.方法名();
window引用可以省略.
       Location : 地址栏对象
           方法:
* 1.reload 刷新
* 2.href :跳转
技术图片
 1 var btn = document.getElementById("btn");
 2     btn.onclick=function(){
 3         location.reload();
 4 
 5     }
 6 
 7 
 8 var href = location.href;
 9     var gotobaidu = document.getElementById("gotobaidu");
10     gotobaidu.onclick=function(){
11 
12         location.href="https://www.baidu.com";
13 
14     }
简单的刷新跳转

 


Navigator :浏览器对象

Screen: 显示器屏幕对象
History : 历史记录对象
              属性:
* length 返回当前窗口历史列表中的url值.
1 var btn = document.getElementById("btn");
2     btn.onclick =function(){
3 
4         var length = history.length;
5         alert(length)
6 
7     }

                 document  文档对象

 

1.创建
window.document
document
2.方法
1.获取Element对象
1.getElementByIdById();根据id属性直接获取元素对象,id一般唯一
2.getElementsByTagName();根据元素名称获取元素名称们,返回值是一个数组
3.getElementsByClassName();根据class属性值获取元素对象们
4.getElementsByName();根据name属性获取元素对象们
 1 <div id="div1">div1</div>
 2 <div id="div2">div2</div>
 3 <div id="div3">div3</div>
 4 
 5 <div class="cls1">div4</div>
 6 <div class="cls1">div5</div>
 7 
 8 <input type="text" name="username">
 9 <script>
10    //1.
11    //2.
12     var divs = document.getElementsByTagName("div");
13     alert(divs.length);
14 
15     //3
16     var cls1 = document.getElementsByClassName("cls1");
17     alert(cls1.length);
18 
19     //4.
20     var user = document.getElementsByName("username");
21     alert(user.length);
22 
23 
24 </script>

 



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

 

  Element对象
 1   <a>点我试一试</a>
 2   <input type="button" id="btn_set" value="设置属性">
 3   <input type="button" id="btn_remove" value="删除属性">
 4 <script>
 5     //获取btn
 6     var btn_set = document.getElementById("btn_set");
 7     btn_set.onclick=function(){
 8         //获取a标签
 9         var element = document.getElementsByTagName("a")[0];
10         element.setAttribute("href","https://www.baidu.com");
11     }
12 
13     var btn_remove = document.getElementById("btn_remove");
14     btn_remove.onclick=function(){
15         //获取a标签
16         var element = document.getElementsByTagName("a")[0];
17         element.removeAttribute("href");
18     }
19 
20 </script>

       Node 节点对象

节点对象 :其他5个的父对象
特点:所有dom对可以认为是一个节点
方法:
CRUE dom 树:
appendChild():向节点的子对象列表的节点添加字节点
removeChild():删除并返回当前节点的指定子节点
replaceChild():替换
技术图片
 1 <title>节点对象</title>
 2     <style>
 3         div{
 4             border: 1px solid red;
 5         }
 6         #div1{
 7             width: 200px;
 8             height: 200px;
 9         }
10         #div2{
11             width: 100px;
12             height: 100px;
13         }
14         #div3{
15             width: 120px;
16             height: 120px;
17             color: aqua;
18         }
19 
20 
21     </style>
22 </head>
23 <body>
24  <div id="div1">
25      <div id="div2"></div>
26      div1
27  </div>
28 <a href="JavaScript:void(0)" id="del">删除div的子节点</a>
29  <a href="JavaScript:void(0)" id="add">增加div的子节点</a>
30    <!--<button id="del">删除子节点</button>-->
31    <script>
32       var element_a = document.getElementById("del");
33       element_a.onclick=function () {
34 
35 
36           var div1 = document.getElementById("div1");
37           var div2 = document.getElementById("div2");
38           div1.removeChild(div3)
39 
40       }
41       var element_add = document.getElementById("add");
42       element_add.onclick=function () {
43 
44 
45           var div1 = document.getElementById("div1");
46           var div2 = document.getElementById("div2");
47           var div3 = document.createElement("div");
48           div3.setAttribute("id","div3");
49           div1.appendChild(div3);
50 
51       }
52  </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>
事件的简单案例

 









JS 浏览器BOM

标签:输入   closed   body   移动   blur   校验   地址栏   定时   turn   

原文地址:https://www.cnblogs.com/yumu77/p/13650201.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!