速成Javascript(二）
在 JavaScript 中，alert() 是一个全局函数，属于浏览器提供的 window 对象（在浏览器环境中，window 代表整个浏览器窗口，并且在全局作用域下，window 对象的属性和方法可以省略 window. 直接调用 ）。它的主要作用是弹出一个带有指定消息的警告对话框，用于向用户显示简短的提示信息，具体说明如下：
基本语法
alert(message);
其中，message 是要在警告对话框中显示的内容，可以是字符串、数字、布尔值等 JavaScript 数据类型，并且会自动转换为字符串形式展示。
示例
- 显示字符串消息
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>alert示例</title>
</head>
<body><button onclick="showAlert()">点击触发alert</button><script>function showAlert() {alert('这是一个简单的警告提示！');}</script>
</body>
</html>
在上述代码中，当用户点击按钮时，会执行 showAlert() 函数，进而调用 alert() 弹出包含指定字符串消息的对话框。
2.显示变量值
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>alert示例</title>
</head>
<body><script>const num = 42;alert('变量num的值是：' + num); </script>
</body>
</html>
这里先定义了一个变量 num，然后通过 alert() 将变量值和其他文本拼接后展示在对话框中。
特点和注意事项
- 阻塞执行：当
alert()弹出对话框后，JavaScript 代码的执行会暂停，直到用户点击对话框中的 “确定” 按钮关闭它，才会继续执行后续代码。这意味着如果在复杂的交互逻辑中频繁使用alert()，可能会影响用户体验，甚至造成页面假死的错觉。 - 无返回值：
alert()函数主要用于信息展示，它没有返回值，不能用于接收用户输入或进行复杂的交互逻辑处理。如果需要和用户进行更丰富的交互，比如获取用户的选择、接收用户输入的文本等，可以使用confirm()（用于显示带有 “确定” 和 “取消” 按钮的确认对话框，并返回用户点击的结果 ）或prompt()（用于显示一个提示用户输入的对话框，并返回用户输入的文本 ） 函数。 - 适用场景：
alert()常用于开发过程中的调试，比如快速查看变量的值，确认某段代码是否执行到；也适用于向用户展示一些简单、重要且不需要用户进行复杂操作反馈的提示信息，如操作成功或失败的简短提示
在 Web 开发中，document 对象是 DOM（文档对象模型） 的核心部分，它代表当前加载到浏览器中的 HTML 或 XML 文档。通过 document 对象，JavaScript 可以访问、修改和操作网页的内容、结构和样式。
document 对象的主要功能
访问文档元素
通过各种方法获取页面中的元素：javascript
// 通过 ID 获取元素 const element = document.getElementById("myId");// 通过类名获取元素集合 const elements = document.getElementsByClassName("myClass");// 通过标签名获取元素集合 const paragraphs = document.getElementsByTagName("p");// 通过 CSS 选择器获取第一个匹配元素 const firstDiv = document.querySelector(".container div");// 通过 CSS 选择器获取所有匹配元素 const allLinks = document.querySelectorAll("a");创建和修改元素
动态生成或修改页面内容：javascript
// 创建新元素 const newDiv = document.createElement("div"); newDiv.textContent = "新内容"; newDiv.className = "new-class";// 添加元素到文档中 document.body.appendChild(newDiv);// 修改现有元素 const title = document.querySelector("h1"); title.textContent = "更新后的标题"; title.style.color = "blue";访问文档信息
获取关于文档的元数据：javascript
// 获取文档标题 console.log(document.title); // 页面标题// 获取 URL console.log(document.URL); // 当前页面 URL// 获取域名 console.log(document.domain); // 网站域名操作文档结构
管理文档的整体结构：javascript
// 获取<head>和<body>元素 const head = document.head; const body = document.body;// 写入文档内容（会覆盖现有内容） document.write("<h1>Hello World</h1>");事件处理
为文档或元素添加事件监听：javascript
// 监听文档加载完成事件 document.addEventListener("DOMContentLoaded", () => {console.log("文档加载完成"); });Cookie 操作
读取和设置文档的 Cookie：javascript
// 设置 Cookie document.cookie = "username=John; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";// 读取所有 Cookie console.log(document.cookie);
注意事项
document对象是window对象的属性，因此可以直接使用document或window.document访问。- 操作 DOM 可能会影响页面性能，频繁操作时建议使用文档片段（
DocumentFragment）批量处理。 document对象的方法和属性会因浏览器类型和版本略有差异，必要时需考虑兼容性处理。
在 DOM（文档对象模型）中，Element（元素）是构成 HTML/XML 文档的基本构建块，代表页面中的所有标签元素（如 <div>、<p>、<a> 等）。Element 继承自 Node 接口，是 DOM 树中最常用的节点类型之一。
Element 的核心特性
与标签一一对应：每个 HTML 标签在 DOM 中都会被解析为一个
Element对象（如<body>对应body元素，<input>对应输入框元素）。继承关系：
Element→Node→EventTarget，因此它拥有Node的所有属性（如parentNode、childNodes）和方法（如appendChild()、removeChild()），同时还有自身独有的特性。
Element 的常用属性
1. 标识与结构相关
tagName：返回元素标签名（大写，如DIV、P）。javascript
const div = document.querySelector('div'); console.log(div.tagName); // "DIV"id：获取或设置元素的id属性（唯一标识）。javascript
const box = document.getElementById('box'); box.id = 'new-box'; // 修改 idclassName/classList：操作元素的类名。javascript
const elem = document.querySelector('.container'); elem.className = 'active'; // 直接设置类名（覆盖原有）// classList 更灵活（添加、移除、切换类） elem.classList.add('highlight'); elem.classList.remove('active'); elem.classList.toggle('visible'); // 存在则移除，不存在则添加attributes：返回元素所有属性的集合（NamedNodeMap）。javascript
const input = document.querySelector('input'); console.log(input.attributes); // 包含 type、value 等属性
2. 内容与样式相关
innerHTML/innerText/textContent：操作元素内容（前文已详细说明）。style：获取或设置元素的行内样式（CSSStyleDeclaration对象）。javascript
const title = document.querySelector('h1'); title.style.color = 'blue'; // 设置字体颜色 title.style.fontSize = '24px'; // 设置字体大小（注意驼峰命名）dataset：访问元素的自定义数据属性（data-*）。html
<div data-id="123" data-user-name="Alice"></div>javascript
const div = document.querySelector('div'); console.log(div.dataset.id); // "123" console.log(div.dataset.userName); // "Alice"（自动转换为驼峰） div.dataset.status = 'active'; // 添加 data-status="active"
3. 关系相关
parentElement：返回父元素（仅元素节点，区别于parentNode可能返回文档节点）。children：返回子元素的集合（HTMLCollection，仅元素节点）。firstElementChild/lastElementChild：返回第一个 / 最后一个子元素。nextElementSibling/previousElementSibling：返回下一个 / 上一个兄弟元素。javascript
const ul = document.querySelector('ul'); console.log(ul.children); // 所有 li 子元素 console.log(ul.firstElementChild); // 第一个 li
Element 的常用方法
1. 属性操作
getAttribute(name)：获取指定属性的值。setAttribute(name, value)：设置属性的值。removeAttribute(name)：移除指定属性。javascript
const link = document.querySelector('a'); console.log(link.getAttribute('href')); // 获取链接地址 link.setAttribute('target', '_blank'); // 设置新属性 link.removeAttribute('rel'); // 移除属性hasAttribute(name)：判断元素是否有指定属性。javascript
if (input.hasAttribute('required')) {console.log('这是必填项'); }
2. 查找元素
querySelector(selector)：返回匹配 CSS 选择器的第一个子元素。querySelectorAll(selector)：返回匹配 CSS 选择器的所有子元素（NodeList）。javascript
const nav = document.querySelector('nav'); const links = nav.querySelectorAll('a'); // 查找 nav 内所有链接getElementsByClassName(name)：返回同属指定类名的子元素集合（HTMLCollection）。getElementsByTagName(name)：返回同属指定标签名的子元素集合。
3. 样式与类操作
classList相关方法（add()、remove()、toggle()、contains()）：更便捷的类名操作。javascript
const btn = document.querySelector('button'); btn.classList.add('btn-primary'); console.log(btn.classList.contains('btn-primary')); // true
4. 结构操作
append(child)：在元素末尾添加子节点（可添加元素、文本或文档片段）。prepend(child)：在元素开头添加子节点。before(sibling)：在元素前面添加兄弟节点。after(sibling)：在元素后面添加兄弟节点。remove()：移除元素自身。replaceWith(newNode)：用新节点替换当前元素。javascript
const div = document.createElement('div'); div.textContent = '新内容';// 在 body 末尾添加 div document.body.append(div);// 在 div 前添加一个标题 div.before(document.createElement('h2'));
Element 与 Node 的区别
Node是 DOM 中所有节点的基类，包括元素、文本、注释、文档等。Element是Node的子类，仅代表 HTML 标签元素（nodeType为 1）。javascript
const div = document.querySelector('div'); const text = document.createTextNode('hello');console.log(div.nodeType); // 1（Element） console.log(text.nodeType); // 3（Text Node） console.log(div instanceof Element); // true console.log(text instanceof Element); // false
总结
Element 是 DOM 操作的核心对象，通过它可以访问和修改页面中的标签元素、属性、样式和结构。掌握 Element 的属性和方法，是实现动态网页交互（如表单验证、内容更新、样式切换等）的基础。在实际开发中，结合 querySelector、classList、dataset 等特性，可以高效地操作 DOM 元素。
在 DOM 中，Attribute（属性）是指 HTML 元素标签上定义的键值对（如 <div class="box" id="container"> 中的 class 和 id）。这些属性用于描述元素的特征，JavaScript 可以通过 DOM API 访问、修改或移除它们。
Attribute 的核心特点
- 与 HTML 标签关联：属性是元素标签的一部分，在 HTML 源码中显式定义（如
href、src、class等）。 - 键值对结构：每个属性由名称（name）和值（value）组成，值通常为字符串类型。
- 区分于 Property：
Attribute是 HTML 标签上的属性（DOM 层面的属性节点）。Property是 DOM 元素对象的属性（JavaScript 对象的属性）。- 大部分情况下两者会同步（如
id属性会映射为元素的id属性），但部分属性存在差异（如input的value）。
常用的 Attribute 操作方法
Element 接口提供了一系列方法用于操作属性：
1. getAttribute(name)
- 功能：获取元素上指定属性的值。
- 示例：
html
<a href="https://example.com" title="示例链接">链接</a>javascript
const link = document.querySelector('a'); console.log(link.getAttribute('href')); // "https://example.com" console.log(link.getAttribute('title')); // "示例链接"
2. setAttribute(name, value)
- 功能：为元素设置属性（若属性已存在则更新值，否则新增属性）。
- 示例：
javascript
const img = document.createElement('img'); img.setAttribute('src', 'image.jpg'); // 设置 src 属性 img.setAttribute('alt', '示例图片'); // 设置 alt 属性 document.body.appendChild(img);
3. removeAttribute(name)
- 功能：移除元素上的指定属性。
- 示例：
javascript
const input = document.querySelector('input'); input.removeAttribute('required'); // 移除必填属性
4. hasAttribute(name)
- 功能：判断元素是否包含指定属性（返回布尔值）。
- 示例：
javascript
const button = document.querySelector('button'); if (button.hasAttribute('disabled')) {console.log('按钮已禁用'); }
5. attributes 属性
- 功能：返回元素所有属性的集合（
NamedNodeMap对象，类数组结构）。 - 示例：
html
<div id="box" class="active" data-id="123"></div>javascript
const div = document.getElementById('box'); const attrs = div.attributes;// 遍历所有属性 for (let i = 0; i < attrs.length; i++) {console.log(`属性名：${attrs[i].name}，属性值：${attrs[i].value}`); } // 输出： // 属性名：id，属性值：box // 属性名：class，属性值：active // 属性名：data-id，属性值：123
特殊属性的处理
布尔属性（如
disabled、checked、readonly）：- 存在即表示
true，无需显式赋值（如<button disabled>等价于disabled="disabled"）。 - 使用
setAttribute设置时，值设为属性名或空字符串即可激活：javascript
button.setAttribute('disabled', 'disabled'); // 禁用按钮 button.removeAttribute('disabled'); // 启用按钮
- 存在即表示
自定义数据属性（
data-*）：- 以
data-为前缀的属性（如data-user-id），用于存储自定义数据。 - 可通过
dataset属性更方便地访问（自动转换为驼峰命名）：html
<div data-product-id="456" data-product-name="手机"></div>javascript
const div = document.querySelector('div'); console.log(div.dataset.productId); // "456" console.log(div.dataset.productName); // "手机"// 设置自定义属性 div.dataset.productPrice = "3999"; // 等价于 data-product-price="3999"
- 以
Attribute 与 Property 的区别
| 维度 | Attribute（属性节点） | Property（DOM 对象属性） |
|---|---|---|
| 本质 | HTML 标签上的键值对，属于 DOM 节点 | JavaScript 对象的属性，属于元素对象 |
| 类型 | 值始终为字符串（或布尔属性的存在性） | 类型多样（字符串、布尔值、对象等） |
| 同步关系 | 部分属性会同步（如 id、class） | 部分属性会同步，但有例外 |
| 示例 | element.getAttribute('value') | element.value |
典型差异示例：
html
<input type="text" value="初始值">
javascript
const input = document.querySelector('input');// Attribute：始终返回 HTML 中定义的初始值
console.log(input.getAttribute('value')); // "初始值"// Property：返回当前输入的值（用户修改后会变化）
console.log(input.value); // 若用户输入"新值"，则返回"新值"
总结
Attribute是 HTML 标签上的属性，通过getAttribute、setAttribute等方法操作。- 区分
Attribute和Property有助于避免 DOM 操作中的混淆（尤其是表单元素）。 - 自定义数据建议使用
data-*属性，通过dataset访问更便捷。
在 DOM（文档对象模型）中，Node（节点）是构成文档的基本单位，整个 HTML/XML 文档被抽象为一个由节点组成的树形结构（DOM 树）。所有 DOM 元素、文本、注释等都以节点形式存在，并且遵循统一的接口规范。
Node 的核心概念
- DOM 树结构：文档的根节点是
document（文档节点），之下包含各种子节点（如<html>元素节点），每个节点又可以包含更多子节点，形成层级关系。 - 继承关系：
Node是所有节点类型的基类，其他节点（如元素、文本、注释等）都继承自Node接口，因此它们共享一套基本属性和方法。
Node 的类型
DOM 定义了多种节点类型，每种类型对应不同的内容，可通过 nodeType 属性区分：
| 节点类型 | nodeType 值 | 描述示例 |
|---|---|---|
| 文档节点（Document） | 9 | 整个文档的根节点（document） |
| 元素节点（Element） | 1 | HTML 标签（如 <div>、<p>） |
| 文本节点（Text） | 3 | 元素内的文本内容（如 Hello） |
| 注释节点（Comment） | 8 | HTML 注释（<!-- 注释内容 -->） |
| 属性节点（Attr） | 2 | 元素的属性（如 class="box"） |
示例：
html
<div id="app">Hello <!-- 这是注释 -->
</div>
对应的节点类型：
<div>是 元素节点（nodeType = 1）Hello是 文本节点（nodeType = 3）<!-- 这是注释 -->是 注释节点（nodeType = 8）id="app"是 属性节点（nodeType = 2）
Node 的常用属性
节点标识相关
nodeType：返回节点类型（整数，对应上表）。nodeName：返回节点名称（元素节点为标签名大写，文本节点为#text，注释节点为#comment）。nodeValue：返回或设置节点的值（文本节点为内容，注释节点为注释文本，元素节点为null）。
javascript
const div = document.querySelector('div'); const text = div.firstChild; // 假设是文本节点 const comment = div.childNodes[1]; // 假设是注释节点console.log(div.nodeType); // 1（元素节点） console.log(div.nodeName); // "DIV" console.log(div.nodeValue); // nullconsole.log(text.nodeType); // 3（文本节点） console.log(text.nodeName); // "#text" console.log(text.nodeValue); // "Hello "（文本内容）层级关系相关
parentNode：返回当前节点的父节点（可能是元素节点或文档节点）。childNodes：返回当前节点的所有子节点集合（NodeList，包括文本、注释等）。firstChild/lastChild：返回第一个 / 最后一个子节点。nextSibling/previousSibling：返回下一个 / 上一个兄弟节点（包括文本、注释等）。
javascript
const ul = document.querySelector('ul'); console.log(ul.parentNode); // ul 的父元素（如 body） console.log(ul.childNodes); // 所有子节点（可能包含 li、文本、注释等） console.log(ul.firstChild); // 第一个子节点
Node 的常用方法
节点操作
appendChild(child)：在当前节点的子节点列表末尾添加新节点，返回新增节点。insertBefore(newNode, referenceNode)：在指定子节点referenceNode之前插入新节点。removeChild(child)：移除并返回指定的子节点。replaceChild(newNode, oldNode)：用新节点替换旧节点，返回被替换的节点。
javascript
const ul = document.querySelector('ul'); const newLi = document.createElement('li'); newLi.textContent = '新列表项';// 添加到末尾 ul.appendChild(newLi);// 插入到第一个子节点前 const firstLi = ul.firstChild; ul.insertBefore(newLi, firstLi);节点复制
cloneNode(deep)：复制当前节点，deep为true时复制所有子节点，false时仅复制节点本身。
javascript
const div = document.querySelector('div'); const clone = div.cloneNode(true); // 深复制（包含子节点） document.body.appendChild(clone);节点包含关系
contains(otherNode)：判断当前节点是否包含另一个节点（返回布尔值）。isEqualNode(otherNode)：判断两个节点是否相等（结构和内容相同）。
javascript
const parent = document.querySelector('.parent'); const child = document.querySelector('.child'); console.log(parent.contains(child)); // true（如果 child 是 parent 的子节点）
Node 与 Element 的区别
Node是所有节点的基类，包含元素、文本、注释等多种类型。Element是Node的子类，仅代表 HTML 标签元素（nodeType = 1）。- 元素节点（
Element）有额外的特性（如tagName、className、getAttribute等），而其他节点类型（如文本、注释）没有。
javascript
const div = document.querySelector('div');
const text = div.firstChild;console.log(div instanceof Node); // true
console.log(div instanceof Element); // true（元素节点属于 Element）console.log(text instanceof Node); // true
console.log(text instanceof Element); // false（文本节点不属于 Element）
总结
Node是 DOM 树的基本单位，涵盖了文档中所有类型的内容（元素、文本、注释等）。- 不同类型的节点通过
nodeType区分，各自有不同的特性和用途。 - 掌握节点的属性和方法（如层级关系、增删改查）是操作 DOM 树的基础，也是实现动态网页交互的核心能力。
在实际开发中，最常用的是元素节点（Element）和文本节点（Text），需注意区分节点类型以避免操作错误（例如，childNodes 会包含空白文本节点，而 children 仅包含元素节点）。
在 DOM 中操作 CSS 是实现网页动态样式的核心手段，JavaScript 提供了多种方式来访问、修改元素的样式。以下是常见的 CSS 操作方法及场景：
1. 直接操作行内样式（element.style）
每个 DOM 元素都有 style 属性，它返回一个 CSSStyleDeclaration 对象，用于操作元素的行内样式（即 style 属性中定义的样式）。
特点：
- 优先级高（行内样式优先级高于外部样式表和内部样式）。
- 样式属性采用驼峰命名法（如
fontSize对应 CSS 中的font-size）。 - 只能操作行内样式，无法获取外部样式表中定义的样式。
常用操作：
javascript
const box = document.querySelector('.box');// 设置单个样式
box.style.color = 'red';
box.style.fontSize = '16px';
box.style.backgroundColor = '#f0f0f0'; // 对应 CSS 的 background-color// 设置多个样式
Object.assign(box.style, {width: '200px',height: '200px',border: '1px solid #ccc'
});// 获取样式值（仅能获取行内样式）
console.log(box.style.color); // "red"
console.log(box.style.fontSize); // "16px"// 移除样式（设为空字符串）
box.style.border = '';
2. 获取计算后样式（getComputedStyle()）
window.getComputedStyle(element) 方法返回元素的最终计算样式（包含行内样式、内部样式表、外部样式表等所有生效的样式）。
特点：
- 返回的是只读对象，无法直接修改（需通过
element.style修改）。 - 样式值已被浏览器解析为绝对值（如
em转为px，rgb可能转为hex）。 - 可获取所有生效样式，包括继承的样式（如
color、font-size）。
示例：
html
<style>.box {width: 100px;margin: 10px;}
</style>
<div class="box" style="height: 50px;"></div>
javascript
const box = document.querySelector('.box');
const computedStyle = getComputedStyle(box);// 获取计算后的样式（包含 CSS 定义和行内样式）
console.log(computedStyle.width); // "100px"（来自 CSS）
console.log(computedStyle.height); // "50px"（来自行内）
console.log(computedStyle.marginTop); // "10px"（解析后的绝对值）
console.log(computedStyle.color); // 可能是 "rgb(0, 0, 0)"（继承的默认值）
3. 操作类名（classList）
通过修改元素的类名（class 属性），间接应用预定义的 CSS 样式，是最推荐的样式操作方式之一。
特点：
- 符合 “样式与逻辑分离” 原则，便于维护。
- 可批量切换多个样式，性能更优。
classList对象提供了便捷的方法操作类名。
常用方法：
| 方法 | 说明 |
|---|---|
add(class1, class2) | 添加一个或多个类名（重复添加无效） |
remove(class1, class2) | 移除一个或多个类名 |
toggle(class, force) | 切换类名（存在则移除，不存在则添加）；force 为 true 时强制添加，false 时强制移除 |
contains(class) | 判断是否包含指定类名（返回布尔值） |
示例：
css
/* 预定义样式 */
.active {color: blue;border: 2px solid blue;
}
.hidden {display: none;
}
javascript
const btn = document.querySelector('button');// 添加类名
btn.classList.add('active');// 移除类名
btn.classList.remove('active');// 切换类名（点击按钮时切换激活状态）
btn.addEventListener('click', () => {btn.classList.toggle('active');
});// 判断是否包含类名
if (btn.classList.contains('hidden')) {console.log('按钮已隐藏');
}
4. 操作样式表（document.styleSheets）
通过 document.styleSheets 可以直接访问和修改页面中的样式表（包括 <style> 标签和外部 .css 文件）。
特点：
- 可批量修改样式规则，影响所有匹配的元素。
- 操作较复杂，适合全局样式调整。
示例：
html
<style>.box { width: 100px; }p { color: black; }
</style>
javascript
// 获取页面中所有样式表
const styleSheets = document.styleSheets;// 操作第一个样式表（<style> 标签）
const firstSheet = styleSheets[0];
const rules = firstSheet.cssRules || firstSheet.rules; // 兼容不同浏览器// 修改现有规则（将 p 标签颜色改为红色）
for (let i = 0; i < rules.length; i++) {if (rules[i].selectorText === 'p') {rules[i].style.color = 'red';break;}
}// 添加新规则（在样式表末尾添加 .new-class 样式）
firstSheet.insertRule('.new-class { font-weight: bold; }', rules.length);
5. 动态创建样式表
通过创建 <style> 标签并插入到文档中，动态添加新的样式规则。
示例：
javascript
// 创建 style 标签
const style = document.createElement('style');
style.textContent = `.dynamic {padding: 20px;background: yellow;}.dynamic:hover {background: orange;}
`;// 添加到 head 中生效
document.head.appendChild(style);// 应用样式
const div = document.createElement('div');
div.className = 'dynamic';
div.textContent = '动态样式';
document.body.appendChild(div);
最佳实践
- 优先使用
classList：通过切换类名控制样式，符合分离原则，易于维护。 - 行内样式（
style）：适合临时、简单的样式修改（如动画中的位置变化）。 - 计算样式（
getComputedStyle）：用于获取元素最终样式（如判断元素是否可见）。 - 避免频繁操作样式：多次样式修改会导致浏览器频繁重排（reflow）和重绘（repaint），可合并操作或使用
requestAnimationFrame优化。
例如，优化多次样式修改：
javascript
// 不佳：多次触发重排
box.style.width = '200px';
box.style.height = '200px';
box.style.margin = '10px';// 优化：合并操作（仅触发一次重排）
box.style.cssText = 'width: 200px; height: 200px; margin: 10px;';
通过合理选择 CSS 操作方式，可以高效实现动态样式效果，同时保证代码的可维护性和性能。