JavaScript-BOM

最新推荐文章于 2024-05-15 15:59:38 发布

weixin_45824497

最新推荐文章于 2024-05-15 15:59:38 发布

阅读量79

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/weixin_45824497/article/details/103490461

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JavaScript–BOM

BOM简单学习：为了满足案例要求

功能：控制html文档的内容
代码：获取页面标签（元素）对象Element

*document.getElementById(“id值”)：通过元素的id获取元素对象
操作Element对象：

修改标签体内容：

属性：innerHTML

    <h1 id="title">不不不不</h1>
    <script>
            var title = document.getElementById("title");
            alert("我要换内容了")
            title.innerHTML = "好好好好";
    </script>

事件简单执行

点灯开关

功能：某些组件被执行某些操作后，触发某些代码的执行
绑定事件

1、直接在html标签上，指定事件的属性（操作），属性值就是js代码；

事件：onclick – 单机事件

2、通过js获取元素对象，指定事件属性，设置一个函数

        //1、获取图片对象
        var cat1 = document.getElementById("cat1");
        var flag = false;
        //2、绑定事件
        cat1.onclick = function(){
            if(flag){//判断如果灯是开的，则灭掉
                cat1.src = "img/off.jpg";
                flag = false;
            }else{//如果灯是灭的，则灭掉
                cat1.src="img/on.jpg";
                flag = true;
            }
        }

轮播图

setInterval(参数): 按照指定的周期（以毫秒计）来调用函数或计算表达式

参数：

js代码或者方法对象
毫秒值

        var cat1 = document.getElementById("img");
        //修改图片src属性
        var number = 1;
        function fun(){
            number++;
            //判断number是否大于3
            if(number > 3){
                number = 1;
            }
            img.src = "../Login笔记/cat" + number + ".jpg";
        }
        // 定义定时器,每隔三秒调用方法一次
        setInterval(fun,3000);

Location地址栏对象

1、创建（获取）

window.location
location

2、方法

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

        //获取按钮
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            //刷新页面
            location.reload();
        }

href 设置或返回完整的URL

        var href = location.href;
        var gobaidu = document.getElementById("gobaidu");
        gobaidu.onclick = function(){
            //去访问百度网站
            location.href = "http://www.baidu.com";
        }

案例：自动跳转

    //页面效果
    <style>
        p {
            text-align: center;
        }
        span {
            color: red;
        }
    </style>
</head>
<body>
    <p>
      <span id="time"></span>秒之后自动跳转页面……
    </p>
    <script>
        var second = 5;
        //定义一个方法，获取span标签，修改span标签体内容，时间--
        function showTime(){
            var time = document.getElementById("time");
            time.innerHTML = second + "";
            if(second<=0){
            location.href="http://www.baidu.com";
            }
            second--;
        }
        //设置定时器，1秒执行一次该方法
        setInterval(showTime,1000);
    </script>

BOM:

1、概念：Browser Object Model 浏览器对象模型

将浏览器的各个组成部分封装成对象

2、组成：

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

window对象

window对象不需要创建可以直接使用window使用。window.方法名;
window引用可以省略。方法名（）;

方法：

1、与弹出框有关的方法

alert() 显示带有一段消息和一个确认按钮的警告框

confirm（）显示带有一段消息以及确认按钮和取消按钮的对话框

如果用户点击确定按钮，则方法返回true
如果用户点击取消按钮，则方法返回false

prompt()显示可提示用户输入的对话框

返回值：获取可提示用户输入的对话框

2、与开发有关的方法

close()关闭浏览器窗口

谁调用我，我关谁

open()打开一个新的浏览器窗口

返回新的window对象

3、与定时器有关的方法

setTimeout() 在指定毫秒数后调用函数或计算表达式

参数：
1、js代码或者方法对象
2、毫秒值
返回值：唯一标识，用于取消定时器

clearTimeout() 取消由setTimeout()方法设置的timeout。

setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式

clearInterval() 取消由 setInterval()设置的timeout

History:历史记录对象

1、创建（获取）

window.history
history

2、方法

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

3、属性

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

weixin_45824497

关注

1
点赞
踩
0

收藏

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

JavaScript–BOMBOM简单学习：为了满足案例要求功能：控制html文档的内容代码：获取页面标签（元素）对象Element*document.getElementById(“id值”)：通过元素的id获取元素对象操作Element对象：修改标签体内容：属性：innerHTML <h1 id="title">不不不不</h1> &l...
复制链接

扫一扫