DOM 解析学习笔记

DOM（Document Object Model）是文档对象模型的缩写，它是一种用于处理 XML 和 HTML 文档的标准化编程接口。DOM 将文档抽象成一组层次结构，从而方便程序对文档进行操作。

DOM 树

DOM 树是一个多层次的节点树，文档中的各个元素、属性、文本和注释都是这个树形结构中的节点。在 HTML 中，文档元素是最上层的节点，通常对应于 <html> 标签。下面是一个简单的 DOM 树的示例：

Copy Code
<html>
  <head>
    <title>DOM 树示例</title>
  </head>
  <body>
    <h1>DOM 树示例</h1>
    <p>这是一个 DOM 树的示例。</p>
  </body>
</html>

DOM API

DOM API 提供了一组方法和属性，可以帮助程序访问和操作 DOM 树中的节点。常用的方法包括：

document.getElementById(id)：根据 ID 查找元素节点。
element.getElementsByTagName(tagName)：根据标签名查找元素节点。
element.getAttribute(name)：获取元素节点的指定属性值。
element.setAttribute(name, value)：设置元素节点的指定属性值。
element.appendChild(newNode)：将新节点添加到指定元素的子节点列表中。

下面是一个使用 DOM API 操作 DOM 树的示例：

javascriptCopy Code
// 获取文档中的元素节点
let title = document.getElementsByTagName('title')[0];
let heading = document.getElementsByTagName('h1')[0];
let paragraph = document.getElementsByTagName('p')[0];

// 修改元素节点的内容
title.textContent = 'DOM 树示例 - 学习笔记';
heading.textContent = 'DOM 树示例 - 学习笔记';
paragraph.textContent = '这是一个 DOM 树的示例。';

// 添加新的元素节点
let newParagraph = document.createElement('p');
newParagraph.textContent = '这是一个新的段落。';
document.body.appendChild(newParagraph);

实例

下面是一个使用 DOM 解析实现简单计算器的示例：

htmlCopy Code
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算器</title>
</head>
<body>
  <input id="num1" type="text"> +
  <input id="num2" type="text"> =
  <span id="result"></span>
  <button onclick="calculate()">计算</button>
  
  <script>
    function calculate() {
      let num1 = parseInt(document.getElementById('num1').value);
      let num2 = parseInt(document.getElementById('num2').value);
      let result = num1 + num2;
      document.getElementById('result').textContent = result;
    }
  </script>
</body>
</html>

该计算器会读取两个文本框中的数值，计算它们的和，并在结果区域显示结果。