HTML DOM 总结学习笔记

在 HTML 页面中，DOM（文档对象模型）是一种将 HTML 文档表现为树形结构的方式。使用 DOM，可以通过 JavaScript 对 HTML 页面上的所有元素进行访问、操作和更新。

DOM 树结构

DOM 树是页面元素的层次结构，每个元素都可以作为一个节点。在 DOM 树中，节点之间有父子、兄弟关系。

例如：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
  <title>DOM 学习笔记</title>
</head>
<body>
  <h1>HTML DOM 学习笔记</h1>
  <div>
    <p>这是一个段落。</p>
  </div>
</body>
</html>

该 HTML 代码片段生成的 DOM 树如下：

DOM 树结构示意图

访问 DOM 元素

可以使用 JavaScript 访问任何一个 DOM 元素，例如：

javascriptCopy Code
// 获取文档标题
const title = document.title;

// 获取 h1 元素
const h1 = document.getElementsByTagName('h1')[0];

// 获取段落元素
const paragraph = document.querySelector('p');

操作 DOM 元素

可以使用 JavaScript 操作 DOM 元素，例如：

javascriptCopy Code
// 修改文档标题
document.title = '新的标题';

// 修改 h1 元素内容
h1.textContent = 'HTML DOM 学习笔记';

// 修改段落元素样式
paragraph.style.color = 'red';

实例

下面是一个简单的实例，展示如何使用 JavaScript 动态添加元素到网页中：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
  <title>DOM 学习笔记</title>
</head>
<body>
  <h1 id="title">HTML DOM 学习笔记</h1>
  <button onclick="addParagraph()">添加段落</button>

  <script>
    function addParagraph() {
      const body = document.querySelector('body');
      const p = document.createElement('p');
      p.textContent = '这是一个新段落。';
      body.appendChild(p);
    }
  </script>
</body>
</html>

点击“添加段落”按钮，就可以在页面上动态添加一个新的段落元素。