【前端面经】js-什么是BOM和DOM? 分别列举一些它们的函数

在前端开发中，无论是开发网页还是Web应用程序，BOM（浏览器对象模型）和DOM（文档对象模型）都是不可避免的概念。那么什么是BOM和DOM，它们有哪些常用函数呢？

DOM简介

文档对象模型（DOM）是 W3C 组织推荐的可处理标记扩展语言的标准编程接口。DOM 定义了一系列的接口，通过这些接口可以改变网⻚的内容、结构和样式。DOM 把文档看作一个对象，其顶级对象是 document，主要学习的是操作页面元素。

常用接口函数

1. getElementById：根据 ID 获取文档的元素对象。
2. getElementsByTagName：根据标签名获取元素对象集合，以伪数组的形式存储。
3. getElementsByClassName：根据类名获取元素集合。
4. querySelector('符号+选择器')：返回指定选择器的第一个对象。
5. querySelectorAll('符号+选择器')：返回指定选择器的所有元素对象集合。
6. appendChild：将一个节点添加到指定父节点的子节点列表的末尾。

BOM简介

浏览器对象模型（BOM）提供了独立于内容而与浏览器窗口进行交互的对象。BOM 把浏览器当作对象来看待，其顶级对象是 window，学习的是浏览器窗口交互的一些对象。BOM 是浏览器厂商在各自浏览器上定义，兼容性较差。

常用接口函数

1. alert()：在浏览器中显示一个警告框。
2. onload()：窗口/页面加载事件。
3. addEventListener()：监听事件响应然后触发对应操作。
4. setTimeout()：用于在指定的时间后执行一段代码。
5. setInterval()：用于以指定的时间间隔重复执行一段代码。

总之，DOM 和 BOM 是前端开发中不可或缺的两个概念。熟悉它们的常用函数有助于提高我们的开发效率，更好地实现我们的前端需求。