JavaScript DOM 函数大全详解（使用最新的 JS 语法）
JavaScript DOM 函数大全详解（使用最新的 JS 语法）
JavaScript 的 Document Object Model（DOM）是用于操作网页内容的编程接口。在最新的 JavaScript 语法下，我们有很多方便和高效的方法来处理 DOM。下面是一些常用 DOM 函数和方法的详细解释。
获取元素
querySelector()
用于获取符合 CSS 选择器的第一个元素。
const element = document.querySelector("#myID");
querySelectorAll()
用于获取符合 CSS 选择器的所有元素。
const elements = document.querySelectorAll(".myClass");
修改元素
innerText
用于获取或设置元素的纯文本内容。
element.innerText = "新的内容";
innerHTML
用于获取或设置元素的 HTML 内容。
element.innerHTML = "<p>新的内容</p>";
textContent
与 innerText 类似，但不考虑样式。
element.textContent = "新的内容";
属性和样式
setAttribute()
用于设置元素的属性。
element.setAttribute("data-custom", "value");
getAttribute()
用于获取元素的属性。
const value = element.getAttribute("data-custom");
style
用于操作元素的内联样式。
element.style.color = "red";
添加和删除元素
appendChild()
用于向元素内添加一个新的子元素。
const newElement = document.createElement("div");
element.appendChild(newElement);
removeChild()
用于从元素内移除一个子元素。
element.removeChild(newElement);
insertBefore()
将一个新的子元素插入到现有子元素之前。
element.insertBefore(newElement, existingElement);
事件处理
addEventListener()
用于给元素添加事件监听器。
element.addEventListener("click", function() {alert("元素被点击了");
});
这些只是最基础的 DOM 操作函数和方法，实际上 DOM API 还提供了更多高级和专门的功能。通过熟练掌握这些基础知识，你将能更有效地使用 JavaScript 来控制和改变网页内容。