dom和bom基本操作

DOM（文档对象模型）概述

• DOM 是一种将 HTML 或 XML 文档表示为树状结构的方式，使得开发人员可以使用脚本语言（如 JavaScript）来访问和操作文档的内容、结构和样式。
• DOM 提供了一组 API 和属性，使得我们可以通过 JavaScript 来创建、修改、删除和遍历文档中的元素和节点。

获取元素和节点

• document.getElementById(id): 通过元素的 ID 获取元素对象。
• document.getElementsByClassName(className): 通过类名获取元素对象的集合。
• document.getElementsByTagName(tagName): 通过标签名获取元素对象的集合。
• document.querySelector(selector): 通过 CSS 选择器获取匹配的第一个元素对象。
• document.querySelectorAll(selector): 通过 CSS 选择器获取所有匹配的元素对象的集合。
• element.parentNode: 获取元素的父节点。
• element.children: 获取元素的子元素节点集合。
• element.nextElementSibling: 获取元素的下一个兄弟节点。
• element.previousElementSibling: 获取元素的上一个兄弟节点。

创建、插入和删除元素和节点

• document.createElement(tagName): 创建指定标签名的元素节点。
• element.appendChild(childElement): 在指定元素的末尾添加一个子元素节点。
• element.insertBefore(newElement, referenceElement): 在指定元素的前面插入一个新的子元素节点。
• element.removeChild(childElement): 删除指定元素的一个子元素节点。
• element.replaceChild(newElement, oldElement): 用新的子元素节点替换指定元素的一个子元素节点。

属性和内容操作

• element.getAttribute(attribute): 获取指定属性的值。
• element.setAttribute(attribute, value): 设置指定属性的值。
• element.innerHTML: 获取或设置元素的 HTML 内容。
• element.textContent: 获取或设置元素的纯文本内容。
• element.value: 获取或设置表单元素的值。
• element.style.property: 获取或设置元素的样式属性。

类操作

• element.classList.add(className): 向元素添加指定的类名。

• element.classList.remove(className): 从元素中移除指定的类名。

• element.classList.toggle(className): 如果元素有指定的类名，则移除它；否则，添加它。

• element.classList.contains(className): 检查元素是否包含指定的类名。

这些是 DOM 操作的一些常见方法和属性。实际上，DOM 还提供了更多的方法和属性，可以根据具体需求进行深入学习和探索。

BOM（浏览器对象模型）概述

• BOM 是一种将浏览器窗口和框架作为对象表示的方式，它提供了一组 API 和属性，使得我们可以通过 JavaScript 来控制和操作浏览器窗口、页面导航、浏览器历史记录等。
• BOM 对象是由浏览器厂商定义的，因此在不同的浏览器中，BOM 对象及其属性和方法可能会有所不同。

window.load事件

window.load 是一个 JavaScript 事件，它在整个页面及其所有相关资源（如图片、样式表、脚本等）都加载完成后触发。

具体来说，window.load 事件在以下情况下触发：

1. 当所有 HTML、CSS、JavaScript 文件都已经下载完毕，并且所有图像和其他媒体元素也已经加载完成时，load 事件将被触发。
2. 当浏览器窗口调整大小时，load 事件也会再次触发。

window.load 事件通常用于执行需要在页面完全加载之后才进行的操作，例如初始化页面上的功能、启动应用程序或执行其他必要的后续逻辑。

以下是使用 window.load 事件的示例代码：

javascriptCopy Codewindow.addEventListener('load', function() {
  // 在页面加载完毕后执行的操作
  // 可以放置需要在页面完全加载之后才能执行的代码
});

addEventListener 方法

1. 事件类型（type）：表示要监听的事件类型的字符串。例如，click 表示点击事件，load 表示页面加载事件等等。
2. 事件处理函数（listener）：一个回调函数，当事件被触发时会执行该函数。事件对象将作为参数传递给该函数。
3. 可选参数（options）：一个配置对象，用于指定其他选项。这个参数是可选的。

以下是使用 addEventListener 方法的完整示例，包括所有参数：

element.addEventListener(type, listener, options);

• element 是一个 DOM 元素，代表你要监听事件的目标元素。
• type 是一个字符串，表示要监听的事件类型。
• listener 是一个回调函数，会在事件触发时执行。
• options 是一个可选的对象，用于配置更多的选项。它可以包含以下属性：
  • capture：一个布尔值，指定事件是否在捕获阶段触发，默认为 false。
  • once：一个布尔值，指定事件是否只触发一次，默认为 false。
  • passive：一个布尔值，指定事件是否是被 passively 支持的（即不会调用 preventDefault()），默认为 false。

tpye参数值介绍

type 参数表示要监听的事件类型，它可以是许多不同类型的事件。以下是一些常见的事件类型：

1. 鼠标事件：
   • "click"：当用户点击鼠标左键时触发。
   • "mouseover"：当鼠标指针移动到元素上方时触发。
   • "mouseout"：当鼠标指针从元素上方移出时触发。
   • "mousedown"：当用户按下鼠标按钮时触发。
   • "mouseup"：当用户释放鼠标按钮时触发。
2. 键盘事件：
   • "keydown"：当用户按下键盘上的键时触发。
   • "keyup"：当用户释放键盘上的键时触发。
   • "keypress"：当用户按下并释放键盘上的键时触发。
3. 表单事件：
   • "submit"：当用户提交表单时触发。
   • "change"：当表单元素的值发生改变时触发。
   • "input"：在输入字段的值发生变化时连续触发。
4. 网页加载事件：
   • "load"：当页面及其所有相关资源（如图片、样式表、脚本等）加载完成后触发。
   • "DOMContentLoaded"：当初始 HTML 文档已完全加载和解析，并且 DOM（文档对象模型）已建立时触发。

这只是一小部分常见的事件类型。除了上述的事件类型，还有许多其他事件类型可供选择，如拖拽事件、滚动事件、触摸事件等。

常见的 BOM 对象

• window: 表示当前浏览器窗口或标签页的全局对象。
• navigator: 提供关于浏览器的信息，如用户代理（User Agent）、语言偏好等。
• screen: 提供关于用户屏幕的信息，如宽度、高度、像素密度等。
• history: 用于在浏览器中执行导航操作，如前进、后退、跳转等。
• location: 用于获取或设置当前页面的 URL 信息。

常用的 BOM 属性

• window.innerWidth、window.innerHeight: 浏览器窗口的内部宽度和高度。
• navigator.userAgent: 浏览器的用户代理字符串。
• screen.width、screen.height: 用户屏幕的宽度和高度。
• history.length: 当前窗口历史记录中的页面数量。
• location.href: 当前页面的 URL。

常用的 BOM 方法

• window.open(url, name, specs): 打开新的浏览器窗口或标签页。
• window.close(): 关闭当前浏览器窗口或标签页。
• window.alert(message): 显示带有一段消息和一个“确定”按钮的警告框。
• navigator.geolocation.getCurrentPosition(successCallback, errorCallback): 获取用户的地理位置信息。
• location.reload(): 重新加载当前页面。

这些是 BOM 的一些常见对象、属性和方法。实际上，BOM 还提供了更多的对象和功能，可以根据具体需求进行深入学习和探索。同时要注意，由于 BOM 对象是由浏览器厂商定义的，因此在不同的浏览器中可能存在差异。在开发中，应该注意使用跨浏览器兼容的方法和技术。