前端经典面试题合集, 什么是 BOM 和 DOM?分别列举一些它们的函数

QA

Step 1

Q:: 什么是BOM？列举一些BOM的函数。

A:: BOM（浏览器对象模型）是指浏览器窗口对象的集合。BOM使得JavaScript可以与浏览器进行交互，控制浏览器的窗口和框架。常见的BOM函数包括： 1. window.open()``: 打开一个新的浏览器窗口。 2. window.close()``: 关闭当前窗口。 3. window.alert()``: 显示一个警告框。 4. window.confirm()``: 显示一个确认对话框。 5. window.prompt()``: 显示一个提示对话框，要求用户输入一些文本。 6. window.location``: 获取或设置当前页面的URL。 7. window.history``: 用于操作浏览器的会话历史（前进、后退等）。

Step 2

Q:: 什么是DOM？列举一些DOM的函数。

A:: DOM（文档对象模型）是HTML和XML文档的编程接口。它表示页面的结构，使程序能够改变文档的内容和样式。常见的DOM函数包括： 1. document.getElementById()``: 根据ID获取元素。 2. document.getElementsByClassName()``: 根据类名获取元素集合。 3. document.getElementsByTagName()``: 根据标签名获取元素集合。 4. document.querySelector()``: 返回与指定的选择器组匹配的第一个元素。 5. document.querySelectorAll()``: 返回与指定的选择器组匹配的所有元素。 6. element.addEventListener()``: 向指定元素添加事件监听器。 7. element.removeChild()``: 从DOM中删除一个子元素。

用途

面试这些内容是为了考察候选人对前端基础知识的掌握情况。BOM和DOM是Web开发中非常重要的部分，它们决定了如何与浏览器和网页进行交互。在实际生产环境中，几乎所有的Web应用都会用到BOM和DOM。比如，BOM的使用可以控制页面跳转、弹窗提示等用户交互行为；DOM的操作则是实现动态内容更新、事件处理等功能的基础。\n

相关问题

🦆

如何使用BOM操作浏览器历史?▷

BOM提供了window.history对象，可以通过该对象的back()、forward()和go()方法来操作浏览器的历史记录。例如，window.history.back()可以使浏览器返回到上一页，window.history.forward()则可以前进到下一页，window.history.go(-1)等价于back()。

🦆

如何在DOM中动态创建元素?▷

可以使用document.createElement()方法创建新的元素，然后使用appendChild()或insertBefore()方法将其添加到DOM树中。例如：

 
var newDiv = document.createElement('div');
newDiv.textContent = 'Hello, World!';
document.body.appendChild(newDiv);

🦆

如何在JavaScript中操作CSS样式?▷

可以通过DOM元素的style属性来操作CSS样式。例如：

 
document.getElementById('myElement').style.color = 'red';

此外，还可以使用classList属性来添加、移除或切换CSS类，例如：

 
document.getElementById('myElement').classList.add('myClass');
document.getElementById('myElement').classList.remove('myClass');
document.getElementById('myElement').classList.toggle('myClass');

🦆

如何使用事件委托优化DOM事件处理?▷

事件委托是一种通过利用事件冒泡机制来优化事件处理的技术。它将多个子元素的事件处理程序委托给一个父元素，从而减少事件处理程序的数量，优化性能。例如：

 
document.getElementById('parent').addEventListener('click', function(event) {
  if (event.target && event.target.matches('li.item')) {
    console.log('List item clicked!');
  }
});

介绍下从 HTTP1.0HTTP1.1 到 HTTP2 再到 HTTP3 的演化过程各个阶段相对前一阶段做了哪些优化什么是箭头函数能使用 new 来创建箭头函数么