让您轻松驾驭JavaScript DOM操作的万能指南

前端

2023-09-23 03:21:22

前言：认识DOM

DOM （文档对象模型）是表示HTML和XML文档的一种标准树结构。它允许程序和脚本访问、修改和创建这些文档。有了DOM，我们就可以动态地改变网页的内容和样式，实现更加丰富的交互效果。

一、DOM API的魅力

DOM API提供了丰富的接口，可以让我们轻松地操作DOM元素。这些接口分为以下几类：

1. 节点接口

节点接口是DOM中最基础的接口，它定义了DOM中所有节点共有的属性和方法。包括：

nodeType：节点的类型，如元素节点、文本节点等。
nodeName：节点的名称，如<div>、<p>等。
nodeValue：节点的值，如文本节点的文本内容。
parentNode：节点的父节点。
childNodes：节点的子节点列表。

2. 元素接口

元素接口是节点接口的子接口，它定义了元素节点独有的属性和方法。包括：

tagName：元素的标签名，如<div>、<p>等。
attributes：元素的属性列表。
classList：元素的类名列表。
style：元素的样式属性。

3. 文档接口

文档接口是DOM的根接口，它代表整个文档。包括：

documentElement：文档的根元素。
body：文档的body元素。
head：文档的head元素。
title：文档的标题。
URL：文档的URL。

二、JavaScript DOM操作案例

下面通过几个案例来展示如何使用JavaScript DOM API操作网页元素。

1. 获取元素

我们可以通过以下方式获取元素：

document.getElementById()：通过ID获取元素。
document.getElementsByTagName()：通过标签名获取元素列表。
document.getElementsByClassName()：通过类名获取元素列表。
document.querySelector()：通过CSS选择器获取元素。
document.querySelectorAll()：通过CSS选择器获取元素列表。

2. 修改元素

我们可以通过以下方式修改元素：

element.innerHTML：设置元素的HTML内容。
element.innerText：设置元素的文本内容。
element.style：设置元素的样式。
element.setAttribute()：设置元素的属性。
element.removeAttribute()：移除元素的属性。

3. 创建元素

我们可以通过以下方式创建元素：

document.createElement()：创建一个元素。
element.appendChild()：向元素添加子元素。
element.insertBefore()：在元素之前插入子元素。
element.removeChild()：从元素中移除子元素。

4. 事件处理

我们可以通过以下方式为元素添加事件处理函数：

element.addEventListener()：添加事件处理函数。
element.removeEventListener()：移除事件处理函数。

三、实战演练

现在，我们通过一个实战案例来巩固对JavaScript DOM操作的理解。

假设我们要创建一个简单的计算器程序，它可以实现基本的加、减、乘、除运算。

1. HTML代码

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <input type="number" id="num1">
  <input type="number" id="num2">
  <select id="operator">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>
  <button id="calculate">计算</button>
  <p id="result"></p>
</body>
</html>

2. JavaScript代码

const num1 = document.getElementById('num1');
const num2 = document.getElementById('num2');
const operator = document.getElementById('operator');
const result = document.getElementById('result');

const calculate = () => {
  const n1 = Number(num1.value);
  const n2 = Number(num2.value);
  const op = operator.value;

  let res;
  switch (op) {
    case '+':
      res = n1 + n2;
      break;
    case '-':
      res = n1 - n2;
      break;
    case '*':
      res = n1 * n2;
      break;
    case '/':
      res = n1 / n2;
      break;
  }

  result.innerHTML = res;
};

document.getElementById('calculate').addEventListener('click', calculate);