您现在的位置是：网站首页 > JS BOM操作面试题文章详情

JS BOM操作面试题

陈川【 JavaScript 】 24619人已围观

1. 什么是BOM？它与DOM的关系是什么？

BOM（Browser Object Model）和DOM（Document Object Model）都是与Web开发密切相关的概念，但它们在浏览器中代表不同的对象模型。

BOM（Browser Object Model）：
BOM是浏览器对象模型，它定义了浏览器环境中一系列的对象和接口，这些对象代表了浏览器、窗口、文档、历史记录、导航、位置信息等。BOM主要用于与浏览器进行交互，比如打开新窗口、获取用户当前位置等。BOM并不关心HTML文档的结构，而是关注浏览器本身的功能。
DOM（Document Object Model）：
DOM是文档对象模型，它是一种编程接口，用于处理HTML和XML文档。DOM将整个HTML或XML文档视为一个树状结构，其中每个元素、属性和文本节点都有对应的对象表示。开发者可以通过DOM API来读取、修改和操作文档内容，而无需关注文档的实际HTML结构。

JavaScript示例：

// DOM操作
const doc = document; // 获取当前文档对象
const title = doc.title; // 通过DOM获取文档标题
title.textContent = "New Title"; // 修改文档标题

// BOM操作
window.open("https://example.com"); // 打开新窗口
navigator.geolocation.getCurrentPosition(position => {
  console.log(position.coords.latitude, position.coords.longitude); // 获取用户位置
});

在这个例子中，我们首先通过document对象（DOM的一部分）访问文档元素，然后通过window对象（BOM的一部分）执行新窗口的打开和获取用户位置的操作。

2. BOM的核心对象是什么？列举几个主要的BOM对象。

BOM（Browser Object Model）是浏览器对象模型，它是浏览器提供的API集合，用于与网页内容和用户交互。BOM的核心对象是window对象，它是所有其他BOM对象的根，包含了对浏览器环境、文档、窗口、历史记录等的访问。

以下是BOM中的一些主要对象及其JavaScript示例：

window: 窗口对象，代表整个浏览器窗口。它包含了许多全局属性和方法，如location、history、navigator等。

// 获取当前页面的URL
const url = window.location.href;

document: 文档对象，代表当前加载的HTML文档。可以用来获取或操作DOM元素、处理事件等。

// 获取文档标题
const title = document.title;

navigator: 浏览器信息对象，提供有关用户浏览器的信息，如浏览器名称、版本、平台等。

// 检查浏览器是否支持某个特性
if (navigator.userAgent.indexOf('Chrome') !== -1) {
  console.log('User is using Chrome');
}

location: 地址栏对象，提供了关于当前URL的信息，以及导航到新URL的方法。

// 获取URL的协议、主机名、路径等
const protocol = location.protocol;
const hostname = location.hostname;

history: 历史记录对象，可以用来回退和前进浏览历史。

// 跳转到上一个页面
history.back();

console: 控制台对象，用于输出调试信息。

console.log('This is a console message');

以上是一些常见的BOM对象，实际使用时可能还会涉及到其他如XMLHttpRequest（用于发送HTTP请求）、setTimeout和setInterval（定时器）等对象。

3. 如何使用JavaScript获取和设置浏览器窗口的尺寸？

在JavaScript中，你可以使用window.innerWidth和window.innerHeight属性来获取浏览器窗口的宽度和高度。这两个属性返回的是一个数字，单位是像素。

以下是如何获取浏览器窗口尺寸的例子：

var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

console.log('Window width: ' + windowWidth + 'px');
console.log('Window height: ' + windowHeight + 'px');

如果你想设置浏览器窗口的尺寸，这通常是不可能的，因为这超出了用户的控制，并且可能违反了用户的隐私。然而，有一些特定的情况，比如全屏应用或者模拟窗口大小调整，你可以使用resizeTo()和resizeBy()方法，但这通常只适用于已经获得用户许可的特殊场景。

例如：

// 试图改变窗口大小，但不会生效
window.resizeTo(800, 600); // 这不会改变实际窗口大小，只是改变视口大小

// 可以用来模拟用户缩放
window.addEventListener('resize', function() {
  console.log('Window resized to: ' + window.innerWidth + 'x' + window.innerHeight);
});

请注意，以上操作可能会因浏览器的安全策略而受到限制。在尝试修改窗口大小时，最好确保你有充分的理由，并且尊重用户的隐私和控制权。

4. 解释`window.location`对象及其常用属性和方法。

window.location是JavaScript中一个内置的对象，它代表了当前浏览器窗口或标签页的URL。这个对象提供了许多与URL相关的属性和方法，可以帮助我们获取、更改和操作当前页面的地址。

以下是一些常用的window.location对象的属性和方法：

location.href: 这个属性返回完整的URL，包括协议（如http或https）、主机名、路径、查询字符串和片段标识符。例如：window.location.href。
location.protocol: 返回当前页面使用的协议，如'http'或'https'。例如：window.location.protocol。
location.host: 返回主机名（包括端口号，如 'www.example.com:8080'）。例如：window.location.host。
location.hostname: 返回主机名（不包括端口号）。例如：window.location.hostname。
location.port: 如果URL包含端口号，返回端口号；否则返回空字符串。例如：window.location.port。
location.pathname: 返回URL的路径部分，不包括查询字符串和片段标识符。例如：window.location.pathname。
location.search: 返回查询字符串（以 "?" 开始），但不包括 "?"。例如：window.location.search。
location.hash: 返回片段标识符（以 "#" 开始），但不包括 "#"。片段标识符通常用于锚点，比如 "#section1"。
location.assign(url): 用于重定向到新的URL。例如：window.location.assign("https://www.example.com")。
location.replace(url): 与location.assign类似，但会替换当前URL，不会在历史记录中留下前一个URL。例如：window.location.replace("https://www.example.com")。
location.reload([options]): 用于重新加载当前页面。可选参数options可以是一个对象，包含reload（默认为true）和soft（默认为false）两个属性。reload表示是否强制从服务器重新加载，soft表示是否只更新文档内容而保留缓存。
location.origin: 返回URL的协议、主机名和端口的组合，例如 "http://www.example.com:80"。例如：window.location.origin。

