js操作dom

JavaScript 操作 DOM (Document Object Model) 是前端开发中的一个重要环节。DOM 是一个以树状结构组织的文档模型，它使得我们能够使用 JavaScript 来访问、修改网页的内容、结构和样式。

下面是一些基本的 JavaScript 操作 DOM 的方法：

1. 获取元素
document.getElementById(id)：通过元素的 ID 获取一个元素。
document.getElementsByTagName(name)：通过标签名称获取一组元素。
document.getElementsByClassName(className)：通过类名获取一组元素。
document.querySelector(selector)：通过 CSS 选择器获取第一个匹配的元素。
document.querySelectorAll(selector)：通过 CSS 选择器获取所有匹配的元素列表。
2. 修改元素内容和属性
element.innerHTML：获取或设置元素内部的 HTML 内容。
element.textContent：获取或设置元素内部的文本内容。
element.setAttribute(name, value)：设置元素的属性值。
element.getAttribute(name)：获取元素的属性值。
element.removeAttribute(name)：删除元素的属性。
3. 修改元素样式
element.style：获取或设置元素的样式。
element.className：获取或设置元素的类名。
element.classList.add(className)：向元素添加一个新的类名。
element.classList.remove(className)：移除元素的一个类名。
element.classList.toggle(className)：切换元素的一个类名。
4. 创建和删除元素
document.createElement(tagName)：创建一个新的元素。
element.appendChild(newElement)：将一个新的元素添加到父元素的子元素列表末尾。
element.insertBefore(newElement, referenceElement)：在参考元素之前插入一个新的元素。
element.removeChild(child)：从 DOM 中删除一个子元素。
element.replaceChild(newChild, oldChild)：替换一个子元素。
5. 事件处理
element.addEventListener(event, handler)：为元素添加一个事件监听器。
element.removeEventListener(event, handler)：移除元素的一个事件监听器。
event.preventDefault()：阻止事件的默认行为。
event.stopPropagation()：阻止事件冒泡。
6. 遍历和操作节点
element.childNodes：获取元素的所有子节点。
element.firstChild：获取元素的第一个子节点。
element.lastChild：获取元素的最后一个子节点。
element.nextSibling：获取元素的下一个兄弟节点。
element.previousSibling：获取元素的上一个兄弟节点。
element.parentNode：获取元素的父节点。
这些操作提供了丰富的接口来操纵网页，从而实现动态交互和内容更新。在实际开发中，经常会结合事件监听和条件逻辑来实现复杂的功能。同时，现代前端框架（如 React、Vue、Angular）提供了更高级的抽象来简化 DOM 操作，但底层原理仍然是相同的