5 个你可能不知道的 JavaScript DOM 方法

closest

让我们开始是我最喜欢的 DOM 方法，closest(). 这个在子元素上调用，并将遍历 DOM 树，直到找到与给定选择器匹配的祖先。

/*
    Example HTML 👇
    ------------------------------------------------
    <ul>
        <li>
            <strong class="myStrong">Nested</strong>
        </li>
        <li>Another list item ...</li>
    </ul>
*/

const myStrong = document.getElementById("myStrong");
const containingList = myStrong.closest("ul");

// containingList == <ul>

appendChild

该append()方法允许您一次附加多个内容 - 而且，它不仅仅是元素。您还可以同时附加文本。

/*
    Example HTML 👇
    ------------------------------------------------
    <ul id="myList">
        <li>Apple</li>
        <li>Banana</li>
        <li>Carrot</li>
    </ul>
*/

const myList = document.getElementById("myList");
const pearListItem = document.createElement("li");
const lettuceListItem = document.createElement("li");

pearListItem.textContent = "Pear";
lettuceListItem.textContent = "Lettuce";

myList.append(pearListItem, lettuceListItem);

insertAdjacentHTML

我最喜欢的另一个是insertAdjacentHTML()- 这个类似于innerHTML它允许您直接添加 HTML，但这个是在相对基础上工作的。

您传入要添加的 HTML，以及相对于您调用它的元素的添加位置。

可供选择的位置有：

afterbegin: 第一个元素
beforebegin: 在父元素之前
beforeend: 最后一个元素
afterend: 在父元素之后

/*
    Example HTML 👇
    ------------------------------------------------
    <button id="submitBtn">
        <span>Submit Form</span>
    </button>
*/

const submitBtn = document.getElementById("submitBtn");
const iconHtml = "<span class="icon">tick</span>";

submitBtn.insertAdjacentHTML("afterbegin", iconHtml);

/*
    Updated "submitBtn":
    <button id="submitBtn">
        <span class="icon">tick</span>
        <span>Submit Form</span>
    </button>
*/

matches

如果你总是使用事件监听器，你会喜欢这个的。

如果您调用它的元素与给定的查询选择器匹配，该matches()方法将返回true

/*
    Example HTML 👇
    ------------------------------------------------
    <button id="myButton">Click Me</button>
*/

const myButton = document.getElementById("myButton");

myButton.addEventListener("click", () => {
    if (myButton.matches(".has-errors")) {
        alert("You have errors!");
    }
});

replaceWith

如果您发现自己需要使用来自后端的新数据更新 DOM，那么这种方法可能是完美的。

该replaceWith()方法允许您用一个或多个其他元素替换一个元素 - 就像append()前面介绍的方法一样。

/*
    Example HTML 👇
    ------------------------------------------------
    <ul id="myList">
        <li>Red</li>
        <li class="purple">Purple</li>
    </ul>
*/

const purpleLi = document.querySelector(".purple");
const greenLi = document.createElement("li");
const blueLi = document.createElement("li");

greenLi.textContent = "Green";
blueLi.textContent = "Blue";

purpleLi.replaceWith(greenLi, blueLi);

/*
    Result HTML 👇
    ------------------------------------------------
    <ul id="myList">
        <li>Red</li>
        <li>Green</li>
        <li>Blue</li>
    </ul>
*/