【JavaScript之DOM与BOM及其区别与用法】

DOM（文档对象模型）

什么是DOM？

DOM是文档对象模型（Document Object Model）的缩写。它是一种用于表示网页文档结构的模型，将整个网页视为一个树状结构，每个HTML元素都是树中的节点。DOM允许开发者通过JavaScript等脚本语言来访问、修改和操作网页的内容和结构。

DOM的操作

选取元素

要在DOM中选择元素，通常使用document对象的方法，如querySelector()和querySelectorAll()。

const header = document.querySelector('header'); // 选择头部元素
const paragraphs = document.querySelectorAll('p'); // 选择所有段落元素

修改内容

一旦我们选择了元素，可以使用DOM来修改其内容。

const paragraph = document.querySelector('p');
paragraph.textContent = '新的文本内容'; // 修改文本内容

操作属性

可以使用DOM来读取或修改元素的属性。

const image = document.querySelector('img');
const src = image.getAttribute('src'); // 读取属性值

const link = document.querySelector('a');
link.setAttribute('href', 'https://www.example.com'); // 修改属性值

添加和移除元素

使用DOM可以动态添加和移除元素。

const newParagraph = document.createElement('p'); // 创建新段落元素
newParagraph.textContent = '新段落';
document.body.appendChild(newParagraph); // 将新段落添加到文档中

const elementToRemove = document.querySelector('.remove-me');
elementToRemove.remove(); // 从文档中移除元素

事件处理

DOM允许为元素添加事件监听器，以响应用户的交互。

const button = document.querySelector('button');

function handleClick() {
  alert('按钮被点击了！');
}

button.addEventListener('click', handleClick);

BOM（浏览器对象模型）

什么是BOM？

BOM是浏览器对象模型（Browser Object Model）的缩写。它提供了与浏览器窗口和浏览器本身进行交互的接口，用于控制浏览器的行为。

BOM的操作

窗口属性

• window.location：用于获取或设置当前浏览器窗口的URL。
• window.open()：用于打开新的浏览器窗口或标签页，并加载指定的URL。
• window.close()：用于关闭当前浏览器窗口。

窗口尺寸和滚动

• window.innerWidth 和 window.innerHeight：用于获取浏览器窗口的内部宽度和高度。
• window.scrollX 和 window.scrollY：用于获取浏览器窗口当前的水平滚动位置和垂直滚动位置。

浏览器历史

• window.history.back() 和 window.history.forward()：用于在浏览器历史记录中后退和前进。

定时器

• window.setTimeout() 和 window.setInterval()：用于设置定时器，执行函数或代码块在一定时间后或以一定间隔重复执行。

弹窗和对话框

• window.alert()、window.confirm() 和 window.prompt()：用于显示弹窗和对话框与用户交互。

location 对象

location 对象允许您获取和操作浏览器的当前URL。

• location.href：获取或设置当前浏览器窗口的完整URL。
• location.hostname：获取主机名部分（域名）。
• location.port：获取端口号（如果有）。
• location.protocol：获取当前URL的协议部分。
• location.pathname：获取当前URL的路径部分。
• location.search：获取当前URL的查询字符串部分。
• location.hash：获取当前URL的哈希部分，包括 “#” 符号。
• location.reload()：重新加载当前页面。

navigator 对象

navigator 对象提供了有关用户浏览器和操作系统的信息，

• navigator.userAgent：获取用户浏览器的用户代理信息。
• navigator.platform：获取用户操作系统的名称。
• navigator.language：获取用户浏览器的首选语言。
• navigator.cookieEnabled：检查用户浏览器是否启用了Cookie。
• navigator.geolocation：获取用户设备的地理位置信息。
• navigator.onLine：检查用户设备是否连接到互联网。