以下是以资深软件开发工程师的视角，对“JavaScript 和 HTML DOM 参考手册”的专业回答。我将提供一个简明扼要的手册，总结 JavaScript 核心特性和 HTML DOM 操作的关键方法与属性，结合清晰的结构，包含目录、小标题、表格、代码示例和内部链接，确保内容技术准确、逻辑清晰且易于查阅。回答基于截至 2025 年 3 月 17 日的最新 JavaScript 标准（ES2023+）和现代浏览器 DOM API。

JavaScript 和 HTML DOM 参考手册

目录

  1. 引言
  2. JavaScript 核心参考
  1. HTML DOM 参考
  1. 快速示例
  1. 资源与注意事项

1. 引言

本手册总结了 JavaScript 的核心功能和 HTML DOM 的常用操作，旨在为开发者提供快速参考。JavaScript 用于逻辑控制，DOM 用于操作网页结构，二者结合实现动态交互。

2. JavaScript 核心参考

2.1 数据类型

类型示例说明
Number42, 3.14数字
String'hello'字符串
Booleantrue, false布尔值
Object{ key: 'value' }对象
Array[1, 2, 3]数组
Nullnull空值
Undefinedundefined未定义
SymbolSymbol('id')唯一标识（ES6）

2.2 常用内置对象

对象方法/属性示例说明
Arraypush(), map(), filter()数组操作
Stringslice(), toLowerCase()字符串处理
Objectkeys(), assign()对象操作
Mathrandom(), floor()数学计算
DategetTime(), toLocaleString()日期时间
  • 示例：
const arr = [1, 2, 3];
console.log(arr.map(x => x * 2)); // [2, 4, 6]

2.3 函数与异步

  • 函数：
  • 普通函数：function fn() {}
  • 箭头函数：x => x * 2
  • 异步：
  • setTimeout(callback, ms)
  • Promise: new Promise((resolve, reject) => {})
  • async/await: async function fn() { await ... }
  • 示例：
async function delay() {
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log('1秒后');
}
delay();

3. HTML DOM 参考

3.1 DOM 节点操作

方法/属性说明示例
createElement()创建元素document.createElement('div')
appendChild()添加子节点parent.appendChild(child)
removeChild()删除子节点parent.removeChild(child)
parentNode获取父节点element.parentNode
childNodes获取子节点列表element.childNodes

3.2 元素选择与属性

方法/属性说明示例
getElementById()通过 ID 选择元素document.getElementById('id')
querySelector()CSS 选择器选择第一个元素document.querySelector('.class')
querySelectorAll()选择所有匹配元素document.querySelectorAll('p')
innerHTML获取/设置 HTML 内容element.innerHTML = '<p>Hi</p>'
getAttribute()获取属性值element.getAttribute('data-id')
setAttribute()设置属性值element.setAttribute('class', 'new')

3.3 事件处理

方法/属性说明示例
addEventListener()添加事件监听element.addEventListener('click', fn)
removeEventListener()移除事件监听element.removeEventListener('click', fn)
onclick直接绑定点击事件element.onclick = () => alert('Hi')
event.target获取事件目标event.target.value
  • 常用事件：click, change, mouseover, keydown。

4. 快速示例

4.1 JavaScript 示例

// 数据处理
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8]

// 异步操作
async function fetchData() {
  const data = await new Promise(res => setTimeout(() => res('Done'), 1000));
  console.log(data); // "Done"
}
fetchData();

4.2 DOM 操作示例

<!DOCTYPE html>
<html>
<head>
  <title>DOM 示例</title>
</head>
<body>
  <div id="container"></div>
  <button id="btn">点击</button>
  <script>
    // 创建元素
    const div = document.createElement('div');
    div.innerHTML = 'Hello, World!';
    document.getElementById('container').appendChild(div);

    // 事件监听
    const btn = document.getElementById('btn');
    btn.addEventListener('click', () => {
      div.style.color = 'blue';
      console.log('按钮被点击');
    });
  </script>
</body>
</html>
  • 效果：点击按钮后，文本变蓝并输出日志。

5. 资源与注意事项

  • 资源：
  • MDN JavaScript 文档
  • MDN DOM 文档
  • 注意事项：
  • 性能：避免频繁操作 DOM，使用批量更新。
  • 兼容性：测试老浏览器对新 API 的支持。
  • 安全性：避免直接使用 innerHTML 处理用户输入，防止 XSS。
  • 调试：使用 console.log() 和浏览器开发者工具。

手册特点

  • 结构：包含目录、带锚点的小标题、表格，逻辑清晰。
  • 简洁性：重点突出，快速查阅。
  • 实用性：涵盖 JavaScript 和 DOM 核心操作，附带示例。
  • 内部链接：通过 <a href="#ID"> 跳转，如 HTML DOM 参考。
  • 出站链接：嵌入正文，指向权威资源。