黑马就业班（02.JavaWeb+项目实战\02.JavaScript）——part2：BOM&DOM

最新推荐文章于 2020-05-31 20:39:02 发布

KongJetLin

最新推荐文章于 2020-05-31 20:39:02 发布

阅读量541

点赞数

文章标签： javascript html css dom bom

本文链接：https://blog.csdn.net/LKJgdut/article/details/104025747

版权

本文介绍了BOM与DOM的相关概念，包括Window窗口对象、Location地址栏对象、History历史记录对象的核心知识。通过实例展示了如何使用Window的方法和属性，以及DOM中的Document、Element和Node对象的操作。还探讨了事件监听机制，并提供了表格全选和表单验证提交的实战案例。

摘要由CSDN通过智能技术生成

BOM与DOM的相关对象，参考文档：文档

今日内容：
	1. JavaScript：
		1) ECMAScript
		2) BOM
		3) DOM

1、事件与DOM的案例介绍
案例1

<img id="light1" src="image1/off.gif" onclick="fun1()"/> <!--注意，我们在标签内部设置的时候需要加括号-->
<img id="light2" src="image1/on.gif" />

 <script>
     function  fun1() {
   
         alert("我被点击了");
     }

     function fun2() {
   
         alert("我也被...");
     }

     var light2 = document.getElementById("light2");
     light2.onclick = fun2; //我们在标签外面设置的时候就不需要加括号，如果在外面设置onclick的时候加括号，就相当于直接调用fun2函数。我们需要的是点击图片才加载函数。
 </script>

案例2

<body>
     <img id="light1" src="image1/off.gif"/>

     <script>
         var light1 = document.getElementById("light1");
         var flag = false;//注意flag需要设置在外面
         light1.onclick = function () {
   
             if(flag)
             {
   
                light1.src = "image1/on.gif";
                flag = false;
             }
             else
             {
   
                 light1.src = "image1/off.gif";
                 flag = true;
             }
         }
     </script>   
 </body>

我们的IDEA没办法显示出我们代码里面的错误，我们可以通过在浏览器界面点击F12，然后点击控制台console就可以找到错误。

2、BOM:
概念：Browser Object Model 浏览器对象模型，将浏览器的各个组成部分封装成对象。
组成：浏览器各个对象的解析见视频5

* Window：窗口对象
* Navigator：浏览器对象
* Screen：显示器屏幕对象
* History：历史记录对象
* Location：地址栏对象

在这里插入图片描述

Window：窗口对象

window对象的相应方法如下

1. 与弹出框有关的方法：
   alert()	显示带有一段消息和一个确认按钮的警告框。
   confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
       * 如果用户点击确定按钮，则方法返回true
       * 如果用户点击取消按钮，则方法返回false
   prompt()	显示可提示用户输入的对话框。
       * 返回值：获取用户输入的值
2. 与打开关闭有关的方法：
   close()	关闭浏览器窗口。
       * 谁调用我 ，我关谁（调用格式：window对象.close）
   open()	打开一个新的浏览器窗口
       * 返回新的Window对象
3. 与定时器有关的方式
   setTimeout()	在指定的毫秒数后调用函数或计算表达式。
       * 参数：
           1. js代码或者方法对象
           2. 毫秒值
       * 返回值：唯一标识，用于取消定时器
   clearTimeout()	取消由 setTimeout() 方法设置的 timeout。

   setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
   clearInterval()	取消由 setInterval() 设置的 timeout。

window方法的代码示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <input type="button" id="openBut" value="打开窗口">;
        <input type="button" id="closeBut" value="关闭窗口">;

        <script>
            /*打开关闭方法
            var OButOpenNode = document.getElementById("openBut");
            var newWin;
            OButOpenNode.onclick = function () {
                newWin = open("http://www.baidu.com");
            };

            var oButCloseNode = document.getElementById("closeBut");
            oButCloseNode.onclick = function () {
                // close();//关闭的是当前窗口
                newWin.close();//如果要关闭打开的新窗口，必须使用open获取新窗口的对象，然后使用新窗口调用close方法
                //注意这个方法是窗口自身的方法，因此要使用“新窗口.close()”关闭
            }
            */


            //一次性定时器
            // setTimeout("fun1()",4000);//第一种调用方法，在“”里面，使用fun1()调用
            // setTimeout(fun1,3000);//第二种调用方法，在“”外面，直接使用fun1函数名调用即可
            //注意，以后调用方法的时候，如果在“”里面的，需要给方法加()，而在“”外面，则直接使用方法名调用即可，不需要加()

            //循环定时器
            // setInterval(fun1,2000);

            //取消定时器
            // var timeout1 = setTimeout(fun1,3000);
            // clearTimeout(timeout1);

            //取消循环定时器
            var timeout2 = setInterval(fun1,2000);
            clearInterval(timeout2);
            function fun1() {
   
                alert('boom')
            }
        </script>
        
    </body>
