你可能错过的15个令人惊叹的HTML元素方法！

HTML是网页设计的基础语言，它提供了许多元素来帮助我们创建丰富多彩的网页。这些元素可以被赋予各种属性，以改变它们的外观和行为。JavaScript是一种流行的编程语言，它可以被用来操作HTML元素，使网页变得更加动态和交互。

HTML元素方法是JavaScript中用于操作HTML元素的工具。它们允许您轻松地更改元素的属性、内容和样式，从而创建动态、交互式的网页。在这篇文章中，我们将讨论15个鲜为人知的HTML元素方法，这些方法可以帮助您将网页设计提升到一个新的高度。

1. insertAdjacentHTML()方法

insertAdjacentHTML()方法允许您在HTML元素的指定位置插入HTML代码。它有四个参数：

• position：要插入HTML代码的位置。可以是"beforebegin"、"afterbegin"、"beforeend"或"afterend"。
• html：要插入的HTML代码。

例如，以下代码将一个段落元素插入到id为"content"的div元素的开头：

const div = document.getElementById("content");
div.insertAdjacentHTML("afterbegin", "<p>Hello, world!</p>");

2. insertAdjacentElement()方法

insertAdjacentElement()方法与insertAdjacentHTML()方法类似，但它允许您插入一个HTML元素而不是HTML代码。它也有四个参数：

• position：要插入HTML元素的位置。可以是"beforebegin"、"afterbegin"、"beforeend"或"afterend"。
• element：要插入的HTML元素。

例如，以下代码将一个段落元素插入到id为"content"的div元素的开头：

const div = document.getElementById("content");
const p = document.createElement("p");
p.textContent = "Hello, world!";
div.insertAdjacentElement("afterbegin", p);

3. querySelector()方法

querySelector()方法允许您选择一个HTML元素。它接受一个CSS选择器作为参数，并返回第一个匹配的元素。

例如，以下代码选择id为"content"的div元素：

const div = document.querySelector("#content");

4. querySelectorAll()方法

querySelectorAll()方法允许您选择多个HTML元素。它接受一个CSS选择器作为参数，并返回一个包含所有匹配元素的NodeList。

例如，以下代码选择所有具有class="box"的元素：

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

5. getElementsByTagName()方法

getElementsByTagName()方法允许您选择具有指定标签名的所有HTML元素。它接受一个标签名作为参数，并返回一个包含所有匹配元素的HTMLCollection。

例如，以下代码选择所有具有"p"标签名的元素：

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

6. getElementsByClassName()方法

getElementsByClassName()方法允许您选择具有指定class名的所有HTML元素。它接受一个class名作为参数，并返回一个包含所有匹配元素的HTMLCollection。

例如，以下代码选择所有具有class="box"的元素：

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

7. getElementsByName()方法

getElementsBy