JavaScript-DOM、BOM对象

最新推荐文章于 2022-09-01 22:19:08 发布

weixin_45701378

最新推荐文章于 2022-09-01 22:19:08 发布

阅读量54

点赞数

分类专栏： HTML WEB初级

本文链接：https://blog.csdn.net/weixin_45701378/article/details/119859387

版权

WEB初级同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

HTML

8 篇文章 0 订阅

订阅专栏

DOM对象

功能：控制html文档的内容
1、获取页面标签(元素)对象：Element
方法：document.getElementById(“id值”)：通过元素id获取元素对象、
2、操作Element对象：
1）. 修改属性值：

明确获取的对象是哪一个？
查看API文档，找其中有哪些属性可以设置
2）. 修改标签体内容：
* 属性：innerHTML
获取元素对象
使用innerHTML属性修改标签体内容

onclick— 单击事件

如何绑定事件：

直接在html标签上，指定事件的属性(操作)，属性值就是js代码
事件：onclick— 单击事件
通过js获取元素对象，指定事件属性，设置一个函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片切换</title>
  <!--  分析：
    1、获取图片对象
    2、绑定单击事件、
    3、每次点击切换图片
      规则：如果显示图片1，则切换为图片2
    如果显示图片2，则切换为图片1
    使用标记flag来完成-->
</head>
<body>
<img src="../folderDemo/me_1.jpg" width="30%" id="image1">;
<!--<img src="../folderDemo/me_2.jpg" width="30%" id="image2">;-->
<script>
    //1、获取图片对象
    var image=document.getElementById("image1");
    var flag=false;
    //2、绑定单击事件
    image.onclick=function () {
        if (flag){
            image.src="../folderDemo/me1.jpg";
            flag=false;
        }else {
            image.src="../folderDemo/me.jpg";
            flag=true;
        }
    }

</script>

</body>
</html>

BOM对象

概念：Browser Object Model 浏览器对象模型，将浏览器的各个组成部分封装成对象。
组成：

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

Window：窗口对象

方法：

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Window对象</title>
</head>
<body>
<!--<input id="openButton" type="button" value="打开窗口">
<input id="closeButton" type="button" value="关闭窗口">-->
<script>
   // window.alert("hello window");
   /* 确认框
   var flag=confirm("你确定要退出吗");
    //alert(flag);
    if (flag){
        alert("欢迎下次再次光临");
    }else {
        alert("手别抖");
    }*/

    /*输入框
    var result=prompt("请输入用户名");
    alert(result)*/

  /*  打开新窗口
    var openBtn=document.getElementById("openButton");
   openBtn.onclick=function () {
       var newWindow = open("https://www.baidu.com")
   }*/

 /* function fun() {
      alert("boom!!")
  }
  var id =setTimeout("fun();",100);//一次性定时器
  clearTimeout(id)
   var id1 =setInterval("fun();",3000);//循环定时器
  clearTimeout(id1)*/

 var h1 = window.history;
 var h2=history;
 alert(h1);
 alert(h2);
</script>
</body>
</html>

属性

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

特点

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

Location：地址栏对象

创建(获取)：

		1. window.location
		2. location

方法：

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

属性

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>locatio对象</title>
</head>
<body>
<input type="button" id="btn" value="刷新">
<input type="button" id="goItcast" value="go传智">
<script>
    //reload方法，定义一个按钮，点击按钮刷新当前页面
    //1、获取按钮
    var btn = document.getElementById("btn");
    //2、绑定单击事件
    btn.onclick=function () {
        //刷新页面
        location.reload();
    }
    //var hef=location.href;
    //alert(hef);
    var goItcast=document.getElementById("goItcast");
    goItcast.onclick=function () {
        //去访问www.bau.com
        location.href="https://www.baidu.com";
    }
</script>

</body>
</html>

History：历史记录对象

创建(获取)：

1.window.history
2.history

方法：

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

属性：

        * length	返回当前窗口历史列表中的 URL 数量。

Exercise 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动跳转</title>
    <style>
        p{
            text-align: center;
        }
        span{
            color: red;
        }
    </style>
</head>
<body>
<p>
    <span id="time">5</span>秒之后自动跳转首页....
</p>
<script>
    /*分析：
    1、显示页面效果<p>
    2、倒计时读秒效果实现
       2.1 定义一个方法，获取审判标签 修改span标签内容：时间--
       2.2 定义一个定时器，一秒执行一次该方法
    3、在方法中判断时间结果如果<=0,则跳转首页
            */
    var second= 5;
    var time =document.getElementById("time");
    //定义一个方法，获取span标签，修改span标签内容，时间--
    function showTime(){
        second--;
        if (second<=0){
            //跳转首页
            location.href="https://baidu.com";
        }
        time.innerHTML=second+"";
    }
    //设置定时器
    setInterval("showTime();",1000);
</script>
</body>
</html>

Exercise 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>
<img src="../folderDemo/me_1.jpg" id="img" width="30%">
<script>
    /*分析：
    1、在页面上使用img标签展示图片
    2、定义一个方法修改图片对象的src属性
    3、定义一个定时器，每隔3秒调用方法一次*/

    //修改图片属性
    var number=2;
    function fun() {
        number++;
        if (number>2){
            number=1;
        }
        var img=document.getElementById("img");
        img.src="../folderDemo/me_"+number+".jpg";
    }
    //定义定时器
    setInterval(fun,3000);
</script>
</body>
</html>

weixin_45701378

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-DOM、BOM对象

DOM对象功能：控制html文档的内容1、获取页面标签(元素)对象：Element方法：document.getElementById(“id值”)：通过元素id获取元素对象、2、操作Element对象：1）. 修改属性值：明确获取的对象是哪一个？查看API文档，找其中有哪些属性可以设置2）. 修改标签体内容：* 属性：innerHTML获取元素对象使用innerHTML属性修改标签体内容onclick— 单击事件如何绑定事件：直接在html标签上，指定事件的属性(操作)，
复制链接

扫一扫