JavaScript基础（三）- BOM和DOM对象

函数	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
comfirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。

alert()函数：弹出警告框，函数的内容就是警告框的内容

<script>
    //window对象是全局对象，window对象的属性和方法在调用时可以省略window.
    window.alert("Hello BOM");
    alert("Hello BOM Window");
</script>

confirm()函数：弹出确认框，并且提供两个按钮，分别是确认和取消

confirm("您确认删除该记录吗?");

confirm()函数有一个返回值用来知道用户点击了确认还是取消，分别返回ture和false。我们可以根据返回值来决定是否执行后续操作。

//confirm --确认提示框，点击确认返回true, 点击取消返回false
let flag = confirm("您确认要删除吗？")//用falg接受返回值
console.log(falge);
if(flage){
    ...
}

setInterval()：定时器，用于周期性的执行某个功能，并且是循环执行。该函数需要两个参数：

fn:函数，需要周期性执行的功能代码

毫秒值：间隔时间（单位为ms）

// setInterval --周期性的定时器, 参数1代表要触发的函数【会触发多次】
//参数2代表时间，单位是ms
let i = 0;
setInterval(() => {
    i++;
    console.log("定时器执行" + i + "次");
},1000)

刷新页面，浏览器每个一段时间都会在控制台输出，结果如下：

setTimeout(fn,毫秒值):定时器，只会在一段时间后执行一次功能。参数和setInterval一致

//setTimeout --延迟定时器，只会触发一次
setTime(() => {
    console.log("三秒时间到!");
},3000);

浏览器打开控制台，三秒之后会出现"三秒时间到！"

2.locational地址栏对象

对于这个对象，我们常用的是href属性，用于获取或者设置浏览器的地址信息，添加如下代码：

//Location地址栏对象
    // window.location
    alert(location.href);
    location.href = "https://www.itcast.cn";// 设置url地址--页面会自动跳转

浏览器效果如下：首先弹框展示浏览器地址栏信息

DOM

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

封装的对象分为

Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象

如下图，左边是 HTML 文档内容，右边是 DOM 树

那么我们学习DOM技术有什么用呢？主要作用如下：

改变 HTML 元素的内容
改变 HTML 元素的样式（CSS）
对 HTML DOM 事件作出反应
添加和删除 HTML 元素

DOM对象

DOM对象：浏览器根据HTML标签生成的JS对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性，就会自动映射到标签身上
DOM的核心思想：将网页的内容当做对象来处理
document对象
- 网页中所有内容都封装在document对象中
- 它提供的属性和方法都是用来访问和操作网页内容的，如：document.write(…)
DOM操作步骤:
- 获取DOM元素对象
- 操作DOM对象的属性或方法 (查阅文档)

获取DOM对象

根据CSS选择器来获取DOM元素，获取到匹配到的第一个元素：

document.querySelector('CSS选择器');

2.根据CSS选择器来获取DOM元素，获取匹配到的所有元素：

document.querySelectorAll('CSS选择器');

注意：获取到的所有元素，会封装到一个NodeList节点集合中，是一个伪数组（有长度、有索引的数组，但是没有push、pop等数组方法）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-DOM</title>
</head>

<body>
    <span id="sid">DOM元素1</span><br>
    <span class="txt">DOM元素2</span><br>
    <span class="txt">DOM元素3</span><br>

    <script>
        // 通过document对象获取元素对象

        // 1.通过css选择器获取单个元素对象--如果存在多个，只返回第一个
        let s1 = document.querySelector('#sid');
        // alert(s1);
        // 需求：将 DOM元素1 修改成 Hello Dom
        // alert(s1.innerHTML);
        s1.innerHTML = 'Hello Dom';

        // 2.通过css选择器获取所有元素对象
        let s2 = document.querySelectorAll('.txt');
        // alert(s2);
        //用forEach数组的方法来将获取的txt元素数组遍历并且改为指定内容
        s2.forEach((s) => {
            s.innerHTML = 'Hello DOM';
        })
    </script>
</body>

</html>

在教程网站中我们可以查阅到element.innerHTML是用来设置或返回元素的内容

上面代码中用到：s1.innerHTML = 'Hello Dom';

s2.innerHTML = 'Hello Dom';

是因为他们用let s1 = document.querySelect('#sid');来获取元素，返回值为s1

案例

场景：订单支付完成后，5秒之后跳转到系统首页（www.jd.com）

效果如下所示：

分析：

要想改变表示时间的数字，我们首先要获取元素对象，这里我们要用到DOM操作
要实现倒计时效果，就是每一秒钟执行一次的一个周期性计时器，并循环执行，每隔一秒执行一次把数字减1，直到减为0，所以这里我们要用到一个定时器：setInterval(...)
要想改变数字，我们还需要用innerHTML属性来修改标签的内容
跳转网页，就是要修改地址栏里的地址，我们需要用location来设置地址栏的信息。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .center {
            text-align: center;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div class="center">
        您好, 支付完成, <span id="time">5</span> 秒之后将自动跳转至 <a href="https://www.jd.com">官网</a> 首页 ~
    </div>

    <script>
        // 需求：进行时间倒计时，倒计时结束后，自动跳转到官网首页
        // 分析：DOM操作、周期性的定时器setInterval、location的地址修改
        //1.获取DOM元素对象
        let span = document.querySelect('#time');
        //2.要想改变数字，我们还需要用innerHTML属性来修改标签的内容
        let timeValue = parseInt(span.innerHTML);//将获取的数字转换为数字类型
        //3.要实现计时器的效果，我们要用到setInterval(fn,毫秒值)定时器
        setInterval(() => {
            timeValue--;
            if(timeValue <= 0){
                clearInterval(countdown);//清除定时器，避免时间到达0后继续运行，浪费资源
                //在倒计时结束之后我们要跳转页面，这里我们要用到Location
                location.href = "https://www.jd.com";
            }
            span.innerHTML = timeValue;//用innerHTML修改标签内容来更新页面上显示的倒计时数字
            //把新的timeValue值更新到span元素中
        }, 1000)
    </script>
</body>

</html>