前端笔记之BOM&DOM编程-优快云博客

本文介绍了浏览器对象模型(BOM)和文档对象模型(DOM)的基本概念与应用，包括使用window、location、history对象进行页面操作，以及通过getElementById、querySelector等方法选择元素节点，并演示了如何设置定时器实现动态时间显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
  BOM编程：对浏览器的各种对象进行操作
    window：浏览器窗体对象
        location：页面对象
            如 location.href可以获取地址栏地址，对赋值则是跳转指定地址页面
               location.reload()重载当前页面，类似刷新
        history：浏览器历史记录
            如 history.forward()页面前进
               history.back()页面后退
               history.go(n)前进或后退n个页面，n为正前进，为负后退
        计时器：
            setInterval(函数名, 间隔毫秒数)：每个指定时间执行函数，即“连续”执行
            setTimeout(函数名, 间隔毫秒数)：隔指定时间后执行函数，仅且执行一次，后面不会再执行
            clearInterval(计时器)、clearTimeout(计时器)：清除对应计时器
        提示框：
            alert("提示信息")：只有提示信息内容
            prompt("提示信息带输入框", "输入框默认值")：返回输入框内容
            confirm("提示信息带输入框")：返回值---确认是true，取消是false

  DOM编程：对元素节点进行操作
-->
<div style="text-align: center">
    <div id="dateTime">时间显示器</div><hr>
    <input type="button" id="start" value="开始"><input type="button" id="stop" value="停止" disabled>
</div>
<script>
    var timeout = setTimeout(function () {
        /*window.location.reload();*/
        alert(window.location.href);
        /*clearTimeout(timeout);*/
    }, 1000);

    var interval;
    var start = document.querySelector("#start");
    var stop = document.querySelector("#stop");
    start.onclick = function (ev) {
        this.disabled = true;
        stop.removeAttribute("disabled");
        document.querySelector("#dateTime").innerHTML = new Date().toLocaleString();
        interval = setInterval(function () {
            document.querySelector("#dateTime").innerHTML = new Date().toLocaleString();
        }, 1000);
    };
    stop.onclick = function (ev) {
        clearInterval(interval);
        this.disabled = true;
        start.removeAttribute("disabled");
    };

    alert(prompt("返回输入框内容", "1234"));
    alert(confirm("确认是true，取消是false"));
</script>
</body>
</html>