以上就是window.location对象的一些主要属性和方法，它们在前端开发中非常有用，尤其是在处理URL导航和跳转时。

5. 使用`window.history`对象管理浏览器历史记录。

在JavaScript中，window.history对象是一个内置的对象，它允许你与浏览器的历史记录进行交互。以下是一些常用的方法：

history.pushState(state, title, url): 这个方法用于向浏览器的历史记录添加一个新的条目。state参数是可选的，通常用来存储额外的数据；title是页面标题，url是你想要导航到的新URL。这个方法不会实际进行页面跳转，只是改变浏览器的浏览历史。

// 添加新的历史记录
history.pushState('new data', 'New Page', 'https://example.com/new-page');

// 可以通过改变state来更新历史记录的描述，而不需要刷新页面
history.pushState('updated data', 'Updated Page', 'https://example.com/new-page');

history.replaceState(state, title, url): 这个方法和pushState类似，但会替换当前的URL，而不是添加一个新的历史记录。这意味着用户点击后退按钮时，会返回上一个replaceState操作前的页面。

// 替换当前历史记录
history.replaceState('replaced data', 'Replaced Page', 'https://example.com/replaced-page');

history.back(): 这个方法用于后退到上一个历史记录。

// 后退到上一个页面
history.back();

history.forward(): 这个方法用于前进到下一个历史记录。

// 前进到下一个页面
history.forward();

history.length: 返回浏览器历史记录的条目数量。

console.log(history.length);  // 输出当前的历史记录数量

history.go(index): 这个方法可以让你直接跳转到特定的历史记录，index是从0开始的索引。

// 跳转到第三个历史记录
history.go(2);

注意：这些操作都是在用户行为（如点击链接、表单提交）或脚本执行时自动触发的，除非明确调用pushState或replaceState，否则不会改变浏览器的历史记录。

6. `window.open()`、`window.close()`、`window.moveTo()`、`window.resizeTo()`方法的用途及用法。

window.open(): 这个方法用于在浏览器中打开一个新的窗口或者标签页。你可以传递一个URL，一个名称（可选），一个模式（比如"replace"、"new"或"popup"），以及两个可选的特性对象。例如：

// 打开新的标签页
window.open('https://www.example.com');

// 在新窗口打开页面
window.open('https://www.example.com', '_blank');

window.close(): 这个方法用于关闭当前的窗口或者标签页。注意，只有在用户点击浏览器的关闭按钮或者调用了这个方法时，才会真正关闭窗口。例如：

// 用户点击某个按钮后关闭当前窗口
document.getElementById('closeButton').addEventListener('click', function() {
  window.close();
});

window.moveTo(): 这个方法用于设置窗口的位置，第一个参数是窗口的新x坐标，第二个参数是新y坐标。例如：

// 将窗口移动到屏幕中心
window.moveTo(window.screen.width / 2, window.screen.height / 2);

window.resizeTo(): 这个方法用于设置窗口的大小，第一个参数是新的宽度，第二个参数是新的高度。例如：

// 将窗口调整为800x600像素
window.resizeTo(800, 600);

以上四个方法主要用于浏览器窗口和标签页的操作，但请注意，由于同源策略的限制，它们不能跨域操作。并且，某些浏览器可能出于安全原因禁止一些窗口操作，如直接关闭窗口等。

7. 什么是`window.onload`和`DOMContentLoaded`事件？两者有何区别？

window.onload和DOMContentLoaded都是JavaScript中用于处理网页加载的两个重要事件。

window.onload事件：
当整个HTML文档（包括图片、脚本等）都完全加载并解析完成后，window.onload事件会被触发。这意味着在执行任何与DOM相关的操作时，所有资源都已经就绪。例如：

window.onload = function() {
  // 在这里，你可以确保所有的元素都已经加载完毕，可以对DOM进行操作
  document.getElementById('myElement').style.color = 'red';
};

DOMContentLoaded事件：
这个事件在文档的结构（DOM树）已经完全加载，并且HTML解析器已经解析了HTML文档的主要部分后就会触发。这意味着CSS样式表和外部脚本可能还没有完全加载，但页面的结构已经可用。因此，如果你需要对页面进行快速渲染或者初始化，DOMContentLoaded是一个更好的选择。例如：

document.addEventListener('DOMContentLoaded', function() {
  // 在这里，你可以开始对DOM进行操作，虽然可能还缺少一些CSS样式和脚本
  document.getElementById('myElement').textContent = 'Hello, world!';
});

总结一下，window.onload在所有内容都加载完毕后触发，而DOMContentLoaded则是在DOM解析完成时触发，适合对DOM进行初步操作，但可能需要稍后处理其他资源的加载。

8. 在BOM中如何添加和移除事件监听器？

在JavaScript中，我们可以使用addEventListener方法来向BOM（浏览器对象模型）中的元素添加事件监听器，而使用removeEventListener方法来移除已经添加的事件监听器。以下是一些示例：

添加事件监听器：

// 获取HTML元素
var button = document.getElementById('myButton');

// 定义事件处理函数
function handleClick(event) {
  console.log('Button clicked!');
}

// 添加点击事件监听器
button.addEventListener('click', handleClick);

在这个例子中，当用户点击id为'myButton'的按钮时，handleClick函数会被调用。

移除事件监听器：

// 获取HTML元素
var button = document.getElementById('myButton');

// 定义事件处理函数
function handleClick(event) {
  console.log('Button clicked!');
}

// 添加点击事件监听器
button.addEventListener('click', handleClick);

// 后来，我们想移除这个监听器
button.removeEventListener('click', handleClick);

在这个例子中，当我们调用removeEventListener方法并传入相同的事件类型和处理函数，事件监听器就会被移除，即使按钮再次被点击，也不会再触发handleClick函数。

