编辑“︁HTML DOM模型”︁（章节）

= HTML DOM模型 =

'''HTML DOM（文档对象模型）''' 是浏览器将HTML文档解析为树状结构的对象模型，允许开发者通过JavaScript动态访问和修改网页内容、结构和样式。DOM是HTML与JavaScript交互的核心机制，理解它是前端开发的基础。

== 概述 ==
DOM将HTML文档表示为一个由节点（Node）组成的树形结构，每个HTML元素、属性、文本都是一个节点。通过DOM，开发者可以：
* 动态修改HTML元素的内容、属性和样式
* 添加或删除HTML元素
* 响应用户交互事件
* 异步加载数据并更新页面

DOM标准由W3C制定，所有现代浏览器都实现了标准的DOM API。

== DOM树结构 ==
DOM树的基本结构如下：

<mermaid>
graph TD
    document[document] --> html[html]
    html --> head[head]
    html --> body[body]
    head --> title[title]
    body --> h1[h1]
    body --> p[p]
    p --> text[文本节点]
</mermaid>

* '''document'''：DOM树的根节点，代表整个HTML文档
* '''元素节点'''：如html、head、body、h1等HTML标签
* '''文本节点'''：包含在元素节点中的文本内容
* '''属性节点'''：元素的属性（如id、class等）

== 核心DOM接口 ==
=== 节点访问 ===
<syntaxhighlight lang="javascript">
// 通过id获取元素
let header = document.getElementById('header');

// 通过标签名获取元素集合
let paragraphs = document.getElementsByTagName('p');

// 通过类名获取元素集合
let items = document.getElementsByClassName('item');

// 使用CSS选择器（现代推荐方式）
let mainContent = document.querySelector('#main .content');
let allButtons = document.querySelectorAll('button');
</syntaxhighlight>

=== 节点操作 ===
<syntaxhighlight lang="javascript">
// 创建新元素
let newDiv = document.createElement('div');

// 添加文本内容
newDiv.textContent = '这是一个新创建的div';

// 设置属性
newDiv.setAttribute('id', 'new-div');

// 添加到DOM中
document.body.appendChild(newDiv);

// 删除节点
let oldElement = document.getElementById('old');
oldElement.parentNode.removeChild(oldElement);
</syntaxhighlight>

=== 事件处理 ===
<syntaxhighlight lang="javascript">
// 添加点击事件
document.getElementById('myButton').addEventListener('click', function() {
    alert('按钮被点击了!');
});

// 事件对象示例
document.querySelector('a').addEventListener('click', function(event) {
    event.preventDefault(); // 阻止默认行为（如链接跳转）
    console.log('链接被点击，但不会跳转');
});
</syntaxhighlight>

== DOM遍历 ==
DOM提供多种遍历节点的方法：

<syntaxhighlight lang="javascript">
let parent = document.getElementById('parent');
let firstChild = parent.firstChild;
let lastChild = parent.lastChild;
let children = parent.children; // 只包含元素节点

let element = document.querySelector('.target');
let nextSibling = element.nextElementSibling;
let previousSibling = element.previousElementSibling;
let parentNode = element.parentNode;
</syntaxhighlight>

== 样式操作 ==
通过DOM可以动态修改元素样式：

<syntaxhighlight lang="javascript">
let box = document.getElementById('box');

// 直接修改style属性
box.style.backgroundColor = 'blue';
box.style.width = '200px';

// 添加/移除类名
box.classList.add('highlight');
box.classList.remove('old-style');
box.classList.toggle('active'); // 切换类名

// 获取计算样式
let computedStyle = window.getComputedStyle(box);
console.log(computedStyle.width);
</syntaxhighlight>

== 性能优化建议 ==
1. '''减少DOM操作'''：DOM操作代价高昂，应批量处理
2. '''使用文档片段'''：临时修改不在DOM中的结构
   <syntaxhighlight lang="javascript">
   let fragment = document.createDocumentFragment();
   for(let i = 0; i < 100; i++) {
       let item = document.createElement('div');
       fragment.appendChild(item);
   }
   document.body.appendChild(fragment);
   </syntaxhighlight>
3. '''事件委托'''：利用事件冒泡处理多个元素的事件
   <syntaxhighlight lang="javascript">
   document.getElementById('list').addEventListener('click', function(event) {
       if(event.target.tagName === 'LI') {
           console.log('点击了列表项:', event.target.textContent);
       }
   });
   </syntaxhighlight>

== 实际应用案例 ==
=== 动态表单验证 ===
<syntaxhighlight lang="javascript">
document.getElementById('email').addEventListener('blur', function() {
    let email = this.value;
    let errorElement = document.getElementById('email-error');
    
    if(!email.includes('@')) {
        errorElement.textContent = '请输入有效的电子邮件地址';
        this.classList.add('error');
    } else {
        errorElement.textContent = '';
        this.classList.remove('error');
    }
});
</syntaxhighlight>

=== 无限滚动 ===
<syntaxhighlight lang="javascript">
window.addEventListener('scroll', function() {
    if((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 100) {
        loadMoreContent();
    }
});

function loadMoreContent() {
    // 异步加载更多内容并添加到DOM
}
</syntaxhighlight>

== 常见问题 ==
'''Q: DOM和HTML有什么区别？'''
A: HTML是静态标记语言，而DOM是浏览器将HTML解析后创建的可编程对象模型。

'''Q: innerHTML和textContent有什么区别？'''
A: innerHTML会解析HTML标签，而textContent会转义所有HTML标签作为纯文本显示。

'''Q: 为什么有时我的DOM修改没有立即生效？'''
A: 浏览器会优化DOM操作，有时需要强制重绘，可以通过访问offsetHeight等属性触发。

== 总结 ==
HTML DOM模型是Web开发的核心概念，它：
* 提供标准API操作网页内容
* 支持事件驱动编程
* 允许动态更新页面而不刷新
* 是现代单页应用(SPA)的基础

掌握DOM操作是成为前端开发者的必备技能，理解其原理和最佳实践能显著提升Web应用的性能和用户体验。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML与JavaScript交互]]