window、DOM、document、html 他们之间的关系是什么？

原创已于 2025-07-21 20:42:23 修改 · 984 阅读

19 ·

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

GEO检测

标签

#javascript #开发语言 #html5

于 2025-07-19 12:51:39 首次发布

1.window

window 对象表示一个包含 DOM 文档的窗口，其 document 属性指向窗口中载入的 DOM 文档。

可以使用 addEventListener('事件类型',事件处理函数)为选中的元素添加事件监听器(验证一下window)

常见的事件类型:

click 点击事件
mouseover 鼠标移入事件
window.resize 监听修改窗口大小事件
window.scroll 监听窗口滚动条滚动事件

window 对象是JS中的一个全局对象，它代表了当前浏览器窗口,属于浏览器环境的一部分,不需要导入或者实例化就可以使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07事件监听</title>
</head>
<body>
    <h4>震惊！奥运开幕式竟然发生了...</h4>
    <button>按钮</button>
    lorem*50
    
    <script>
        /*点击事件*/
        let buttonE = document.querySelector('button');
        buttonE.addEventListener('click',function () {
            alert('按钮被点击了！');
        })
        /*鼠标移入事件*/
        let h4E = document.querySelector('h4');
        h4E.addEventListener('mouseover',function () {
            console.log('标题被(悬停)了！');
        })

        /* window是DOM自带的对象,它是一个全局对象，代表了当前浏览器视口 */
        window.addEventListener('resize',function(){
            // alert('窗口大小被改变了！');
        })
        window.addEventListener('scroll',function(){
            alert('窗口滚动了！');
        })
    </script>
</body>
</html>

2.DOM（document object model）

DOM 树（Document Object Model Tree，文档对象模型树）是浏览器在加载 HTML 或 XML 文档时，根据标签结构构建的一棵树形结构，它把整个网页看作由 节点（Node） 组成的层级关系，从而可以用 JavaScript 来动态操作网页内容。

DOM 与 BOM 的关系：DOM 的核心对象document 是 BOM中window对象的子对象

DOM所处的级别

DOM树的样子

3..document

document是window的一个属性，代表整个网页文档

(下文的HTML 文档就是网页文档的一种形式)

是操作网页内容的主要接口，比如获取元素、修改结构、监听事件等等

下面是在 web 和 XML 页面脚本中使用 DOM 时，一些常用的 API 简要列表。

常用API

这些接口可以操作网页的结构、内容与样式：

创建元素对象

let d = document.createElement("div");

将新元素到某个元素对象里

元素对象.append（新元素）；

修改元素的属性值

imgE.src = "money.jpg";

通过 id 获取页面中的元素对象

let 元素对象 = document.getElementById('d2');
h5 中也可以直接使用 id 值代表元素 console.log（id 值）；

通过选择器获取页面中的元素对象

let 元素对象 = document.querySelector（"选择器"）；

获取和修改控件的值

元素对象.value 获取
元素对象.value="xxx" 修改

获取和修改元素的文本内容 例：<div>文本内容</div>

元素对象.innerHTML获取
元素对象.innerHTML = “xxx” 修改

4.<html>（HTML元素）

HTML <html> 元素表示 HTML 文档的根（顶级元素），所以它也被称为根元素。其他所有元素必须是此元素的后代。

假设你用浏览器打开一个网页 index.html，浏览器会：

把 HTML 代码解析成一棵 DOM 树
创建一个 document 对象来表示这个 HTML 页面
把这个 document 挂在 DOM树 上

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--页面效果点击即可贴入一张图片-->
  <button onclick="funMoney()">点击变富有</button>
</body>
<script>
  function funMoney(){
    /**
     * 1.创建一个img类型的标签
     * @type {HTMLImageElement}
     */
    let imgE = document.createElement('img');
    HTMLImageElement
    /**
     * 通过打点调用属性来为属性赋值
     * @type {string}
     */
    imgE.src = 'img/money.jpg';
    imgE.width = 200;
    /**
     * 将img标签添加到body中，也就是挂载到DOM树上
     * @type {HTMLBodyElement}
     */
    let bodyE = document.querySelector('body');
    bodyE.append(imgE);
  }
</script>
</html>