JavaScript之DOM操作网页的＂遥控器＂

各位未来的网页魔术师们，欢迎来到DOM的奇妙世界！DOM就像网页的遥控器，掌握了它，你就能让网页跳舞、变色、甚至大变活人！让我们开始学习如何操控这个神奇的"遥控器"吧。

10.1 DOM树介绍 - 网页的"家族族谱"

DOM是什么？

文档对象模型(Document Object Model)
将HTML文档表示为树形结构
每个标签都是树上的一个节点

<!DOCTYPE html>
<html>
<head>
  <title>家族树</title>
</head>
<body>
  <div id="app">
    <h1>家谱</h1>
    <ul>
      <li>爷爷</li>
      <li>爸爸</li>
    </ul>
  </div>
</body>
</html>

对应的DOM树：

document
└── html
    ├── head
    │   └── title
    └── body
        └── div#app
            ├── h1
            └── ul
                ├── li
                └── li

10.2 节点选择与遍历 - DOM的"寻人启事"

选择元素的各种方式：

// 老式选择器
let byId = document.getElementById("app");
let byTag = document.getElementsByTagName("li");
let byClass = document.getElementsByClassName("item");

// 现代选择器（更强大！）
let single = document.querySelector("#app h1"); // 选择第一个匹配元素
let all = document.querySelectorAll("ul li");   // 选择所有匹配元素

遍历DOM树：

let ul = document.querySelector("ul");

// 父子关系
console.log(ul.parentNode);       // div#app
console.log(ul.children);         // 所有li元素
console.log(ul.firstElementChild); // 第一个li
console.log(ul.lastElementChild);  // 最后一个li

// 兄弟关系
let firstLi = ul.children[0];
console.log(firstLi.nextElementSibling); // 下一个li
console.log(firstLi.previousElementSibling); // null（因为是第一个）

实战技巧 - 表格行变色：

let rows = document.querySelectorAll("tr");
rows.forEach((row, index) => {
  if (index % 2 === 0) {
    row.style.backgroundColor = "#f2f2f2";
  }
});

10.3 元素创建与修改 - DOM的"捏脸术"

创建新元素：

// 创建一个新的li元素
let newLi = document.createElement("li");
newLi.textContent = "我是新来的";
newLi.classList.add("new"); // 添加CSS类
newLi.style.color = "blue"; // 添加行内样式

// 添加到DOM中
let ul = document.querySelector("ul");
ul.appendChild(newLi);      // 添加到末尾
// ul.prepend(newLi);       // 添加到开头
// ul.insertBefore(newLi, ul.children[1]); // 插入到指定位置

修改元素：

let h1 = document.querySelector("h1");

// 修改内容
h1.innerHTML = "新标题 <small>副标题</small>"; // 可以解析HTML
h1.textContent = "纯文本内容"; // 只作为文本处理

// 修改属性
h1.setAttribute("title", "鼠标悬停提示");
let title = h1.getAttribute("title");
h1.removeAttribute("title");

// 修改样式
h1.style.color = "red";
h1.style.fontSize = "24px";

生活小例子 - 动态购物清单：

function addItem() {
  let input = document.querySelector("#itemInput");
  let list = document.querySelector("#shoppingList");
  
  if (input.value) {
    let newItem = document.createElement("li");
    newItem.textContent = input.value;
    newItem.onclick = function() {
      this.remove(); // 点击删除项目
    };
    list.appendChild(newItem);
    input.value = ""; // 清空输入框
  }
}

10.4 事件处理 - 给网页装上"耳朵"

基本事件绑定：

let btn = document.querySelector("#myButton");

// 方式1：属性绑定（不推荐）
// <button onclick="handleClick()">

// 方式2：DOM属性
btn.onclick = function() {
  console.log("第一次点击");
};
btn.onclick = function() {
  console.log("第二次点击会覆盖第一次！");
};

// 方式3：addEventListener（推荐！）
btn.addEventListener("click", () => {
  console.log("点击1");
});
btn.addEventListener("click", () => {
  console.log("点击2"); // 不会覆盖前一个
});

常用事件类型：

// 鼠标事件
element.addEventListener("click", handleClick);
element.addEventListener("dblclick", handleDoubleClick);
element.addEventListener("mouseenter", handleMouseEnter);
element.addEventListener("mouseleave", handleMouseLeave);

// 键盘事件
document.addEventListener("keydown", handleKeyDown);

// 表单事件
form.addEventListener("submit", handleSubmit);
input.addEventListener("focus", handleFocus);
input.addEventListener("blur", handleBlur);
input.addEventListener("change", handleChange);

