JavaScript 中如何使用 DOM

在 JavaScript 开发中，文档对象模型（DOM）是一个至关重要的概念。DOM 将网页呈现为一个由节点和对象组成的树形结构，这使得 JavaScript 能够动态地访问、操作和修改网页的内容、结构和样式。

了解如何获取 DOM 元素是使用 DOM 的基础。JavaScript 提供了多种获取元素的方法。例如，使用 document.getElementById() 方法可以通过元素的 id 属性来获取特定的元素。若 HTML 中有一个 <div id="myDiv">，在 JavaScript 中通过 let myDiv = document.getElementById('myDiv'); 就能获取到这个 div 元素。另外，document.getElementsByTagName() 方法能根据标签名获取元素集合，返回一个类似数组的对象。而 document.getElementsByClassName() 则是通过类名来获取元素集合。

获取到元素后，就可以对其进行各种操作。修改元素的内容是常见的操作之一。对于 HTML 元素内的文本内容，可以使用 element.textContent 属性来设置或获取。比如 myDiv.textContent = "新的文本内容";，这会将 myDiv 中的文本替换为指定内容。若想修改元素的 HTML 结构，则可以使用 element.innerHTML 属性，如 myDiv.innerHTML = "<p>新的 HTML 内容</p>";。

样式的动态修改也是 DOM 操作的重要应用。可以通过元素的 style 属性来直接修改样式。例如 myDiv.style.color = "red"; 会将 myDiv 内文本的颜色设置为红色。还能通过添加或移除类名来改变元素的样式，使用 element.classList.add('className') 来添加类名，element.classList.remove('className') 移除类名。

DOM 操作还包括元素的添加与删除。创建新元素可以使用 document.createElement('tagName')，如 let newPara = document.createElement('p');。将新元素添加到页面中，可以使用 parentElement.appendChild(newElement) 方法。删除元素时，先获取父元素，然后使用 parentElement.removeChild(childElement) 方法。

掌握 JavaScript 中 DOM 的使用，能够极大地增强网页的交互性和动态性，为用户带来更丰富的体验。无论是简单的文本更新，还是复杂的页面结构重组，DOM 操作都发挥着关键作用。