编辑“︁HTML内容操作”︁

= HTML内容操作 =

HTML内容操作是指通过JavaScript动态修改HTML文档的结构、文本或属性。这是现代Web开发的核心技术之一，使网页能够响应用户交互并实时更新内容。

== 基本概念 ==
HTML文档对象模型（DOM）将HTML文档表示为节点树，JavaScript可以通过DOM API访问和修改这些节点。主要操作类型包括：
* 元素选择（Selecting）
* 内容修改（Modifying）
* 属性操作（Attribute manipulation）
* 样式更改（Styling）
* 节点增删（Node addition/removal）

<mermaid>
graph TD
    A[HTML Document] --> B[DOM Tree]
    B --> C[Document Node]
    C --> D[Element Nodes]
    C --> E[Text Nodes]
    C --> F[Attribute Nodes]
</mermaid>

== 元素选择方法 ==
JavaScript提供了多种选择DOM元素的方式：

=== 传统方法 ===
<syntaxhighlight lang="javascript">
// 通过ID获取元素
let header = document.getElementById('header');

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

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

=== 现代选择器 ===
<syntaxhighlight lang="javascript">
// 查询单个元素
let item = document.querySelector('.item:first-child');

// 查询多个元素
let items = document.querySelectorAll('.item');
</syntaxhighlight>

== 内容修改 ==

=== 文本内容 ===
<syntaxhighlight lang="javascript">
// 获取元素
let demoDiv = document.getElementById('demo');

// 修改文本内容（转义HTML）
demoDiv.textContent = '新文本内容';

// 修改HTML内容（解析HTML标签）
demoDiv.innerHTML = '<strong>加粗文本</strong>';
</syntaxhighlight>

=== 属性操作 ===
<syntaxhighlight lang="javascript">
let image = document.querySelector('img');

// 获取属性
let src = image.getAttribute('src');

// 设置属性
image.setAttribute('alt', '描述文本');

// 直接属性访问
image.className = 'new-class';
image.id = 'main-image';
</syntaxhighlight>

== 样式操作 ==
JavaScript可以直接修改元素的样式：

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

// 单个样式修改
box.style.color = 'blue';
box.style.backgroundColor = '#f0f0f0';

// 批量样式修改
box.style.cssText = 'width: 100px; height: 100px; border: 1px solid black;';

// 类名操作
box.classList.add('active');
box.classList.remove('inactive');
box.classList.toggle('visible');
</syntaxhighlight>

== 节点操作 ==

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

// 创建文本节点
let newText = document.createTextNode('一些文本内容');
</syntaxhighlight>

=== 添加节点 ===
<syntaxhighlight lang="javascript">
// 追加到父元素末尾
document.body.appendChild(newDiv);

// 插入到特定位置
let container = document.getElementById('container');
let firstChild = container.firstChild;
container.insertBefore(newDiv, firstChild);
</syntaxhighlight>

=== 删除节点 ===
<syntaxhighlight lang="javascript">
// 移除特定节点
container.removeChild(firstChild);

// 现代方法
let element = document.getElementById('old-element');
element.remove();
</syntaxhighlight>

== 实际应用案例 ==

=== 动态列表 ===
创建一个可以添加项目的任务列表：

'''HTML'''
<syntaxhighlight lang="html">
<ul id="task-list"></ul>
<input type="text" id="task-input">
<button id="add-task">添加任务</button>
</syntaxhighlight>

'''JavaScript'''
<syntaxhighlight lang="javascript">
document.getElementById('add-task').addEventListener('click', function() {
    let input = document.getElementById('task-input');
    let taskText = input.value.trim();
    
    if (taskText) {
        let list = document.getElementById('task-list');
        let newItem = document.createElement('li');
        newItem.textContent = taskText;
        
        // 添加删除按钮
        let deleteBtn = document.createElement('button');
        deleteBtn.textContent = '删除';
        deleteBtn.onclick = function() {
            list.removeChild(newItem);
        };
        
        newItem.appendChild(deleteBtn);
        list.appendChild(newItem);
        input.value = '';
    }
});
</syntaxhighlight>

=== 实时预览 ===
实现一个Markdown实时预览器：

'''HTML'''
<syntaxhighlight lang="html">
<textarea id="markdown-input" rows="10"></textarea>
<div id="preview"></div>
</syntaxhighlight>

'''JavaScript'''
<syntaxhighlight lang="javascript">
document.getElementById('markdown-input').addEventListener('input', function(e) {
    let text = e.target.value;
    let preview = document.getElementById('preview');
    
    // 简单Markdown转换
    let html = text
        .replace(/^# (.*$)/gm, '<h1>$1</h1>')
        .replace(/^## (.*$)/gm, '<h2>$1</h2>')
        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
        .replace(/\*(.*?)\*/g, '<em>$1</em>');
    
    preview.innerHTML = html;
});
</syntaxhighlight>

== 性能考虑 ==
频繁的DOM操作会影响页面性能，最佳实践包括：
* 批量修改：使用文档片段(document.createDocumentFragment())
* 减少重排：先隐藏元素，修改后再显示
* 事件委托：利用事件冒泡减少事件监听器

== 数学表示 ==
DOM操作可以抽象为：
<math>
f(element, operation) \rightarrow element'
</math>
其中：
* <math>element</math> 是原始DOM元素
* <math>operation</math> 是要执行的操作
* <math>element'</math> 是修改后的元素

== 总结 ==
HTML内容操作是动态Web应用的基础，通过JavaScript可以：
* 选择页面上的任何元素
* 修改元素内容、属性和样式
* 动态添加或删除元素
* 响应用户交互实时更新界面

掌握这些技术后，开发者可以创建丰富交互体验的现代Web应用程序。

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