JavaScript基础教程（六十一）HTML DOM简介：指尖上的交响乐，深度解析JavaScript HTML DOM-优快云博客

一、什么是HTML DOM？

DOM（文档对象模型）是浏览器将HTML文档解析成的树状结构，每个标签、属性和文本都是树的节点。JavaScript通过这套标准化接口能够：

动态改变页面内容
更新样式与布局
响应用户交互事件
创建自定义行为

二、DOM核心概念解析

1. 节点类型

元素节点   // HTML标签（如<div>）
属性节点   // 元素属性（如class="title"）
文本节点   // 元素内的文本内容
注释节点   // 注释信息

2. 节点访问方法

// 经典选择方法
document.getElementById('header')
document.getElementsByClassName('item')
document.querySelector('#main .content')  // 返回第一个匹配元素
document.querySelectorAll('button')       // 返回所有匹配元素

三、实战示例：动态列表操作

<ul id="taskList">
  <li>学习DOM基础</li>
</ul>

<input type="text" id="newTask">
<button onclick="addTask()">添加任务</button>

<script>
function addTask() {
  const input = document.getElementById('newTask');
  const list = document.getElementById('taskList');
  
  if(input.value) {
    const newItem = document.createElement('li');
    newItem.textContent = input.value;
    newItem.onclick = function() {
      this.classList.toggle('completed');
    };
    list.appendChild(newItem);
    input.value = '';
  }
}
</script>