javascript DOM的操作

当使用JavaScript进行DOM操作时，可以使用以下方法来修改和处理HTML页面的元素和内容。以下是一些常见的DOM操作方法和示例：

获取元素

• getElementById: 通过元素的ID获取该元素。

const element = document.getElementById("elementId");

• getElementsByClassName: 通过元素的类名获取所有匹配的元素。

const elements = document.getElementsByClassName("className");

• getElementsByTagName: 通过元素的标签名获取所有匹配的元素。

const elements = document.getElementsByTagName("tagName");

• querySelector: 通过CSS选择器获取第一个匹配的元素。

const element = document.querySelector("selector");

• querySelectorAll: 通过CSS选择器获取所有匹配的元素。

const elements = document.querySelectorAll("selector");

操作元素

• textContent: 获取或设置元素的文本内容。

element.textContent = "New text content";

• innerHTML: 获取或设置元素的HTML内容。

element.innerHTML = "<p>New HTML content</p>";

• setAttribute: 设置元素的属性。

element.setAttribute("attributeName", "attributeValue");

• getAttribute: 获取元素的属性。

const attributeValue = element.getAttribute("attributeName");

• classList: 操作元素的类名。

element.classList.add("className");
element.classList.remove("className");
element.classList.toggle("className");
element.classList.contains("className");

• style: 操作元素的样式。

element.style.property = "value";

创建和插入元素

• createElement: 创建一个新的元素。

const newElement = document.createElement("tagName");

• appendChild: 将一个元素作为另一个元素的子元素插入。

parentElement.appendChild(childElement);

• insertBefore: 将一个元素插入到另一个元素之前。

parentElement.insertBefore(newElement, referenceElement);

• removeChild: 移除一个元素的子元素。

parentElement.removeChild(childElement);

以上是一些常见的DOM操作方法，你可以根据需要使用它们进行HTML页面的动态修改。