</html>

轮播图案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <!--
        分析：
        1.在页面上使用img标签展示图片
        2.定义一个方法，修改图片对象的src属性
        3.定义一个定时器，每隔3秒调用方法一次。
        -->
        <img src="image1/banner_1.jpg" id="image" width="100%"><!--设置图片宽度占屏幕的100% -->

        <script>
            var num=1;
            function fun() {
   
                var oImgNode = document.getElementById("image");
                oImgNode.src = "image1/banner_"+num+".jpg";
                num++;
                if(num>3)
                {
   
                    num = 1;
                }
            }
            setInterval(fun , 3000);
        </script>     
    </body>
</html>

window对象的属性：

1. 获取其他BOM对象：
    history
    location
    Navigator
    Screen:
2. 获取DOM对象
    document

相应的代码示例如下：

<script>
  //通过window的属性获取其他BOM对象
    var h1 = window.history;
    alert(h1);
    //当然，window可以省略
    var n = navigator;
    alert(n);
    
    //通过window属性同样可以获取DOM的document对象
    // window.document.getElementById(...);
    document.getElementById(...);//同样，window也可以省略
</script>

window对象的特点

* Window对象不需要创建可以直接使用 window使用。 window.方法名();
* window引用可以省略。  方法名();

Location：地址栏对象

创建(获取)：

	1. window.location
	2. location

方法：

* reload()	重新加载当前文档。刷新

属性：

* href	设置或返回完整的 URL。

代码示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <input type="button" value="refresh" id="btn1">;
        <input type="button" value="baidu" id="btn2">;

        <script>
            //注意，这里使用window对象的location属性来获取Location对象，因此这里用的时候需要使用location（l是小写的）
            var oButBode_1 = document.getElementById("btn1");

            oButBode_1.onclick = function () {
   
                location.reload();
            }

            var href = location.href;
            document.write(href);// http://localhost:63342/java-demo1/lkj_html_module/domAndBomDemo.html?_ijt=10p1k5c0i3e15ke6nlbo1fh44f（url已经对其进行编码）

            var oButBode_2 = document.getElementById("btn2");
            oButBode_2.onclick = function () {
   
                location.href = "https://www.baidu.com";
            }
        </script>
        
    </body>
</html>

自动跳转案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            p{
   
                font-size: 100px;/*设置文字的大小——font-size属性*/
                text-align: center;/*将文字居中的属性是text-align*/
            }
            p span{
   
                color: #FF0000;
            }
        </style>

    </head>
    <body>
        <p>
            <span id="time">5</span>秒之后，自动跳转到首页...
        </p>

        <script>
            var second = 5;
            var time = document.getElementById("time");

            function showTime() {
   
                second--;

                if(second<=0)
                {
   
                    location.href = "http://www.baidu.com";
                }

                time.innerHTML = second+"";//将数字转换为字符串显示
            }
            setInterval(showTime , 1000);//每隔1秒就执行一次showTime，自动倒计时1秒

        </script>
        
    </body>
</html>

History：历史记录对象

注意，History只能代表当前窗口的历史记录对象，而不是代表浏览器的历史记录。
创建(获取)：

      1. window.history
      2. history

方法：

* back()	加载 history 列表中的前一个 URL。
* forward()	加载 history 列表中的下一个 URL。
 * go(参数)	加载 history 列表中的某个具体页面。
     * 参数：
         * 正数：前进几个历史记录
         * 负数：后退几个历史记录

属性：

* length	返回当前窗口历史（不是整个浏览器）列表中的 URL 数量。

跳转演示

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">

        <

最低0.47元/天解锁文章

KongJetLin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
黑马就业班（02.JavaWeb+项目实战\02.JavaScript）——part2：BOM&DOM

今日内容： 1. JavaScript： 1) ECMAScript 2) BOM 3) DOM1、事件与DOM的案例介绍案例1<img id="light1" src="image1/off.gif" onclick="fun1()"/> <img id="light2" src=...
复制链接

扫一扫