BOM编程
BOM(Browser Object Model)是指浏览器对象模型,它提供了与浏览器窗口进行交互的对象和方法
BOM的组成部分
- Window对象:代表浏览器窗口,是BOM的顶层对象,包含了全局的属性和方法。
- Navigator对象:提供关于浏览器的信息,比如浏览器的名称、版本等。
- Screen对象:提供关于用户屏幕的信息,比如屏幕的高度、宽度等。
- Location对象:代表当前窗口的URL信息,可以用来获取或设置浏览器的URL。
- History对象:代表浏览器的历史记录,可以用来在浏览历史记录中前进或后退。
- Document对象:代表当前加载的文档,可以用来操作文档的内容和结构。
BOM的常见应用
- 操作浏览器窗口:可以通过BOM来控制浏览器窗口的大小、位置等属性。
- 处理浏览器事件:可以利用BOM来捕获和处理浏览器事件,比如点击事件、滚动事件等。
- 操作浏览器历史记录:可以使用BOM来管理浏览器的历史记录,实现前进、后退等功能。
- 获取浏览器信息:可以通过BOM获取浏览器的信息,比如浏览器类型、版本等。
- 控制页面跳转:可以使用BOM来控制页面的跳转和重定向。
常用Window对象的API
三种弹窗
- Window.alert() - 显示一个带有指定消息和一个“确定”按钮的警告框。
- Window.confirm() - 显示一个带有指定消息以及“确定”和“取消”按钮的对话框。
- Window.prompt() - 显示一个提示框,要求用户输入文本。
打开关闭窗口
- Window.open() - 打开一个新的浏览器窗口或新标签页。
- Window.close() - 关闭当前窗口。
- Window.location - 提供有关当前 URL 的信息并允许跳转到新的 URL。
定时执行
- Window.setTimeout() - 在指定的毫秒数后执行指定的函数。
- Window.setInterval() - 每隔指定的毫秒数重复执行指定的函数。
其它
- Window.document - 表示当前窗口中载入的文档。
- Window.localStorage - 提供了访问当前域名下的本地存储功能,可以存储键值对数据。
window对象常见属性的常用方法
window.history:
- window.history 对象允许你与浏览器的历史记录进行交互。
- 使用 history.back() 和 history.forward() 方法来在历史记录中向后或向前导航。
- history.length 属性可以获取历史记录中的条目数量。
window.location:
- window.location 对象包含有关当前 URL 的信息,并允许你与浏览器的地址栏进行交互。
- location.href 获取当前页面的 URL,也可以设置新的 URL 来导航到其他页面。
- 可以使用 location.reload() 方法重新加载当前页面。
window.sessionStorage
- 会话级别存储:
- sessionStorage 存储的数据仅在当前会话期间有效。会话期间指的是用户在浏览器标签或窗口中保持打开状态的时间段。
- 当用户关闭浏览器标签或窗口时,sessionStorage 中存储的数据会被清除。
- 使用方法:
- 通过 sessionStorage.setItem(key, value) 方法来存储数据。
- 通过 sessionStorage.getItem(key) 方法来获取存储的数据。
- 可以使用 sessionStorage.removeItem(key) 方法来删除特定键的数据。
- 示例:
// 存储数据到 sessionStorage
sessionStorage.setItem('username', 'John Doe');
// 获取存储的数据
const username = sessionStorage.getItem('username');
console.log(username); // 输出: John Doe
localStorage:
- 永久性存储:
- localStorage 存储的数据在用户关闭浏览器后仍然有效,它们会永久保存在用户的浏览器中,直到被显式删除。
- 不同于 sessionStorage,localStorage 中的数据不会因为会话结束而丢失。
- 使用方法:
- 通过 localStorage.setItem(key, value) 方法来存储数据。
- 通过 localStorage.getItem(key) 方法来获取存储的数据。
- 使用 localStorage.removeItem(key) 方法来删除特定键的数据。
- 示例:
// 存储数据到 localStorage
localStorage.setItem('theme', 'dark');
// 获取存储的数据
const theme = localStorage.getItem('theme');
console.log(theme); // 输出: dark
BOM编程实例
// 获取浏览器窗口的宽度和高度
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
// 弹出一个确认框
var result = window.confirm("确定要删除吗?");
if (result) {
// 执行删除操作
}
// 跳转到指定页面
window.location.href = "https://www.example.com";
// 前进或后退
window.history.forward();
window.history.back();
DOM编程
- 本质上就是利用document对象完成对网页的动态处理
- DOM(Document Object Model)是指文档对象模型,是一种用于表示和操作网页文档结构的编程接口。
- 在Web开发中,DOM编程使用脚本语言(如JavaScript)来访问、修改和更新网页的内容、结构和样式。
DOM结构
- 节点(Nodes):DOM将文档表示为一个树形结构,其中每个部分都是一个节点,如元素节点、文本节点、属性节点等。
- 元素节点(Element Nodes):代表HTML元素,如
<div>、<p>
等。 - 属性节点(Attribute Nodes):代表HTML元素的属性,如id、class等。
- 文本节点(Text Nodes):代表HTML元素中的文本内容。
DOM功能
- 获取元素:开发者可以使用JavaScript通过DOM获取页面上的元素,例如通过document.getElementById(‘elementId’)、document.querySelector(‘.className’)等方法。
- 操作元素:通过DOM可以修改元素的内容、样式、属性等,例如修改元素的文本内容、添加样式、改变属性值等。
- 事件处理:DOM允许开发者为页面元素添加事件监听器,以便在特定事件发生时执行相应的操作,如点击事件、鼠标移入事件等。
- DOM操作的性能:在进行DOM操作时,应该尽量减少频繁的DOM操作,可以通过缓存查询结果、使用事件委托等方式来提高性能。
- 跨浏览器兼容性:在进行DOM编程时,需要考虑不同浏览器对DOM标准的支持,可以使用现代的JavaScript库或框架来简化跨浏览器兼容性问题。
DOM编程步骤
- 获取DOM树
- document其实是window对象的一个属性可以直接使用
- 获取元素:
- 获取要操作的 DOM 元素。这可以通过诸如 document.getElementById(), document.getElementsByClassName(), document.getElementsByTagName() 等方法来实现。
- 操作元素:
- 一旦获取了元素,可以对其进行各种操作,如修改内容、样式、属性等。这包括诸如 element.innerHTML, element.style, element.setAttribute() 等方法。
实例
// 获取需要操作的DOM元素
const heading = document.getElementById('heading');
const changeTextBtn = document.getElementById('changeTextBtn');
// 添加事件监听器,点击按钮时改变文本内容
changeTextBtn.addEventListener('click', function() {
heading.textContent = 'Text Changed!';
heading.style.color = 'blue';
});
DOM获取元素
- 通过ID获取元素:
var element = document.getElementById("elementId");
- 通过类名获取元素:
var elements = document.getElementsByClassName("className");
- 通过标签名获取元素:
var elements = document.getElementsByTagName("tagName");
- 通过选择器获取元素(使用CSS选择器):
var element = document.querySelector("selector");
var elements = document.querySelectorAll("selector");
DOM操作元素
操作元素属性:
- 获取元素属性:
const element = document.getElementById('myElement');
const attributeValue = element.getAttribute('attributeName');
- 设置元素属性:
const element = document.getElementById('myElement');
element.setAttribute('attributeName', 'attributeValue');
- 删除元素属性:
const element = document.getElementById('myElement');
element.removeAttribute('attributeName');
操作元素样式:
- 获取元素样式:
const element = document.getElementById('myElement');
const style = element.style;
const backgroundColor = style.backgroundColor;
- 设置元素样式:
const element = document.getElementById('myElement');
element.style.backgroundColor = 'red';
操作元素文本值:
注意,是文本内容,不是表单元素(比如input)的值
- 获取元素文本内容:
const element = document.getElementById('myElement');
const textContent = element.textContent;
- 设置元素文本内容:
const element = document.getElementById('myElement');
element.textContent = 'New Text Content';
增加元素:
// 创建一个新的元素
var newElement = document.createElement('div');
// 给新元素添加文本内容
newElement.textContent = '这是一个新的元素';
// 将新元素添加到页面中的特定位置
document.body.appendChild(newElement);
替换元素:
// 获取要被替换的元素
var oldElement = document.getElementById('oldElementId');
// 创建一个新的元素
var newElement = document.createElement('div');
newElement.textContent = '这是一个新的元素';
// 用新元素替换旧元素
oldElement.parentNode.replaceChild(newElement, oldElement);
删除元素:
// 获取要删除的元素
var elementToRemove = document.getElementById('elementToRemove');
// 从其父元素中移除该元素
elementToRemove.parentNode.removeChild(elementToRemove);