htmljs介绍

核心概念

HTML与JavaScript的关系
HTML（超文本标记语言）负责网页结构和内容，JavaScript（JS）负责交互逻辑与动态功能，两者结合实现动态网页效果，例如表单验证、内容更新、动画等。

关键术语

• DOM（文档对象模型）：将HTML页面映射为可编程的树形结构，JS通过操作DOM修改页面。
• BOM（浏览器对象模型）：提供浏览器窗口、导航、历史记录等对象的操作接口（如window.alert()）。
• 事件驱动：用户操作（点击、输入等）触发JS函数执行,实现交互逻辑。

基础语法与使用

脚本引入方式

变量与函数

• 变量声明

  let name = "Alice"; // 块级作用域
  const pi = 3.14;   // 不可修改
  var age = 25;      // 函数作用域（已过时）

• 函数定义

  function greet(msg) {
    console.log(msg);
  }
  const sum = (a, b) => a + b; // 箭头函数

DOM操作

获取元素

与样式

const title = document.getElementById("title");textContent = "新标题"; // 修改文本style.color = "red";    // 修改样式classList.add("highlight"); // 添加CSS类

创建与插入节点

const newDiv = document.createElement("div"); // 创建元素
newDiv.textContent = "动态内容";
document.body.appendChild(newDiv); // 追加到末尾

事件处理

事件监听

const btn = document.querySelector(".btn");
btn.addEventListener("click", function(event) {
  console.log("按钮被点击", event);
});

事件对象与冒泡

• 事件对象（Event）：包含事件类型、目标元素、坐标等信息。
• 事件冒泡：子元素事件会向上触发父元素事件。
• 阻止冒泡：event.stopPropagation()。

事件委托

通过父元素统一处理子元素的事件，减少绑定次数。

document.body.addEventListener("click", function(e) {
  if (e.target.classList.contains("item")) {
    console.log("Item clicked:", e.target.textContent);
  }
});

AJAX与异步请求

XMLHttpRequest（传统方式）

const xhr = new XMLHttpRequest();
xhr.open("GET", "/api/data");
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText); // 处理响应
  }
};
xhr.send();

Fetch API（现代方式）

fetch("/api/data")
  .then(response => response.json()) // 解析JSON
  .then(data => console.log(data))
  .catch(error => console.error(error));

常见问题与工具

严格模式

在JS文件开头添加"use strict";,避免意外全局变量和不安全操作。

调试工具

• 浏览器开发者工具：查看控制台日志、断点调试、网络请求监控。
• Console.log()：输出调试信息到控制台。

相关问题与解答

问题1：如何动态创建一个按钮并绑定点击事件？

解答：

const btn = document.createElement("button");
btn.textContent = "点击我";
btn.style.backgroundColor = "blue";
btn.addEventListener("click", () => alert("按钮被点击！"));
document.body.appendChild(btn);

问题2：什么是事件委托？为什么需要它？

解答：
事件委托是将事件监听器绑定到父元素，而非每个子元素，在列表中只需给<ul>绑定一次点击事件，通过判断事件目标（event.target）是否为<li>来处理具体逻辑。
优势：

1. 减少内存占用（无需为每个子元素绑定事件）。
2. 动态新增的子元素自动支持事件（无需重新