注意：如果事件处理函数是匿名函数或者没有被引用，你可能需要存储一个引用，以便在removeEventListener中传递。例如：

var button = document.getElementById('myButton');
var handleClickRef = function() { console.log('Button clicked!'); };

button.addEventListener('click', handleClickRef);

// 稍后...
button.removeEventListener('click', handleClickRef);

9. 解释事件冒泡和捕获阶段，以及如何阻止它们。

事件冒泡和捕获阶段是JavaScript中处理事件的两种主要方式。

事件捕获阶段（Event Capture Phase）：在这个阶段，事件从最外层的元素开始向下传播到目标元素。也就是说，从window对象开始，然后逐级传递给每个祖先元素，直到到达目标元素。在这个过程中，所有注册了捕获事件处理器的元素都会收到这个事件。例如：

document.addEventListener('click', function(event) {
  console.log('Event captured at document level');
}, true); // 使用true表示捕获阶段

<button id="myButton">Click me</button>

// 当点击按钮时，首先会在控制台打印"Event captured at document level"

事件冒泡阶段（Event Bubbling Phase）：在捕获阶段之后，事件会从目标元素开始向上冒泡到最外层的元素。这意味着，当目标元素触发一个事件时，最先执行的是在其上注册的冒泡事件处理器，然后逐级向上，直到达到window对象。例如：

document.getElementById('myButton').addEventListener('click', function(event) {
  console.log('Event bubbled from button');
}, false); // 使用false表示冒泡阶段

// 当点击按钮时，首先会在控制台打印"Event bubbled from button"，然后是"Event captured at document level"

阻止事件的传播（Stop Propagation）：
如果你想阻止事件在元素之间继续传播，可以使用JavaScript的event.stopPropagation()方法。这将停止当前事件在任何更高级别的父元素上触发相应的事件处理器。例如：

document.getElementById('myButton').addEventListener('click', function(event) {
  console.log('Button clicked');
  event.stopPropagation(); // 阻止事件冒泡到document
}, false);

document.addEventListener('click', function(event) {
  console.log('Document clicked (not bubbling)');
}, true);

在这个例子中，点击按钮后只会打印"Button clicked"，不会打印"Document clicked (not bubbling)"，因为事件在按钮级别被阻止了。

10. 使用`event.preventDefault()`和`event.stopPropagation()`的作用。

event.preventDefault() 和 event.stopPropagation() 是 JavaScript 中用于处理事件的两个重要方法，它们在处理用户交互时非常有用。

event.preventDefault()：
这个方法主要用于阻止浏览器默认的行为。当你在一个元素上触发一个事件（如点击、提交表单等），浏览器通常会执行一些预设的操作。例如，点击链接会跳转到新的URL，提交表单会刷新页面。如果你想要阻止这种行为，可以在事件处理函数中调用 event.preventDefault()。例如：

const submitButton = document.querySelector('button[type="submit"]');

submitButton.addEventListener('click', function(event) {
  event.preventDefault(); // 阻止表单默认的提交行为
  console.log('Form submitted without page reload');
});

在这个例子中，当用户点击提交按钮时，表单不会自动提交，而是打印出 "Form submitted without page reload"。

event.stopPropagation()：
这个方法则用于停止事件冒泡。事件冒泡是指从最具体的元素开始，逐级向上层祖先元素传播。如果在某个元素上绑定了事件处理器，并且希望阻止事件继续传播到父元素或祖先元素，可以使用 event.stopPropagation()。例如：

const parentElement = document.querySelector('.parent');
const childElement = document.querySelector('.child');

childElement.addEventListener('click', function(event) {
  event.stopPropagation(); // 停止事件冒泡到parentElement
  console.log('Clicked on child element');
});
parentElement.addEventListener('click', function(event) {
  console.log('Clicked on parent element');
});

在这个例子中，当点击子元素时，只会打印 "Clicked on child element"，而不会打印 "Clicked on parent element"，因为子元素的 click 事件被阻止了冒泡。

总结来说，event.preventDefault() 主要用于防止浏览器的默认行为，而 event.stopPropagation() 则用于控制事件的传播范围。

11. 实现一个监听键盘按键的示例代码。

在JavaScript中，我们可以使用window.addEventListener方法来监听键盘按键。以下是一个简单的示例，当用户按下任意键时，会在控制台打印出键的名称：

window.addEventListener('keydown', function(event) {
    // 获取键的名称
    var keyCode = event.keyCode;
    var charCode = String.fromCharCode(event.charCode);

    // 打印键的名称
    console.log('Key pressed: ' + (keyCode ? keyCode : charCode));
});

在这个示例中，我们监听了keydown事件，这意味着每当有键被按下（不管是字母键、数字键还是特殊键）都会触发这个函数。event.keyCode返回按下的键的ASCII码，event.charCode 返回键的Unicode字符代码。

注意：在一些情况下，charCode可能会返回空值，因为并不是所有的键都有对应的Unicode字符。在这种情况下，我们使用keyCode。

如果你只想监听特定的键，你可以添加一个条件判断，例如：

window.addEventListener('keydown', function(event) {
    if (event.keyCode === 32) { // 按下空格键
        console.log('Space key pressed!');
    }
});

这将只在用户按下空格键时打印消息。

12. 解释并演示如何使用`window.setTimeout()`和`window.setInterval()`，以及如何清除定时器。

window.setTimeout()和window.setInterval()是JavaScript中用于设置定时器的两个主要函数。它们在网页开发中非常有用，可以用来执行某些任务或操作，比如定时刷新页面、计时器等。

window.setTimeout(): 这个函数用于在指定的毫秒数后执行一次指定的函数。语法如下：

window.setTimeout(function, delay);

function: 需要执行的函数。
delay: 以毫秒为单位的延迟时间，即多久后执行函数。

例如，我们想要在3秒后弹出一个提示框：

window.setTimeout(function() {
    alert("Hello, World!");
}, 3000);

window.setInterval(): 这个函数用于每隔一段时间重复执行指定的函数。语法如下：

window.setInterval(function, delay);

function: 需要执行的函数。
delay: 以毫秒为单位的时间间隔，即每隔多长时间执行一次函数。

例如，我们想要每秒打印一次当前时间：

var timer = window.setInterval(function() {
    console.log(new Date());
}, 1000);

清除定时器：如果你不再需要某个定时器，可以使用clearTimeout()或clearInterval()来清除它。这两个函数分别对应setTimeout()和setInterval()，接收一个参数，即定时器的ID（返回值）。

例如，如果你想在5秒后清除上面的每秒打印时间的定时器，可以这样做：

// 获取定时器ID
var timer = window.setInterval(function() {
    console.log(new Date());
}, 1000);

// 在5秒后清除定时器
setTimeout(function() {
    window.clearInterval(timer);
}, 5000);

在这个例子中，我们在5秒后调用clearInterval()，传入的就是之前setInterval()返回的定时器ID。这样，当定时器到达5秒时，就会被自动清除。

13. 使用`alert()`、`confirm()`、`prompt()`弹出不同的对话框。

在JavaScript中，alert(), confirm(), 和 prompt() 是三种内置的浏览器窗口函数，用于与用户进行交互。

alert()：用于显示一个带有消息和确定按钮的消息框。当用户点击确定按钮时，对话框会关闭。

alert("这是一个警告消息");

confirm()：用于显示一个带有消息、确认和取消按钮的消息框。如果用户点击确认，返回true；如果点击取消，返回false。

var response = confirm("你确定要删除这个文件吗？");
if (response) {
  console.log("用户确认了操作");
} else {
  console.log("用户取消了操作");
}

prompt()：用于显示一个包含提示信息的输入框，用户可以输入文本。点击确定后，对话框关闭并返回用户的输入；点击取消，返回null。

var userInput = prompt("请输入你的名字:");
if (userInput !== null) {
  console.log("你好, " + userInput);
} else {
  console.log("用户没有输入");
}

以上就是在JavaScript中使用alert(), confirm(), 和 prompt() 函数的示例。

14. 如何根据用户在`prompt()`对话框中的输入做出反应？

在JavaScript中，你可以使用prompt()函数来获取用户的输入，然后根据这个输入执行相应的操作。以下是一个简单的例子：

// 获取用户输入
var userInput = prompt("请输入你的名字:");

// 根据用户输入做出反应
if (userInput) {
    // 如果用户输入了内容
    console.log("你好, " + userInput + "!");

    // 如果你想根据输入做一些更复杂的操作，比如检查输入是否是数字
    if (!isNaN(userInput)) {
        console.log("你输入的是一个数字: " + Number(userInput));
    } else {
        console.log("你输入的不是一个数字.");
    }
} else {
    // 如果用户没有输入任何内容
    console.log("你没有输入任何内容.");
}

在这个例子中，如果用户输入了名字，程序会输出问候语。如果用户输入的是一个数字，程序会识别并打印出来。如果用户什么都没输入，程序会提示他们。

注意，prompt()函数总是返回一个字符串，即使用户输入的是一个数字。如果你想处理数字，你需要使用isNaN()函数或者尝试将输入转换为数字（如Number(userInput)）。

15. 如何使用JavaScript进行页面跳转？

在JavaScript中，有几种方法可以实现页面跳转。以下是其中的一些常见方法：

window.location对象：
- window.location.href: 使用这个属性可以直接改变浏览器的URL，从而实现页面跳转。例如，跳转到新的URL：
```
window.location.href = "https://www.example.com";
```
window.location.assign():
- 这个方法用于加载指定的URL，并替换当前页面。例如：
```
window.location.assign("https://www.example.com");
```
window.location.replace():
- 这个方法也用于导航到新URL，但它会阻止浏览器的历史记录添加新条目（如果目标URL与当前URL相同，历史记录将被清除）。例如：
```
window.location.replace("https://www.example.com");
```
window.location.reload():
- 这个方法用于重新加载当前页面。你可以传入一个可选的参数来控制是否从缓存中加载（默认为true，即不从缓存加载）。例如：
```
window.location.reload(); // 从缓存加载
window.location.reload(false); // 从服务器加载
```
history.pushState() 和 history.back() 或 history.go():
- 如果你想在浏览器的历史记录中添加一个新的状态，而不是实际跳转，可以使用这些方法。例如：
```
history.pushState(null, '', 'https://www.example.com');
history.back(); // 回到上一个页面
history.go(2); // 跳转到第3个页面（0是当前页）
```

请根据你的需求选择合适的方法。注意，页面跳转可能会导致用户失去输入，因此在处理表单数据时要特别小心。

16. 解释并使用`window.location.href`、`window.location.search`和`window.location.hash`。

window.location 是 JavaScript 中的一个全局对象，它提供了有关当前页面URL的信息。下面是 window.location.href, window.location.search 和 window.location.hash 的解释：

window.location.href: 这是一个字符串属性，返回完整的URL，包括协议（如 http 或 https）、主机名、路径和查询字符串（如果有的话）。例如：
```
var href = window.location.href;
console.log(href); // 输出：https://www.example.com/path?param1=value1&param2=value2
```
window.location.search: 这是一个字符串，表示 URL 中的查询字符串（即 ? 后面的部分），不包括 ?。它以 & 分隔参数对。例如：
```
var search = window.location.search;
console.log(search); // 输出：param1=value1&param2=value2
```
window.location.hash: 这是一个字符串，表示 URL 中的哈希片段（即 # 后面的部分），通常用于锚点链接。例如：
```
var hash = window.location.hash;
console.log(hash); // 输出：#section1
```

你可以使用这些属性来动态改变页面的URL，或者从URL中获取信息。例如，如果你想跳转到新的URL，可以这样做：

window.location.href = "https://newpage.com";

如果你想获取或设置查询字符串参数，可以这样做：

var params = new URLSearchParams(window.location.search);
console.log(params.get('param1')); // 输出：value1

// 设置参数
params.set('newParam', 'newValue');
window.history.pushState({}, '', window.location.pathname + '?' + params.toString());

哈希片段通常用于导航到页面内的特定部分：

window.location.hash = '#section2';

17. 实现一个根据URL参数动态改变页面内容的功能。

在JavaScript中，我们可以使用window.location.search来获取URL的查询字符串，然后解析这个查询字符串，根据参数动态改变页面的内容。以下是一个简单的例子：

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Page Content</title>
    <script>
        window.onload = function() {
            // 获取URL的查询字符串
            var urlParams = new URLSearchParams(window.location.search);

            // 检查是否存在'message'参数
            if (urlParams.has('message')) {
                // 如果存在，获取其值并显示在页面上
                var message = urlParams.get('message');
                document.getElementById('content').innerText = 'Message: ' + message;
            } else {
                // 如果不存在，显示默认消息
                document.getElementById('content').innerText = 'No message provided.';
            }
        };
    </script>
</head>
<body>
    <h1>Dynamic Content</h1>
    <div id="content"></div>
</body>
</html>

在这个例子中，如果你的URL是http://example.com/?message=Hello%20World，那么页面上就会显示"Message: Hello World"。如果你的URL没有message参数，或者参数名或值不是message，那么就会显示"No message provided."。

这只是一个基本的例子，实际应用中你可能需要处理更复杂的情况，例如多个参数、参数值的类型转换等。

18. 介绍`localStorage`和`sessionStorage`的区别和使用方法。

localStorage和sessionStorage是两种在浏览器中存储数据的API，它们都是Web Storage的一部分，用于在客户端（用户的设备上）存储数据，以便在页面会话期间或关闭浏览器后保持数据。

localStorage: 这是一种持久性的存储，数据会被保存在用户的本地磁盘上，直到用户清除浏览器缓存或者关闭浏览器。这些数据不会因为浏览器会话的结束而丢失，所以即使用户离开网站并重新打开，数据仍然存在。例如：

// 存储数据
localStorage.setItem('username', 'John Doe');

// 读取数据
var username = localStorage.getItem('username');
console.log(username); // 输出: John Doe

// 删除数据
localStorage.removeItem('username');

sessionStorage: 与localStorage不同，sessionStorage的数据只在当前会话期间有效，即当用户关闭当前标签页或窗口时，数据会被清除。这对于需要在用户离开页面时保留临时信息的情况非常有用。例如：

// 存储数据
sessionStorage.setItem('cartItems', JSON.stringify(['apple', 'banana']));

// 读取数据
var cartItems = JSON.parse(sessionStorage.getItem('cartItems'));
console.log(cartItems); // 输出: ['apple', 'banana']

// 删除数据
sessionStorage.removeItem('cartItems');

需要注意的是，由于sessionStorage的数据在会话结束时会被清除，所以不适合存储敏感信息，因为这些信息可能会被其他恶意脚本访问。同时，localStorage和sessionStorage都有容量限制，具体取决于浏览器的配置。

19. 如何存储和读取JSON对象到本地存储？

在JavaScript中，我们可以使用浏览器的localStorage或sessionStorage来存储和读取JSON对象。以下是一些示例：

存储JSON对象：

// 创建一个JSON对象
var myObj = {
    name: "John",
    age: 30,
    city: "New York"
};

// 将JSON对象转换为字符串并存储到localStorage
var jsonString = JSON.stringify(myObj);
localStorage.setItem("myData", jsonString);

从localStorage读取JSON对象：

// 从localStorage中获取存储的字符串
var storedJsonString = localStorage.getItem("myData");

// 将字符串转换回JSON对象
var retrievedObj = JSON.parse(storedJsonString);

console.log(retrievedObj); // 输出：{name: "John", age: 30, city: "New York"}

注意：localStorage数据是持久化的，即使页面关闭后也会保存；而sessionStorage的数据只在当前会话期间有效，当页面刷新或关闭时会被清除。

另外，如果JSON对象非常大，或者需要频繁地读写，可能不适合使用localStorage或sessionStorage，因为它们都有大小限制（通常是5MB）。在这种情况下，你可能需要考虑使用Web Storage API的替代方案，如IndexedDB，它提供了更大的存储空间和更复杂的查询功能。

20. 使用`window.navigator`对象获取用户浏览器信息。

在JavaScript中，你可以使用window.navigator对象来获取用户的浏览器信息。以下是一些常用的方法：

获取浏览器名称和版本：

var userAgent = window.navigator.userAgent;
var browserName = navigator.appName;
var browserVersion = navigator.appVersion;

console.log("User Agent:", userAgent);
console.log("Browser Name:", browserName);
console.log("Browser Version:", browserVersion);

检查是否为某种浏览器：

function isChrome() {
    return /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
}

function isFirefox() {
    return /Firefox/.test(navigator.userAgent);
}

if (isChrome()) {
    console.log("User is using Chrome.");
} else if (isFirefox()) {
    console.log("User is using Firefox.");
} else {
    console.log("User is not using Chrome or Firefox.");
}

获取操作系统信息：

var osName = navigator.platform;
var osVersion = navigator.oscpu;

console.log("Operating System:", osName);
console.log("Operating System Version:", osVersion);

请注意，这些信息可能不完全准确，因为用户可以更改他们的浏览器标识或使用代理服务器。然而，它们通常能提供一些关于用户浏览器和操作系统的有用信息。

21. 使用`performance.now()`进行性能测试。

performance.now()是Web API的一部分，用于获取当前时间的高精度测量，通常以毫秒为单位。这个方法在浏览器环境中可用，可以用来测量代码执行的时间，进行性能测试。

以下是一个简单的JavaScript示例，展示如何使用performance.now()来测量一段代码的执行时间：

// 定义开始时间
let start = performance.now();

// 这里是你要测量的代码
for (let i = 0; i < 1000000; i++) {
    // 比如说，这是一个简单的循环
}

// 获取结束时间
let end = performance.now();

// 计算并打印执行时间（以毫秒为单位）
let executionTime = end - start;
console.log(`Code execution time: ${executionTime} ms`);

在这个例子中，我们首先记录了开始时间，然后执行了一个循环，最后再次记录了结束时间。然后，我们通过减去开始时间和结束时间，得到了代码的执行时间。注意，这只是一个基本的示例，实际的性能测试可能需要更复杂的设置和分析，例如使用requestAnimationFrame()进行多次测量，或者使用window.performance.mark()和window.performance.measure()进行更详细的标记和测量。

22. 解释如何处理浏览器兼容性问题。

浏览器兼容性问题是开发人员在创建跨浏览器的Web应用时经常遇到的问题，因为不同的浏览器可能会有不同的特性和实现方式。以下是一些处理浏览器兼容性问题的基本步骤，以JavaScript 为例：

使用polyfills和shims：对于一些新特性或API，老版本的浏览器可能不支持。这时可以使用polyfills（代码库，提供浏览器不支持的功能）或shims（模拟已有的API）。例如，如果你需要使用ES6的Promise，但在某些旧浏览器中未被原生支持，你可以引入如"es6-promise"这样的polyfill。

if (!window.Promise) {
  // 使用polyfill
  window.Promise = require('es6-promise').Promise;
}

使用条件注释或检测浏览器类型：对于特定的浏览器特性，你可以使用@if ie或@-ms-viewport等条件注释来提供不同的代码块。或者使用navigator对象检测浏览器类型：

if (typeof navigator.userAgent !== 'undefined' && /MSIE|Trident/.test(navigator.userAgent)) {
  // 这里是针对IE的代码
}

使用Babel或TypeScript：Babel是一个编译器，它可以将ES6+的语法转换为更广泛的浏览器可识别的ES5语法。TypeScript是一种超集JavaScript的编程语言，它提供了更好的类型检查和更丰富的库，编译后也会得到兼容性更好的JavaScript。

# Babel配置
npm install --save-dev @babel/core @babel/preset-env

// 或者 TypeScript配置
npm install --save-dev typescript

使用CSS前缀：对于CSS3的属性，不同浏览器可能需要不同的前缀（如-webkit-, -moz-, -ms-等）。可以使用Autoprefixer工具自动添加这些前缀。

npm install --save-dev autoprefixer

使用库或框架：许多现代库和框架（如React、Vue、Angular）已经处理了大部分的浏览器兼容性问题，它们会提供一套跨浏览器的API和解决方案。
测试：使用自动化测试工具（如Jest, Mocha, Chai等）进行跨浏览器测试，确保在各种环境下都能正常工作。
更新频率：随着新的浏览器版本不断发布，确保你的应用支持最新的浏览器特性，同时保留对旧版本的兼容。

通过以上策略，可以有效地处理JavaScript的浏览器兼容性问题。但请记住，每种方法都有其适用范围，要根据项目需求和具体情况灵活选择。

23. 使用`console.log()`进行调试，以及更高级的控制台API。

在JavaScript中，console.log()是最基本的调试工具，它允许你在控制台上打印出变量的值、对象、函数调用结果等信息，这对于理解代码的运行过程非常有帮助。例如：

let name = 'John';
let age = 30;

console.log('Hello, my name is', name, 'and I am', age, 'years old.'); // 输出：Hello, my name is John and I am 30 years old.

然而，console API 提供了更多高级功能：

console.log(): 基本的打印语句。
console.info(): 类似于log()，但通常用于输出更详细的信息，不会被过滤。
console.warn(): 当遇到可能的问题或警告时使用，输出带有黄色感叹号的消息。
console.error(): 用于报告错误，输出带有红色叉号的消息。
console.debug(): 只在开发模式下显示，用于更详细的调试信息，通常会被浏览器的开发者工具过滤。
console.time() 和 console.timeEnd(): 用于测量代码块的执行时间。
console.group() 和 console.groupEnd(): 用于组织输出，使得输出看起来更清晰。
console.assert(): 检查一个条件是否为真，如果为假则抛出错误。
console.trace(): 显示当前执行上下文的堆栈跟踪。

例如：

console.time('My Operation');
// 这里是你的代码...
console.timeEnd('My Operation'); // 输出 "My Operation: Xms"

console.table(): 将数据转换为表格形式输出，适用于数组或对象数组。

const data = [
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 }
];

console.table(data); // 输出一个表格

以上只是console API的一部分，通过这些工具，你可以更有效地理解和调试你的JavaScript代码。

24. 介绍Web Workers及其应用场景。

Web Workers是HTML5引入的一种新的技术，它允许我们在浏览器的后台线程中运行脚本，而不会阻塞用户界面（UI）的渲染。这意味着我们可以在处理大量计算密集型任务或者网络请求时，让用户继续进行其他操作，提高用户体验。

Web Workers的应用场景主要包括：

数据处理和分析：当需要处理大量数据，如图像处理、视频编码解码、科学计算等，这些任务可以放在Web Worker中，避免阻塞主线程。
后台网络请求：在进行网络请求时，如果请求时间较长，可以在Web Worker中异步执行，防止页面加载延迟。
游戏开发：在游戏中的音频处理、物理模拟等计算密集型任务，也可以使用Web Worker来提升性能。
实时通信：在WebSocket连接中，可以使用Web Worker来处理接收和发送消息，以保持UI的流畅。

以下是一个简单的JavaScript示例，展示如何创建和使用Web Worker：

// 主线程（UI线程）
var worker = new Worker('worker.js');

worker.postMessage('Hello, Worker!'); // 发送消息给Worker

worker.onmessage = function(event) {
    console.log('Received from worker: ' + event.data); // 接收Worker返回的消息
};

// worker.js（后台线程）
self.addEventListener('message', function(event) {
    console.log('Received message: ' + event.data);

    // 这里可以执行一些耗时的操作
    var result = longRunningTask(event.data);

    self.postMessage(result); // 返回结果给主线程
});

function longRunningTask(data) {
    // 这里是你的长时间运行的任务
    // ...
    return 'Task completed';
}

在这个例子中，worker.js文件中的代码会在一个单独的线程上运行，而主线程则可以继续处理用户交互。当worker.js完成任务后，会通过postMessage方法将结果发送回主线程。

25. 使用`fetch()`进行网络请求，与XMLHttpRequest的区别。

fetch()和XMLHttpRequest（XHR）都是用于在Web应用程序中发起HTTP请求的工具，但它们在语法、API设计和使用方式上存在一些不同。

语法和API设计：

XMLHttpRequest：它是基于回调的，你需要创建一个XMLHttpRequest对象，然后设置它的方法（GET、POST等），URL，以及监听onreadystatechange事件来处理响应。例如：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

fetch()：fetch()是Promise-based的，它返回一个Promise，你可以直接链式调用.then()和.catch()来处理响应。例如：

fetch('https://api.example.com/data')
  .then(response => response.text())
  .then(data => console.log(data))
  .catch(error => console.error(error));

错误处理：
- XMLHttpRequest：需要显式地检查onerror或onreadystatechange状态来捕获错误。
- fetch()：错误会被自动转换为一个可被捕获的错误对象，可以直接在.catch()中处理。
请求体和头部：
- XMLHttpRequest：可以通过setRequestHeader()方法设置请求头，send()方法可以发送请求体。
- fetch()：请求头通过headers选项设置，请求体可以通过body选项传递，支持多种格式，如JSON、FormData、Blob等。
兼容性：
- XMLHttpRequest：在所有现代浏览器中都可用，但需要处理跨域问题。
- fetch()：在所有现代浏览器中都可用，且更现代化，但不支持IE浏览器，需要使用polyfill（如whatwg-fetch）来添加支持。

总的来说，fetch()提供了更简洁、易读的API，而XMLHttpRequest则更加灵活，适合需要更多控制权的情况。然而，随着浏览器对fetch()的支持增强，许多开发者倾向于使用fetch()。

26. Service Worker的基本概念及其在离线缓存中的作用。

Service Worker是一种Web API，它允许网页在后台运行一个独立的脚本，即使浏览器关闭或用户离开当前页面，这个脚本也能继续运行。Service Worker的主要目的是为了提供离线体验和性能优化，特别是对于那些需要频繁与服务器交互的Web应用。

基本概念：
- 注册：首先，你需要在你的网站上注册一个Service Worker。这通常通过在HTML文件中添加<script>标签，并调用navigator.serviceWorker.register()方法完成。
- 控制权：一旦Service Worker被注册并激活，它就获得了对所有同源资源（即同一协议、域名和端口）的控制权。这意味着它可以拦截并处理这些资源的网络请求。
- 工作线程：Service Worker在独立的工作线程中运行，不会阻塞UI线程，从而提高用户体验。
在离线缓存中的作用：
- 离线存储：Service Worker可以主动缓存网络资源（如图片、CSS、JavaScript文件等），当用户在离线状态下访问这些资源时，可以从缓存中获取，而不是从网络请求。
- 长久可用性：即使网络连接断开，之前缓存的资源依然可用，提供更好的用户体验。
- 自动更新：Service Worker可以检查资源是否已更新，如果更新，会自动下载并替换旧版本。
JavaScript示例：

// 在index.js中注册Service Worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('sw.js')
      .then(function(registration) {
        console.log('Service Worker registered with scope:', registration.scope);
      })
      .catch(function(error) {
        console.log('Service Worker registration failed:', error);
      });
  });
}

// 在sw.js中定义处理网络请求的逻辑
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('myCache').then(function(cache) {
      return cache.addAll([
        './index.html',
        './styles.css',
        './scripts.js'
      ]);
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      // 如果缓存中有，则返回缓存
      if (response) {
        return response;
      }
      // 否则，尝试从网络获取
      return fetch(event.request);
    })
  );
});

在这个例子中，当sw.js被安装时，它会创建一个名为myCache的缓存，并将一些静态资源添加到其中。然后，当有网络请求时，Service Worker会先尝试从缓存中获取，如果没有，再从网络获取。这样，即使在离线状态下，用户也能访问之前缓存的资源。

27. 使用`window.postMessage()`进行跨窗口通信。

window.postMessage() 是一种在浏览器的同源策略下，允许一个窗口向另一个窗口或iframe发送消息的方法。这是一种安全的通信方式，因为它只能在具有相同协议（http或https）、域名和端口的窗口之间进行。

以下是一个简单的JavaScript示例，演示如何在父窗口和子窗口之间使用window.postMessage()进行通信：

在父窗口（通常为HTML文件）中，我们监听message事件，当接收到子窗口发送的消息时执行相应的处理：

<!DOCTYPE html>
<html>
<body>

<iframe id="childFrame" src="child.html"></iframe>

<script>
document.getElementById('childFrame').contentWindow.addEventListener('message', function(event) {
  if (event.origin === window.location.origin) { // 验证消息来源
    console.log('Received message:', event.data);
    // 这里可以执行你的处理逻辑，例如更新页面内容
  }
}, false);
</script>

</body>
</html>

在子窗口（child.html）中，我们可以使用window.postMessage()发送消息：

<!DOCTYPE html>
<html>
<body>

<button onclick="sendMessage()">Send Message</button>

<script>
function sendMessage() {
  window.parent.postMessage('Hello from child window!', '*'); // 发送消息到父窗口
}
</script>

</body>
</html>

在这个例子中，'*' 是一个特殊的值，表示允许任何源接收消息。如果你只想让特定的父窗口接收消息，你可以替换为父窗口的URL。例如：window.parent.location.href。

注意：window.postMessage()在现代浏览器中非常安全，但并不是所有浏览器都支持，尤其是一些旧版本的浏览器。在使用之前，最好检查兼容性。

28. 实现一个简单的全屏切换功能，利用`Fullscreen API`。

在HTML5中，Fullscreen API提供了一种方法来控制元素是否处于全屏模式。以下是一个简单的JavaScript示例，演示如何使用Fullscreen API实现全屏切换功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fullscreen Switch</title>
    <style>
        #fullscreenButton {
            display: none;
        }
    </style>
