JavaScript第九讲:BOM编程

目录

前言

[1. 获取文档显示区域的高度和宽度](#1. 获取文档显示区域的高度和宽度)

[2. 获取外部窗体的宽度和高度](#2. 获取外部窗体的宽度和高度)

[3. 打开一个新的窗口](#3. 打开一个新的窗口)

关于"Navigator对象"

关于"Screen对象"

关于"history"对象

[BOM 的 Location 对象](#BOM 的 Location 对象)

[1. 刷新当前页面](#1. 刷新当前页面)

[2. 跳转到另一个页面](#2. 跳转到另一个页面)

[3. Location 的其他属性](#3. Location 的其他属性)

弹出框

[1. 警告框](#1. 警告框)

[2. 确认框](#2. 确认框)

[3. 输入框](#3. 输入框)

计时器

[1. 只执行一次](#1. 只执行一次)

[2. 不停地重复执行](#2. 不停地重复执行)

[3. 终止重复执行](#3. 终止重复执行)

[4. 不要在setInterval调用的函数中使用document.write();](#4. 不要在setInterval调用的函数中使用document.write();)

注意事项

结语


前言

今天星途给大家带来JavaScript倒数第二部分知识:BOM编程,希望对码客们有帮助。学过的大佬可以收藏当笔记看。

1. 获取文档显示区域的高度和宽度

你可以使用window对象的innerHeightinnerWidth属性来获取文档显示区域(即视口)的高度和宽度。

javascript 复制代码
// 获取文档显示区域的高度  
var viewportHeight = window.innerHeight;  
  
// 获取文档显示区域的宽度  
var viewportWidth = window.innerWidth;  
  
console.log('Viewport Height:', viewportHeight);  
console.log('Viewport Width:', viewportWidth);

2. 获取外部窗体的宽度和高度

"外部窗体"通常指的是整个浏览器窗口,包括工具栏、滚动条等。你可以使用window.outerWidthwindow.outerHeight来获取这些值,但这些属性可能不被所有浏览器支持。更常用的是使用screen对象的属性来获取屏幕的分辨率,但这并不是浏览器窗口的大小。

javascript 复制代码
// 注意:这些属性可能不被所有浏览器支持  
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()方法来打开一个新的浏览器窗口或标签页。

javascript 复制代码
// 打开一个新的窗口,并导航到指定的URL  
var newWindow = window.open('https://www.example.com', '_blank');  
  
// 注意:出于安全原因,浏览器可能会阻止或限制弹出窗口

关于"Navigator对象"

navigator对象包含了有关浏览器的信息。

javascript 复制代码
// 获取浏览器名称  
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对象允许你与浏览器的会话历史进行交互。但请注意,出于安全原因,你不能修改历史记录。

javascript 复制代码
// 返回上一次访问的页面(等同于点击浏览器的后退按钮)  
window.history.back();  
  
// 返回上上次访问的页面(这通常不是直接支持的,但你可以连续调用两次back())  
// window.history.go(-2); // 这将返回到历史记录中的前两个页面  
  
// 前进到历史记录中的下一个页面(等同于点击浏览器的前进按钮)  
window.history.forward();  
  
// 加载历史记录中的特定页面(参数是相对于当前页面的索引,-1表示上一个页面,1表示下一个页面)  
window.history.go(-1); // 这将返回到上一个页面

BOM 的 Location 对象

1. 刷新当前页面

你可以使用 location.reload() 方法来刷新当前页面。

javascript 复制代码
location.reload(); // 刷新当前页面
2. 跳转到另一个页面

你可以使用 location.href 属性或者 location.assign() 方法来跳转到另一个页面。

javascript 复制代码
// 使用 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 的锚部分(井号后面的部分)。
javascript 复制代码
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() 函数来显示警告框。

javascript 复制代码
alert("这是一个警告框!");
2. 确认框

使用 confirm() 函数来显示一个确认框,用户可以选择确定或取消。

javascript 复制代码
var result = confirm("你确定要执行此操作吗?");  
if (result) {  
    console.log("用户点击了确定");  
} else {  
    console.log("用户点击了取消");  
}
3. 输入框

使用 prompt() 函数来显示一个输入框,用户可以在其中输入文本。

javascript 复制代码
var name = prompt("请输入你的名字:", "默认值"); // 第二个参数是默认值  
if (name !== null) { // 用户可能直接点击了取消,这时返回null  
    console.log("你好," + name + "!");  
}

计时器

1. 只执行一次

使用 setTimeout() 函数来设置一个只执行一次的计时器。

javascript 复制代码
setTimeout(function() {  
    console.log("这是一个只执行一次的计时器!");  
}, 2000); // 2秒后执行
2. 不停地重复执行

使用 setInterval() 函数来设置一个重复执行的计时器。

javascript 复制代码
var intervalId = setInterval(function() {  
    console.log("这是一个重复执行的计时器!");  
}, 1000); // 每1秒执行一次
3. 终止重复执行

使用 clearInterval() 函数来终止一个重复执行的计时器。

javascript 复制代码
var intervalId = setInterval(function() {  
    console.log("这是一个重复执行的计时器!");  
    if (/* 某个条件 */) {  
        clearInterval(intervalId); // 当满足某个条件时终止计时器  
    }  
}, 1000);
4. 不要在setInterval调用的函数中使用document.write();

当在HTML文档加载完成后(即DOM内容加载完成后)使用document.write()方法时,它会导致整个文档内容被重写,而不是仅仅添加新内容。这是因为document.write()实际上是在写入到文档的"流"中,而在文档加载完成后,这个"流"已经关闭,因此再次调用document.write()会导致页面被重写。

错误的使用方式

javascript 复制代码
// 这会导致整个页面被重写,并且不断重复,直到浏览器崩溃或阻止它  
setInterval(function() {  
    document.write("这是错误的使用方式!");  
}, 1000);

正确的使用方式

通常,当你想在页面上动态更新内容时,应该使用DOM操作。以下是一些常用的DOM操作方法:

  • innerHTML:设置或获取HTML元素的内容(包括HTML标签)。
  • textContent:设置或获取HTML元素的文本内容(不包括HTML标签)。
  • DOM API(如createElementappendChild等):用于创建和修改DOM元素。

使用innerHTML

javascript 复制代码
setInterval(function() {  
    var element = document.getElementById("myElement");  
    element.innerHTML = "<p>这是正确的使用方式,使用innerHTML!</p>";  
}, 1000);

使用textContent

javascript 复制代码
setInterval(function() {  
    var element = document.getElementById("myElement");  
    element.textContent = "这是正确的使用方式,使用textContent!";  
}, 1000);

使用DOM API

javascript 复制代码
setInterval(function() {  
    var parentElement = document.getElementById("parentElement");  
    var newElement = document.createElement("p");  
    newElement.textContent = "这是正确的使用方式,使用DOM API!";  
    parentElement.appendChild(newElement);  
    // 注意:这里每次都会添加一个新的<p>元素,如果你只想更新内容而不是添加新元素,需要清除之前的元素  
}, 1000);
注意事项
  • 清除定时器 :如果你使用setInterval()设置了一个重复执行的定时器,并且想在某个时刻停止它,你应该保存定时器的ID,并使用clearInterval()方法来清除它。

    javascript 复制代码
    var intervalId = setInterval(function() {  
        // ... 你的代码 ...  
    }, 1000);  
      
    // 在某个时刻清除定时器  
    clearInterval(intervalId);
  • 性能考虑 :过度使用setInterval()可能会导致性能问题,特别是当定时器回调函数中执行的操作很耗时或频繁时。在这种情况下,你可能需要考虑使用requestAnimationFrame()setTimeout()来代替,以实现更平滑的动画或更好的性能。

  • 避免闭包导致的内存泄漏 :如果你在setInterval()的回调函数中使用了外部变量的闭包,而这些变量在函数外部不再被引用时,可能会导致内存泄漏。确保在不再需要定时器时清除它,并避免在回调函数中创建不必要的闭包。

结语

以上便是今天的"BOM编程"的全部内容,大家共同努力成为更好的程序员。

respect!

相关推荐
科技探秘人3 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
Source.Liu3 分钟前
【用Rust写CAD】第二章 第四节 函数
开发语言·rust
monkey_meng4 分钟前
【Rust中的迭代器】
开发语言·后端·rust
科技探秘人4 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
余衫马7 分钟前
Rust-Trait 特征编程
开发语言·后端·rust
JerryXZR9 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
monkey_meng10 分钟前
【Rust中多线程同步机制】
开发语言·redis·后端·rust
七星静香11 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
Jacob程序员12 分钟前
java导出word文件(手绘)
java·开发语言·word
q24985969314 分钟前
前端预览word、excel、ppt
前端·word·excel