事件对象：

document.addEventListener("click", (event) => {
  console.log(`点击位置：${event.clientX}, ${event.clientY}`);
  console.log("点击的元素：", event.target);
  event.preventDefault(); // 阻止默认行为
  event.stopPropagation(); // 阻止事件冒泡
});

实战例子 - 拖拽小方块：

let box = document.querySelector("#dragBox");
let isDragging = false;

box.addEventListener("mousedown", () => {
  isDragging = true;
});

document.addEventListener("mousemove", (e) => {
  if (isDragging) {
    box.style.left = e.clientX + "px";
    box.style.top = e.clientY + "px";
  }
});

document.addEventListener("mouseup", () => {
  isDragging = false;
});

10.5 表单操作 - 网页的"信息收集站"

获取表单数据：

let form = document.querySelector("#myForm");

form.addEventListener("submit", (e) => {
  e.preventDefault(); // 阻止表单默认提交
  
  // 方式1：逐个获取
  let username = form.elements.username.value;
  
  // 方式2：FormData对象
  let formData = new FormData(form);
  console.log(formData.get("username"));
  console.log(formData.get("password"));
  
  // 发送数据到服务器...
});

表单验证：

let emailInput = document.querySelector("#email");

emailInput.addEventListener("blur", () => {
  let email = emailInput.value;
  let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  
  if (!regex.test(email)) {
    emailInput.style.borderColor = "red";
    showError("请输入有效的邮箱地址");
  } else {
    emailInput.style.borderColor = "green";
  }
});

动态表单操作：

// 添加新输入框
function addInput() {
  let container = document.querySelector("#inputs-container");
  let newInput = document.createElement("input");
  newInput.type = "text";
  newInput.name = "dynamicInput";
  container.appendChild(newInput);
}

// 单选/复选框处理
let radios = document.querySelectorAll('input[name="gender"]');
radios.forEach(radio => {
  radio.addEventListener("change", () => {
    if (radio.checked) {
      console.log(`选择了: ${radio.value}`);
    }
  });
});

本章总结：

DOM是网页的树形表示
可以通过多种方式选择和遍历节点
能动态创建和修改页面元素
事件处理让页面具有交互性
表单是与用户交互的重要方式

实战练习：

创建一个动态TODO列表，可以添加和删除项目
实现一个简单的图片轮播组件
制作一个颜色选择器，实时改变页面背景色

生活剧场：

// 简易聊天室界面
function sendMessage() {
  let input = document.querySelector("#messageInput");
  let chat = document.querySelector("#chatBox");
  
  if (input.value.trim()) {
    let messageDiv = document.createElement("div");
    messageDiv.className = "message";
    messageDiv.textContent = input.value;
    
    // 点击消息可删除
    messageDiv.onclick = function() {
      this.remove();
    };
    
    chat.appendChild(messageDiv);
    input.value = "";
    chat.scrollTop = chat.scrollHeight; // 滚动到底部
  }
}

// 按Enter键发送
document.querySelector("#messageInput").addEventListener("keypress", (e) => {
  if (e.key === "Enter") {
    sendMessage();
  }
});

喔唷网 - 网络从业者技术信息综合门户!

JavaScript之DOM操作网页的＂遥控器＂

10.1 DOM树介绍 - 网页的"家族族谱"

10.2 节点选择与遍历 - DOM的"寻人启事"

选择元素的各种方式：

遍历DOM树：

10.3 元素创建与修改 - DOM的"捏脸术"

创建新元素：

修改元素：

10.4 事件处理 - 给网页装上"耳朵"

基本事件绑定：

常用事件类型：

事件对象：

10.5 表单操作 - 网页的"信息收集站"

获取表单数据：

表单验证：

动态表单操作：

栏目列表

热点推荐

栏目推荐

猜你喜欢

喔唷网 - 网络从业者技术信息综合门户!

JavaScript之DOM操作 网页的＂遥控器＂

10.1 DOM树介绍 - 网页的"家族族谱"

10.2 节点选择与遍历 - DOM的"寻人启事"

选择元素的各种方式：

遍历DOM树：

10.3 元素创建与修改 - DOM的"捏脸术"

创建新元素：

修改元素：

10.4 事件处理 - 给网页装上"耳朵"

基本事件绑定：

常用事件类型：

事件对象：

10.5 表单操作 - 网页的"信息收集站"

获取表单数据：

表单验证：

动态表单操作：

栏目列表

关联类容

热点推荐

栏目推荐

猜你喜欢

JavaScript之DOM操作网页的＂遥控器＂