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

== 核心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>