编辑“︁JavaScript DOM测试”︁（章节）

== 基本DOM操作与测试 ==

以下是常见的DOM操作及其测试方法：

=== 1. 获取元素 ===

通过`document.getElementById`、`document.querySelector`等方法获取DOM元素。

<syntaxhighlight lang="javascript">
// 获取ID为"myButton"的按钮元素
const button = document.getElementById('myButton');

// 测试元素是否存在
if (button) {
    console.log('按钮元素存在');
} else {
    console.error('按钮元素不存在');
}
</syntaxhighlight>

'''输出：'''
如果页面中存在ID为`myButton`的元素，控制台会输出：
<pre>按钮元素存在</pre>
否则输出：
<pre>按钮元素不存在</pre>

=== 2. 修改元素内容 ===

通过`textContent`或`innerHTML`属性修改元素内容。

<syntaxhighlight lang="javascript">
// 获取ID为"output"的元素并修改其内容
const outputElement = document.getElementById('output');
outputElement.textContent = 'Hello, DOM!';

// 测试内容是否修改成功
if (outputElement.textContent === 'Hello, DOM!') {
    console.log('内容修改成功');
} else {
    console.error('内容修改失败');
}
</syntaxhighlight>

'''输出：'''
如果内容修改成功，控制台会输出：
<pre>内容修改成功</pre>

=== 3. 事件监听与触发 ===

通过`addEventListener`添加事件监听器，并测试事件是否被正确触发。

<syntaxhighlight lang="javascript">
// 获取按钮元素
const button = document.getElementById('myButton');

// 添加点击事件监听器
button.addEventListener('click', () => {
    console.log('按钮被点击');
});

// 模拟点击事件（测试）
button.click();
</syntaxhighlight>

'''输出：'''
如果事件监听器正常工作，控制台会输出：
<pre>按钮被点击</pre>