JavaScript BOM

浅笑心柔142

于 2024-10-04 14:46:51 发布

阅读量164

点赞数 3

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_72013756/article/details/142431611

版权

一、BOM简介

JavaScript由三部分组成：

ECMAScript 核心语法
DOM 文档对象模型，核心对象是document，用来操作页面文档
BOM 浏览器对象模型，核心对象是window，用来操作浏览器

二、window对象

常用属性：

名称	含义
history	有关客户访问过的URL的信息
location	有关当前 URL 的信息，子级DOM对象
document	表示浏览器窗口中的HTML文档，子级DOM对象

//window的属性
        console.log(window.document);
        console.log(document);//省略了window前缀
        console.log(location);
        console.log(history);

常用方法：

方法名	含义
alert(text)	显示一个带有提示信息和确定按钮的警告框
prompt(text)	显示一个带有提示信息、文本输入框、确定和取消按钮的输入框，返回值为输入的数据
confirm(text)	显示一个带有提示信息、确定和取消按钮的确认框，确定返回true，取消返回false
open(url,name, options)	打开具有指定名称的新窗口，并加载给定url所指定的文档
setTimeout(fn,delay)	设置一次性定时器，在指定毫秒值后执行某个函数
setInterval(fn,delay)	设置周期性定时器，周期性循环执行某个函数
clearTimeout(timer)	清除一次性定时器
clearInterval(timer)	清除周期性定时器
scrollTo(xpos,ypos)	把内容滚动到指定的坐标，即设置滚动条的`偏移位置`
scrollBy(xnum,ynum)	把内容滚动指定的像素数，即设置滚动条的`偏移量`

<head>
    <script>
//window的方法
        //1.alert()
        alert(111);
        window.alert(111);
        //2.prompt()
        var name=prompt("请输入用户名：");
        console.log(name);
        //3.confirm()
        var flag=confirm("确定要删除吗？");
        console.log(flag);
        //4.open()
        function f1(){
            open("用户信息管理.html","user","width=500px,height=500px");
        }
        //5.setTimeout()
        var timer;
        function f2(){
        //5秒后执行
        timer=setTimeout(function(){
            console.log("5秒后出现");
        },5000);//单位为毫秒
        }
       //6.setInterval()
       function f3(){
        //每隔2秒执行一次
        timer1=setInterval(function(){
            console.log("每2秒执行一次");
        },2000);
       }
       //7.clearTimeout()
       function f4(){
        clearTimeout(timer);
       }
       //8.clearInterval()
       function f5(){
        clearInterval(timer1);
       }
      //9.scrollTo()
      function f6(){
        scrollTo(0,200);//向下移动到200像素的位置
      }
      //10.scrollBy()
      function f7(){
        scrollBy(0,200);//向下再移动200像素
      }


   </script>
</head>
<body>
    <button onclick="f1()">打开一个新窗口</button>
    <button onclick="f2()">一次性计时器</button>
    <button onclick="f3()">周期性计时器</button>
    <button onclick="f4()">关闭一次性计时器</button>
    <button onclick="f5()">关闭周期性计时器</button>
    <button onclick="f6()">移动滚动条1</button>
    <button onclick="f7()">移动滚动条2</button>
    <hr>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>p5</p>
    <p>p6</p>
    <p>p7</p>
    <p>p8</p>
    <p>p9</p>
    <p>p10</p>
    <p>p11</p>
    <p>p12</p>
    <p>p13</p>
    <p>p14</p>
    <p>p15</p>
    <p>p16</p>
    <p>p17</p>
    <p>p18</p>
    <p>p19</p>
    <p>p20</p>
    <p>p21</p>
    <p>p22</p>
    <p>p23</p>
    <p>p24</p>
    <p>p25</p>
    <p>p26</p>
    <p>p27</p>
    <p>p28</p>
    <p>p29</p>
    <p>p30</p>
    <p>p31</p>
    <p>p32</p>
    <p>p33</p>
    <p>p34</p>
    <p>p35</p>
    <p>p36</p>
    <p>p37</p>
    <p>p38</p>
    <p>p39</p>
    <p>p40</p>
    <p>p41</p>
    <p>p42</p>
    <p>p43</p>
    <p>p44</p>
    <p>p45</p>
    <p>p46</p>
    <p>p47</p>
    <p>p48</p>
    <p>p49</p>
    <p>p50</p>
    <p>p51</p>
    <p>p52</p>
    <p>p53</p>
    <p>p54</p>
    <p>p55</p>
    <p>p56</p>
    <p>p57</p>
    <p>p58</p>
    <p>p59</p>
    <p>p60</p>
    <p>p61</p>
    <p>p62</p>
    <p>p63</p>
    <p>p64</p>
    <p>p65</p>
    <p>p66</p>
    <p>p67</p>
    <p>p68</p>
    <p>p69</p>
    <p>p70</p>
    <p>p71</p>
    <p>p72</p>
    <p>p73</p>
    <p>p74</p>
    <p>p75</p>
    <p>p76</p>
    <p>p77</p>
    <p>p78</p>
    <p>p79</p>
    <p>p80</p>
    <p>p81</p>
    <p>p82</p>
    <p>p83</p>
    <p>p84</p>
    <p>p85</p>
    <p>p86</p>
    <p>p87</p>
    <p>p88</p>
    <p>p89</p>
    <p>p90</p>
    <p>p91</p>
    <p>p92</p>
    <p>p93</p>
    <p>p94</p>
    <p>p95</p>
    <p>p96</p>
    <p>p97</p>
    <p>p98</p>
    <p>p99</p>
    <p>p100</p>
</body>

常用事件：

事件名	含义
onclick	鼠标单击
onload	页面加载完成
onscroll	窗口滚动条滑动

//window的事件
      window.onclick=function(){
        console.log(111);
      }
      window.onload=function(){
        console.log(222);
      }
      window.onscroll=function(){
        console.log(333);
      }

注：由于window对象是BOM结构的顶层对象，所以在调用window的属性和方法可以省略window.

三、location对象

常用属性：

href 设置或返回地址栏中的url

常用方法：

reload() 重新加载当前页

<head>
    <script>
        function dolocation(){
            //获取地址栏中的url
            console.log(location.href);
            //设置地址栏中的url，实现页面跳转
            location.href="https://www.baidu.com";
            //刷新页面
            location.reload();
        }
    </script>
</head>
<body>
    <button onclick="dolocation()">操作location</button>
</body>

四、history对象

常用方法：

方法名	含义
back( )	后退，加载History列表中的上一个url
forward( )	前进，加载History列表中的下一个url
go(number)	浏览器移动指定的页面数

<head>
    <script>
        function f1(){
            history.back();
        }
        function f2(){
            history.forward();
        }
        function f3(){
            history.go(1);//等价于history.forward()
            history.go(-1);//等价于history.back()
            history.go(0);//等价于location.reload()
        }
    </script>
</head>
<body>
    <button onclick="f1()">后退</button>
    <button onclick="f2()">前进</button>
    <button onclick="f3()">切换历史</button>
</body>