DOM简介

最新推荐文章于 2026-06-21 09:58:57 发布

原创最新推荐文章于 2026-06-21 09:58:57 发布 · 156 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #开发语言 #ecmascript

本文介绍DOM（文档对象模型）的基本概念及应用，通过实例演示如何利用JavaScript操作HTML文档，实现页面动态更新。

前言:

DOM: D ocument O bject M odel - 文档对象模型

Document: 文档 -- HTML代码, 超链接文本标记语言
Object: JS的对象类型
Model: 模型, 文档转换成JS对象的设定

这边简单的画个草图先来了解一下DOM

document: 是JS对象

是HTML 被浏览器执行后, 转换而来的对象
浏览器后台的元素标签, 就是 document 对象转换成HTML标签的样式
浏览器中真正展示的内容, 就是 document 对象

学习DOM: 就可以通过 document 来操作网页

DOM树

当document对象的结构, 用图形的方式进行展现时, 样子类似一棵树

代码片段:

<html>
    <head>
        <title>首页</title>
        <meta name="referrer" content="no-referrer" />
    </head>
    <body>
        <h1>你好</h1>
        <div>Hello</div>
        <ul>
            <li>小明</li>
            <li>小红</li>
        </ul>
    </body>
</html>

转换成 document 对象后:

<script>
    var document = {
        html:{
            children:{
                head:{
                    children:{
                        title:{
                            innerHTML:"首页"
                        },
                        meta:{
                            name:"referrer",
                            content: "no-referrer"
                        }
                    }
                },
                body:{
                    children:{
                        h1:{
                            innerHTML: '你好'
                        },
                        div:{
                            innerHTML:"Hello"
                        },
                        ul:{
                            children:{
                                li:{ innerHTML: "小明" },
                                li:{ innerHTML: "小红" },
                            }
                        }
                    }
                }
            }
        }
    }
</script>

用图的方式来表示:

看起来像: 树根或倒着的树 -- 所以称为 DOM树
每个元素称为一个节点 - Node

DOM

接下来我们先来看一下这样的一个时间的案例

我们来用DOM模仿的做一个一一解答里面的知识:

<body>
    <div id="time"></div>
    <script>
        var d = new Date()
        // 转换为 当地的时间格式
        console.log(d.toLocaleTimeString());

        // 这就属于DOM操作: 用JS代码来操作HTML的内容
        time.innerHTML = d.toLocaleTimeString()
        console.log(window); 
        // window.document : 全局中的属性, 使用时可以省略前缀window
        console.log(document);
        console.dir(document);

        
        document.title = 'Hello DOM!'
        setInterval(() => {
            var t = new Date().toLocaleTimeString()
            document.title = t
            time.innerHTML = t
        }, 1000);
    </script>
</body>

上方代码首先在body里面准备一个div来展现出显示出来的内容, 其次来书写JS中的代码, 首先准备一个变量来接收当前时间(new Date()就是获取当前时间), 然后把当前时间转换为当地的时间格式(因为有的国家的时间是不同的, 就像中国和美国的时间差13个小时), 然后开始书写DOM操作了, 用innerHTML把当前时间显示在页面上, 有跟着写的小伙伴可以看一下浏览器, 当前浏览器肯定是静止的状态, 所有我们要让他动起来, 我这边用的是定时器, 每一秒钟让该时间变化一次, 最终在展现在页面上就可以了, 我们来看一下效果: