JavaScript第九讲：BOM编程
目录
前言
1. 获取文档显示区域的高度和宽度
2. 获取外部窗体的宽度和高度
3. 打开一个新的窗口
关于“Screen对象”
关于“history”对象
BOM 的 Location 对象
1. 刷新当前页面
2. 跳转到另一个页面
3. Location 的其他属性
弹出框
1. 警告框
2. 确认框
3. 输入框
计时器
1. 只执行一次
2. 不停地重复执行
3. 终止重复执行
4. 不要在setInterval调用的函数中使用document.write();
注意事项
结语
前言
今天星途给大家带来JavaScript倒数第二部分知识：BOM编程，希望对码客们有帮助。学过的大佬可以收藏当笔记看。
1. 获取文档显示区域的高度和宽度
你可以使用window对象的innerHeight和innerWidth属性来获取文档显示区域（即视口）的高度和宽度。
// 获取文档显示区域的高度
var viewportHeight = window.innerHeight;
// 获取文档显示区域的宽度
var viewportWidth = window.innerWidth;
console.log('Viewport Height:', viewportHeight);
console.log('Viewport Width:', viewportWidth);
2. 获取外部窗体的宽度和高度
“外部窗体”通常指的是整个浏览器窗口，包括工具栏、滚动条等。你可以使用window.outerWidth和window.outerHeight来获取这些值，但这些属性可能不被所有浏览器支持。更常用的是使用screen对象的属性来获取屏幕的分辨率，但这并不是浏览器窗口的大小。
// 注意：这些属性可能不被所有浏览器支持
var outerWindowWidth = window.outerWidth;
var outerWindowHeight = window.outerHeight;
// 使用Screen对象获取屏幕分辨率
var screenWidth = screen.width;
var screenHeight = screen.height;
console.log('Outer Window Width (if supported):', outerWindowWidth);
console.log('Outer Window Height (if supported):', outerWindowHeight);
console.log('Screen Width:', screenWidth);
console.log('Screen Height:', screenHeight);
3. 打开一个新的窗口
你可以使用window.open()方法来打开一个新的浏览器窗口或标签页。
// 打开一个新的窗口，并导航到指定的URL
var newWindow = window.open('https://www.example.com', '_blank');
// 注意：出于安全原因，浏览器可能会阻止或限制弹出窗口
关于“Navigator对象”
navigator对象包含了有关浏览器的信息。
// 获取浏览器名称
var browserName = navigator.appName;
// 获取浏览器版本
var browserVersion = navigator.appVersion;
// 获取用户代理字符串（包含浏览器、操作系统等信息）
var userAgent = navigator.userAgent;
console.log('Browser Name:', browserName);
console.log('Browser Version:', browserVersion);
console.log('User Agent:', userAgent);
关于“Screen对象”
前面已经提到了screen对象，它包含了关于客户端屏幕的信息。
关于“history”对象
history对象允许你与浏览器的会话历史进行交互。但请注意，出于安全原因，你不能修改历史记录。
// 返回上一次访问的页面（等同于点击浏览器的后退按钮） window.history.back(); // 返回上上次访问的页面（这通常不是直接支持的，但你可以连续调用两次back()） // window.history.go(-2); // 这将返回到历史记录中的前两个页面 // 前进到历史记录中的下一个页面（等同于点击浏览器的前进按钮） window.history.forward(); // 加载历史记录中的特定页面（参数是相对于当前页面的索引，-1表示上一个页面，1表示下一个页面） window.history.go(-1); // 这将返回到上一个页面
BOM 的 Location 对象
1. 刷新当前页面
你可以使用 location.reload() 方法来刷新当前页面。
location.reload(); // 刷新当前页面
2. 跳转到另一个页面
你可以使用 location.href 属性或者 location.assign() 方法来跳转到另一个页面。
// 使用 location.href
location.href = "https://www.example.com";
// 使用 location.assign()
location.assign("https://www.example.com");
3. Location 的其他属性
- location.href：获取或设置整个 URL。
- location.protocol：获取 URL 的协议（如 "http:" 或 "https:"）。
- location.hostname：获取 URL 的主机名。
- location.port：获取 URL 的端口号。
- location.pathname：获取 URL 的路径名。
- location.search：获取 URL 的查询字符串部分（问号后面的部分）。
- location.hash：获取 URL 的锚部分（井号后面的部分）。
console.log(location.protocol); // 输出协议，如 "http:" console.log(location.hostname); // 输出主机名 console.log(location.pathname); // 输出路径名 console.log(location.search); // 输出查询字符串，如 "?key=value" console.log(location.hash); // 输出锚部分，如 "#section"
弹出框
1. 警告框
使用 alert() 函数来显示警告框。
alert("这是一个警告框！");2. 确认框
使用 confirm() 函数来显示一个确认框，用户可以选择确定或取消。
var result = confirm("你确定要执行此操作吗？"); if (result) { console.log("用户点击了确定"); } else { console.log("用户点击了取消"); }3. 输入框
使用 prompt() 函数来显示一个输入框，用户可以在其中输入文本。
var name = prompt("请输入你的名字：", "默认值"); // 第二个参数是默认值 if (name !== null) { // 用户可能直接点击了取消，这时返回null console.log("你好，" + name + "！"); }计时器
1. 只执行一次
使用 setTimeout() 函数来设置一个只执行一次的计时器。
setTimeout(function() { console.log("这是一个只执行一次的计时器！"); }, 2000); // 2秒后执行2. 不停地重复执行
使用 setInterval() 函数来设置一个重复执行的计时器。
var intervalId = setInterval(function() { console.log("这是一个重复执行的计时器！"); }, 1000); // 每1秒执行一次3. 终止重复执行
使用 clearInterval() 函数来终止一个重复执行的计时器。
var intervalId = setInterval(function() { console.log("这是一个重复执行的计时器！"); if (/* 某个条件 */) { clearInterval(intervalId); // 当满足某个条件时终止计时器 } }, 1000);4. 不要在setInterval调用的函数中使用document.write();
当在HTML文档加载完成后（即DOM内容加载完成后）使用document.write()方法时，它会导致整个文档内容被重写，而不是仅仅添加新内容。这是因为document.write()实际上是在写入到文档的“流”中，而在文档加载完成后，这个“流”已经关闭，因此再次调用document.write()会导致页面被重写。
错误的使用方式：
// 这会导致整个页面被重写，并且不断重复，直到浏览器崩溃或阻止它 setInterval(function() { document.write("这是错误的使用方式！"); }, 1000);正确的使用方式：
通常，当你想在页面上动态更新内容时，应该使用DOM操作。以下是一些常用的DOM操作方法：
- innerHTML：设置或获取HTML元素的内容（包括HTML标签）。
- textContent：设置或获取HTML元素的文本内容（不包括HTML标签）。
- DOM API（如createElement、appendChild等）：用于创建和修改DOM元素。
使用innerHTML：
setInterval(function() { var element = document.getElementById("myElement"); element.innerHTML = "这是正确的使用方式，使用innerHTML！
"; }, 1000);使用textContent：
setInterval(function() { var element = document.getElementById("myElement"); element.textContent = "这是正确的使用方式，使用textContent！"; }, 1000);使用DOM API：
setInterval(function() { var parentElement = document.getElementById("parentElement"); var newElement = document.createElement("p"); newElement.textContent = "这是正确的使用方式，使用DOM API！"; parentElement.appendChild(newElement); // 注意：这里每次都会添加一个新的元素，如果你只想更新内容而不是添加新元素，需要清除之前的元素 }, 1000);
注意事项
- 清除定时器：如果你使用setInterval()设置了一个重复执行的定时器，并且想在某个时刻停止它，你应该保存定时器的ID，并使用clearInterval()方法来清除它。
var intervalId = setInterval(function() { // ... 你的代码 ... }, 1000); // 在某个时刻清除定时器 clearInterval(intervalId); -
性能考虑：过度使用setInterval()可能会导致性能问题，特别是当定时器回调函数中执行的操作很耗时或频繁时。在这种情况下，你可能需要考虑使用requestAnimationFrame()或setTimeout()来代替，以实现更平滑的动画或更好的性能。
-
避免闭包导致的内存泄漏：如果你在setInterval()的回调函数中使用了外部变量的闭包，而这些变量在函数外部不再被引用时，可能会导致内存泄漏。确保在不再需要定时器时清除它，并避免在回调函数中创建不必要的闭包。
结语
以上便是今天的“BOM编程”的全部内容，大家共同努力成为更好的程序员。
respect！
- 清除定时器：如果你使用setInterval()设置了一个重复执行的定时器，并且想在某个时刻停止它，你应该保存定时器的ID，并使用clearInterval()方法来清除它。
