如何使用 JavaScript 操作 DOM？

JavaScript 提供了多种方法来操作 DOM（文档对象模型）。以下是一些基本的示例和解释：

获取元素
你可以使用 document.getElementById(), document.getElementsByClassName(), document.getElementsByTagName(), document.querySelector(), document.querySelectorAll() 等方法来获取 DOM 元素。

javascript
let elementById = document.getElementById('myId');
let elementsByClassName = document.getElementsByClassName('myClass');
let elementsByTagName = document.getElementsByTagName('p');
let elementByQuery = document.querySelector('.myClass');
let elementsByQueryAll = document.querySelectorAll('.myClass');
修改元素内容
你可以使用 innerHTML, innerText 或 textContent 属性来修改元素的内容。

javascript
elementById.innerHTML = '

新的 HTML 内容

javascript
elementById.setAttribute('class', 'newClass');
elementById.src = 'newImage.jpg';
添加和删除元素
你可以使用 appendChild(), insertBefore(), removeChild() 等方法来添加和删除元素。

javascript
let newElement = document.createElement('p');
newElement.textContent = '新的段落';
elementById.appendChild(newElement);

elementById.removeChild(newElement);
修改元素样式
你可以通过修改元素的 style 属性来修改其样式。

javascript
elementById.style.color = 'red';
elementById.style.fontSize = '20px';
监听事件
你可以使用 addEventListener() 方法来监听元素的事件，如点击、鼠标移动等。

javascript
elementById.addEventListener('click', function() {
alert('你点击了元素！');
});
以上只是 JavaScript 操作 DOM 的基本方法，实际上还有更多的方法和属性可以用来更深入地操作 DOM。在使用这些方法和属性时，需要注意它们的兼容性和性能影响，以确保你的代码能在各种环境中正常运行，并且不会对性能造成过大的影响。