js学习
- 浏览器对象模型 (BOM)
BOM 是一组对象，用于与浏览器进行交互，它不依赖于页面的内容，主要用于控制浏览器窗口和与用户进行互动。以下是一些关键的 BOM 对象：
关键对象
window：表示浏览器窗口，是 BOM 的顶层对象，所有其他对象都是其属性或方法。
常用方法：
alert(message)：弹出警告框。
confirm(message)：弹出确认框，返回用户的选择（true 或 false）。
prompt(message)：弹出输入框，返回用户输入的字符串。
window.alert("Hello, World!");
let userResponse = window.confirm("Are you sure?");
document：表示当前网页的文档，DOM 的基础。
navigator：提供关于浏览器和操作系统的信息（如浏览器类型、版本）。
screen：提供关于用户屏幕的信息（屏幕宽度、高度等）。
常见用途
控制浏览器行为（如打开新窗口、定位 URL）。
检查浏览器信息以进行功能兼容性处理。
2. 文档对象模型 (DOM)
DOM 是 HTML 和 XML 文档的编程接口，表示文档的结构。它将文档视作一棵节点树，其中每个节点都是文档的一部分。
DOM
节点类型：
元素节点：代表 HTML 元素（如
）。
文本节点：代表元素内的文本。
属性节点：代表元素的属性。
常用 DOM 操作
选择元素：
document.getElementById(id)：通过 ID 选择元素。
document.getElementsByClassName(className)：通过类名选择元素集合。
document.getElementsByTagName(tagName)：通过标签名选择元素集合。
document.querySelector(selector)：通过 CSS 选择器选择第一个匹配的元素。
document.querySelectorAll(selector)：通过 CSS 选择器选择所有匹配的元素集合。
修改元素：
element.innerHTML：获取或设置元素的 HTML 内容。
element.style：获取或设置元素的样式。
element.setAttribute(name, value)：设置元素的属性。
let header = document.getElementById("header");
header.innerHTML = "Welcome to my website!";
header.style.color = "blue";
创建和删除元素：
document.createElement(tagName)：创建一个新的元素。
element.appendChild(child)：向元素添加子节点。
element.removeChild(child)：删除子节点。
let newDiv = document.createElement("div");
newDiv.innerHTML = "This is a new div!";
document.body.appendChild(newDiv);
3. 事件监听
事件监听允许开发者对用户的交互（如点击、输入等）作出响应。JavaScript 通过事件机制来处理这种交互。
添加事件监听
使用 addEventListener(event, handler) 方法为元素添加事件监听器。此方法允许指定事件类型和相应的处理函数。
let button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("Button was clicked!");
});
常见事件
鼠标事件：
click：单击。
dblclick：双击。
mouseover：鼠标悬停。
mouseout：鼠标移出。
键盘事件：
keydown：按键按下。
keyup：按键松开。
keypress：按键处于按下状态（不推荐，因为不能捕获某些按键）。
表单事件：
submit：表单提交。
change：元素的值改变。
input：用户输入。
移除事件监听
可以使用 removeEventListener(event, handler) 移除已添加的事件监听器。
function handleClick() {
alert("Button was clicked!");
}
button.addEventListener("click", handleClick);
// 之后可以移除监听
button.removeEventListener("click", handleClick);
事件对象
事件处理函数通常会接收到一个 event 对象作为参数，此对象包含关于事件的详细信息：
button.addEventListener("click", function(event) {
console.log(event); // 包含事件类型、目标元素等信息
});
