JavaScript BOM

itzhuzhu.

已于 2022-05-05 10:02:40 修改

阅读量1.9k

点赞数 1

分类专栏：前端文章标签： javascript JavaScript BOM Windows窗口对象 Location地址栏对象 JavaScript封装

于 2021-12-08 13:43:39 首次发布

本文链接：https://blog.csdn.net/weixin_45477086/article/details/121776211

版权

前端专栏收录该内容

18 篇文章 1 订阅

订阅专栏

`JavaScript BOM：`

BOM(Browser Object Model)：浏览器对象模型。
将浏览器的各个组成部分封装成不同的对象，方便我们进行操作。

在这里插入图片描述

`Windows窗口对象：`

定时器：

唯一标识 setTimeout(功能，毫秒值)：设置一次性定时器。
clearTimeout(标识)：取消一次性定时器。
唯一标识 setInterval(功能，毫秒值)：设置循环定时器。
clearInterval(标识)：取消循环定时器。

加载事件：

window.onload：在页面加载完毕后触发此事件的功能。

代码实现：

<body>
<div id="div">呵呵呵</div>
</body>

<script>
    // 定时器
    function fun() {
        alert("测试定时器")
    }

    // 设置一次性定时器  window是可以省略的
    let d1 = window.setTimeout("fun()", 1000);
    // 取消定时器
    clearTimeout(d1);

    // 设置循环定时器
    let d2 = setInterval("fun()", 3000);
    clearTimeout(d2);

    // 加载事件
    let l = document.getElementById("div");
    alert(l);
</script>

`Location地址栏对象：`

href 属性就是浏览器的地址栏。我们可以通过为该属性设置新的 URL，使浏览器读取并显示新的 URL 的内容。

代码实现：

<body>
<p>
    注册成功！<span id="time">3</span>秒之后自动跳转到首页...
</p>
</body>
<script>
    //1.定义方法。改变秒数，跳转页面
    let num = 3;

    function showTime() {
        num--;

        if (num <= 0) {
            //跳转首页
            location.href = "https://www.itzhuzhu.com";
        }

        let span = document.getElementById("time");
        span.innerHTML = num;
    }

    //2.设置循环定时器，每1秒钟执行showTime方法
    setInterval("showTime()", 1000);
</script>

`案例-动态广告：`

广告显示三秒以后就会消失

<body>
<!-- 广告图片 -->
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa0.att.hudong.com%2F30%2F29%2F01300000201438121627296084016.jpg&refer=http%3A%2F%2Fa0.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618471290&t=65d3e3ff8868d65421fac3906826c7d4"
     id="tp" width="100%"/>
</body>
<script>
    //1.设置定时器，3秒后显示广告图片
    setTimeout(function () {
        let img = document.getElementById("tp");
        img.style.display = "block";
    }, 3000);

    //2.设置定时器，3秒后隐藏广告图片
    setTimeout(function () {
        let img = document.getElementById("tp");
        img.style.display = "none";
    }, 6000);
</script>

`JavaScript封装：`

封装：将复杂的操作进行封装隐藏，对外提供更加简单的操作。

获取元素的方法

方法名	说明
document.getElementById(id值)	根据 id 值获取元素
document.getElementsByName(name值)	根据 name 属性值获取元素们
document.getElementsByTagName(标签名)	根据标签名获取元素们

html代码：：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>封装</title>
</head>
<body>
    <div id="div1">div1</div>
    <div name="div2">div2</div>
</body>
<script src="my.js"></script>
<script>
    let div1 = getById("div1");
    alert(div1);

    // let div1 = document.getElementById("div1");
    // alert(div1);

    // let divs = document.getElementsByName("div2");
    // alert(divs.length);

    // let divs2 = document.getElementsByTagName("div");
    // alert(divs2.length);
</script>
</html>

js封装：

function getById(id){
    return document.getElementById(id);
}

function getByName(name) {
    return document.getElementsByName(name);
}

function getByTag(tag) {
    return document.getElementsByTagName(tag);
}