자바스크립트 DOM 메서드를 알아야 하는 5가지 🔀

저는 바닐라 JavaScript의 자랑스러운 지지자입니다. 이것이 세상에서 most popular programming language에 대한 탁월한 이해를 구축하는 가장 좋은 방법이라고 생각합니다 🌍

웹 개발에 관심이 있다면 JavaScript에 능숙해지는 것의 일부는 몇 가지 편리한 DOM 메서드를 아는 것입니다. 그래서 여기 당신이 몰랐을 5가지가 있습니다 🤫

1. 가장 가까운()

시작은 제가 가장 좋아하는 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>

이 방법의 가장 좋은 사용 사례 중 하나는 이벤트 리스너에 연결했지만 DOM 트리의 위치가 확실하지 않고 부모 요소를 찾아야 하는 경우입니다 ⬆️

2. 추가()

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);

또한 참고 - append 방법은 DOM manipulation convenience methods 계열의 일부입니다 ➕

3. insertAdjacentHTML()

내가 가장 좋아하는 또 다른 것은 insertAdjacentHTML()입니다. 이것은 HTML을 직접 추가할 수 있다는 점에서 innerHTML와 비슷하지만 상대적으로 작동합니다.

추가하려는 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>
*/

아시다시피 이것은 사용자 인터페이스를 구축할 때와 요소를 동적으로 구축해야 할 때 유용합니다 💪

4. 매치()

항상 이벤트 리스너를 사용한다면 이 리스너를 좋아하게 될 것입니다.
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!");
    }
});

이벤트 리스너 내부에 있는 경우에 유용합니다.

5. 교체()

백엔드의 새 데이터로 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>
*/

자바스크립트 DOM 단기집중과정

아래 링크에서 이 게시물에서 다루는 주제 중 일부를 다루는 JavaScript DOM에 대한 전체 과정을 찾을 수 있습니다. 👇
https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1



즐기다! 😎