</head>
<body>
    <button id="fullscreenButton">Toggle Fullscreen</button>
    <video src="your_video_source.mp4" controls></video>

    <script>
        const video = document.querySelector('video');
        const fullscreenButton = document.getElementById('fullscreenButton');

        // 监听视频元素的fullscreenchange事件
        video.addEventListener('fullscreenchange', function() {
            if (this.isFullscreen) {
                fullscreenButton.textContent = 'Exit Fullscreen';
            } else {
                fullscreenButton.textContent = 'Toggle Fullscreen';
            }
        });

        // 监听按钮的点击事件
        fullscreenButton.addEventListener('click', function() {
            if (video.requestFullscreen) {
                video.requestFullscreen();
            } else if (video.webkitRequestFullscreen) {
                video.webkitRequestFullscreen();
            } else if (video.mozRequestFullScreen) {
                video.mozRequestFullScreen();
            }
        });
    </script>
</body>
</html>

在这个例子中，我们首先获取到一个<video>元素和一个按钮。然后，我们监听fullscreenchange事件，当视频进入或退出全屏时，会更新按钮的文字。最后，我们监听按钮的点击事件，当点击按钮时，会尝试将视频元素放入全屏模式。

请注意，不同的浏览器可能有不同的API，如requestFullscreen、webkitRequestFullscreen或mozRequestFullScreen。这个示例假设你的浏览器支持requestFullscreen，如果需要兼容其他浏览器，你需要检查并使用相应的API。

29. 讨论JavaScript中的安全问题，如XSS和CSRF。

在JavaScript中，安全问题是开发人员必须密切关注的，特别是当涉及到与用户交互或处理敏感数据时。以下两种常见的安全问题：跨站脚本攻击(XSS)和跨站请求伪造(CSRF)。

跨站脚本攻击(XSS):
XSS是一种常见的Web安全漏洞，攻击者通过注入恶意脚本到网页上，当用户访问这个网页时，这些脚本会被执行在用户的浏览器环境中。这可能导致窃取用户信息、修改页面内容或执行其他恶意行为。

例如，假设你有一个用户评论系统，如果前端没有对用户输入进行足够的验证，恶意用户可能会输入包含HTML标签和JavaScript代码的评论，如 <script>alert('Hello, XSS!');</script>。当其他用户查看这条评论时，浏览器会执行这段JavaScript，显示一个警告框。

防范XSS攻击的方法：
- 对用户输入进行严格过滤和转义：使用encodeURIComponent()函数对用户输入进行编码，避免特殊字符被解析为HTML或JavaScript。
- 使用Content Security Policy (CSP)：设置CSP可以限制网页可以加载的内容源，防止执行不受信任的脚本。
- 启用HTTP-only cookies：这可以防止JavaScript访问到cookies，从而保护用户的会话信息。
跨站请求伪造(CSRF):
CSRF是一种利用用户已登录的身份进行未授权操作的攻击。攻击者通过诱使用户在一个网站上执行操作（如提交表单），同时在另一个网站上发送带有相同令牌的请求，从而实现非授权操作。

例如，一个电商网站允许用户取消订单。攻击者可能创建一个包含CSRF令牌的恶意链接，用户点击后，他们的浏览器会自动发送取消订单的请求给服务器，而用户可能并未意识到。

防范CSRF的方法：
- 在每个需要验证用户身份的请求中添加一个随机生成的token，并在服务器端验证这个token。
- 使用CSRF令牌：在表单中添加一个隐藏字段，值为服务器生成的随机令牌，只有与表单一起提交的令牌才有效。
- 使用HTTPS：HTTPS协议提供了一种加密的方式，使得攻击者难以篡改请求。

总的来说，JavaScript的安全问题需要开发者在设计和实现时保持警惕，遵循最佳实践，以确保用户数据的安全。

30. 介绍CORS策略及其在BOM操作中的应用。

CORS（Cross-Origin Resource Sharing，跨源资源共享）是一种浏览器的同源策略的例外，它允许网页从不同的源（即域、协议或端口）请求资源。在没有CORS时，浏览器出于安全考虑，会阻止来自不同源的XMLHttpRequest请求。但通过设置CORS策略，服务器可以控制哪些源可以访问其资源。

在BOM（浏览器对象模型）中，CORS主要与XMLHttpRequest对象有关。以下是一个JavaScript示例，展示了如何在BOM中使用CORS：

// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 设置请求的URL，这是一个跨域请求
xhr.open('GET', 'https://api.example.com/data', true);

// 设置CORS请求头，告诉服务器我们接受JSON格式的数据
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Accept', 'application/json');

// 设置CORS选项，启用CORS
xhr.withCredentials = true; // 如果需要发送cookies

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.error('Request failed.  Returned status of ' + xhr.status);
  }
};

xhr.onerror = function() {
  console.error('There was a problem with the request.');
};

xhr.send(); // 发送请求

在这个例子中，https://api.example.com/data是一个不同源的URL，如果没有CORS策略，上述代码将无法正常工作。但是，如果服务器在响应头中设置了Access-Control-Allow-Origin，允许我们的域名访问，那么这个请求就会成功。

注意：服务器端也需要配置CORS策略，否则即使客户端设置了CORS请求头，服务器仍可能拒绝请求。

我的名片

网名：川

职业：前端开发工程师

现居：四川省-成都市

邮箱：chuan@chenchuan.com

站点信息

建站时间：2017-10-06
网站程序：Koa+Vue
本站运行：
文章数量：
总访问量：
微信公众号：扫描二维码，关注我

您现在的位置是：网站首页 > JS BOM操作面试题文章详情

JS BOM操作面试题

1. 什么是BOM？它与DOM的关系是什么？

2. BOM的核心对象是什么？列举几个主要的BOM对象。

3. 如何使用JavaScript获取和设置浏览器窗口的尺寸？

4. 解释window.location对象及其常用属性和方法。

5. 使用window.history对象管理浏览器历史记录。

6. window.open()、window.close()、window.moveTo()、window.resizeTo()方法的用途及用法。

7. 什么是window.onload和DOMContentLoaded事件？两者有何区别？