JavaScript DOM 函数大全详解（使用最新的 JS 语法）

JavaScript DOM 函数大全详解（使用最新的 JS 语法）

JavaScript 的 Document Object Model（DOM）是用于操作网页内容的编程接口。在最新的 JavaScript 语法下，我们有很多方便和高效的方法来处理 DOM。下面是一些常用 DOM 函数和方法的详细解释。

获取元素

querySelector()

用于获取符合 CSS 选择器的第一个元素。

const element = document.querySelector("#myID");
1

querySelectorAll()

用于获取符合 CSS 选择器的所有元素。

const elements = document.querySelectorAll(".myClass");
1

修改元素

innerText

用于获取或设置元素的纯文本内容。

element.innerText = "新的内容";
1

innerHTML

用于获取或设置元素的 HTML 内容。

element.innerHTML = "
新的内容
";
1

textContent

与 innerText 类似，但不考虑样式。

element.textContent = "新的内容";
1

属性和样式

setAttribute()

用于设置元素的属性。

element.setAttribute("data-custom", "value");
1

getAttribute()

用于获取元素的属性。

const value = element.getAttribute("data-custom");
1

style

用于操作元素的内联样式。

element.style.color = "red";
1

添加和删除元素

appendChild()

用于向元素内添加一个新的子元素。

const newElement = document.createElement("div");
element.appendChild(newElement);
1
2

removeChild()

用于从元素内移除一个子元素。

element.removeChild(newElement);
1

insertBefore()

将一个新的子元素插入到现有子元素之前。

element.insertBefore(newElement, existingElement);
1

事件处理

addEventListener()

用于给元素添加事件监听器。

element.addEventListener("click", function() {
  alert("元素被点击了");
});
1
2
3

这些只是最基础的 DOM 操作函数和方法，实际上 DOM API 还提供了更多高级和专门的功能。通过熟练掌握这些基础知识，你将能更有效地使用 JavaScript 来控制和改变网页内容。