JavaScript基础
DOM操作基础
重要程度：10 分
<div>
<h2>DOM操作基础</h2>
<p>DOM (Document Object Model) 是一种编程接口，用于表示和修改 HTML 或 XML 文档。</p>
<h3>1. 获取元素</h3>
<ul>
<li><code>document.getElementById('id')</code>：通过ID获取元素。</li>
<li><code>document.getElementsByClassName('class')</code>：通过类名获取元素。</li>
<li><code>document.getElementsByTagName('tag')</code>：通过标签名获取元素。</li>
</ul>
<h3>2. 修改元素内容</h3>
<ul>
<li><code>element.innerHTML = '新的内容'</code>：修改元素的HTML内容。</li>
<li><code>element.innerText = '新的文本内容'</code>：修改元素的纯文本内容。</li>
</ul>
<h3>3. 添加和删除元素</h3>
<ul>
<li><code>element.appendChild(newElement)</code>：在元素末尾添加新元素。</li>
<li><code>element.removeChild(elementToRemove)</code>：从父元素中移除子元素。</li>
</ul>
<h3>4. 属性操作</h3>
<ul>
<li><code>element.setAttribute('attr', 'value')</code>：设置或更新元素属性。</li>
<li><code>element.getAttribute('attr')</code>：获取元素属性值。</li>
<li><code>element.removeAttribute('attr')</code>：移除元素属性。</li>
</ul>
<h3>5. 事件处理</h3>
<ul>
<li><code>element.addEventListener('event', function)</code>：为元素添加事件监听器。</li>
<li><code>element.onclick = function()</code>：直接绑定事件处理器。</li>
</ul>
</div>
<div>
<h2>例题</h2>
<h3>例题1: 获取并修改元素内容</h3>
<pre>
<script>
// 获取元素
var paragraph = document.getElementById('myParagraph');
// 修改内容
paragraph.innerHTML = '新的段落内容';
// 修改纯文本内容
paragraph.innerText = '这是纯文本内容';
</script>
<p id="myParagraph">原始段落内容</p>
</pre>
<h3>例题2: 添加和删除元素</h3>
<pre>
<script>
// 创建新元素
var newDiv = document.createElement('div');
newDiv.innerText = '这是一个新创建的div';
// 添加到body中
document.body.appendChild(newDiv);
// 移除新元素
document.body.removeChild(newDiv);
</script>
</pre>
<h3>例题3: 属性操作</h3>
<pre>
<script>
// 获取元素
var link = document.getElementById('myLink');
// 设置属性
link.setAttribute('href', 'https://www.example.com');
// 获取属性
console.log(link.getAttribute('href'));
// 移除属性
link.removeAttribute('href');
</script>
<a id="myLink" href="https://www.example.com">链接</a>
</pre>
<h3>例题4: 事件处理</h3>
<pre>
<script>
// 获取按钮
var button = document.getElementById('myButton');
// 添加事件监听器
button.addEventListener('click', function() {
alert('按钮被点击了！');
});
// 直接绑定事件处理器
button.onclick = function() {
alert('直接绑定事件处理器');
};
</script>
<button id="myButton">点击我</button>
</pre>
</div>