元素选择
1. 通过ID获取元素并修改内容：
<div id="myElement">原始内容</div>
<script>
var element = document.getElementById('myElement');
element.innerHTML = '新的内容';
</script>
2. 通过标签名获取元素并修改内容：
<p>第一个段落</p>
<p>第二个段落</p>
<script>
var paragraphs = document.getElementsByTagName('p');
paragraphs[0].innerHTML = '修改后的内容';
</script>
3. 通过类名获取元素并修改内容：
<div class="myClass">原始内容</div>
<script>
var elements = document.getElementsByClassName('myClass');
elements[0].innerHTML = '新的内容';
</script>
属性操作
4. 修改元素属性：
<img id="myImage" src="old.jpg" alt="旧图片">
<script>
var image = document.getElementById('myImage');
image.src = 'new.jpg';
image.alt = '新图片';
</script>
5. 添加和移除元素类名：
<div id="myDiv" class="firstClass">一个div</div>
<script>
var myDiv = document.getElementById('myDiv');
myDiv.classList.add('secondClass'); // 添加类名
myDiv.classList.remove('firstClass'); // 移除类名
</script>
事件处理
6. 点击按钮触发事件：
<button id="myButton">点击我</button>
<script>
var button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('按钮被点击了！');
});
</script>
7. 鼠标悬停显示提示：
<div id="hoverDiv">悬停在我上面</div>
<script>
var hoverDiv = document.getElementById('hoverDiv');
hoverDiv.addEventListener('mouseover', function() {
alert('鼠标悬停在div上！');
});
</script>
动态创建元素
8. 动态创建新元素并插入文档：
<div id="parentElement">父元素</div>
<script>
var parentElement = document.getElementById('parentElement');
var newElement = document.createElement('p');
newElement.innerHTML = '新的段落';
parentElement.appendChild(newElement);
</script>
9. 替换已有元素：
<div id="oldElement">旧的元素</div>
<script>
var oldElement = document.getElementById('oldElement');
var newElement = document.createElement('p');
newElement.innerHTML = '新的内容';
oldElement.parentNode.replaceChild(newElement, oldElement);
</script>
这些例子只是HTML DOM操作的冰山一角，更多复杂的应用需要结合实际情况进行学习和应用。
转载请注明出处：http://www.zyzy.cn/article/detail/4357/HTML