또 다른 5가지 JavaScript DOM 메서드를 알아야 합니다 🧮

내 에서 언급했듯이 바닐라 JavaScript를 작성하는 것이 세상에서 most popular programming language에 대한 강력한 이해를 구축하는 가장 좋은 방법이라고 생각합니다 🌏

꼭 알아야 할 자바스크립트 DOM 메서드 5가지를 더 살펴보겠습니다 👇

1. 스크롤인투뷰()

이 방법은 사용자 인터페이스를 구축하는 데 적합합니다.

오프스크린 요소에서 scrollIntoView()를 호출하면 웹 브라우저가 스크롤하여 요소를 부드럽게 표시합니다.

/*
    HTML:
    <div>
        <p>Dummy Text</p>
        <p>Dummy Text</p>
        <p>Dummy Text</p>
        <p>Dummy Text</p>
        <p>Dummy Text</p>
        ... and so on
    </div>
*/

const someParagraph = document.getElementById("important");

// The browser will bring #someParagraph into view
someParagraph.scrollIntoView({
    behavior: "smooth"
});

<p> 태그를 많이 생성한 후 위의 코드를 실행하여 어떻게 작동하는지 확인하는 것이 좋습니다.

2. 포함()

DOM 메소드가 과소평가된다면 바로 이 메소드일 것입니다.
contains() 메서드는 요소가 다른 요소의 자손인지 알려줍니다. 예를 들어 설명하겠습니다.

/*
    HTML:
    <ul id="fruit">
        <li>Apple</li>
        <li>Pear</li>
        <li>
            <strong id="strongOrange">Orange</strong>
        </li>
        <li>Grape</li>
    </ul>
*/

const fruitList = document.getElementById("fruit");
const strongOrange = document.getElementById("strongOrange");

// Output: true 💪
console.log(fruitList.contains(strongOrange));

보시다시피, <strong> 태그는 #myList 의 직계 자식일 필요가 없고, 자손이면 됩니다.

3. 클론노드()

요소를 복사하는 데 문제가 있는 경우 이 방법에 주의하십시오.

이름에서 알 수 있듯이 cloneNode()는 호출된 메서드를 복제합니다. 또한 요소가 복사되면 새 데이터로 업데이트할 수 있으므로 사용자 인터페이스를 구축하는 데 도움이 될 수 있습니다.

/*
    HTML:
    <ul id="cars">
        <li>Sedan</li>
        <li>Hatch</li>
        <li>Wagon</li>
    </ul>
*/

const carsList = document.getElementById("cars");

// Get the first <li> so we can copy it
const existingItem = carsList.querySelector("li");

const newItem = existingItem.cloneNode();

newItem.textContent = "4WD";
carsList.appendChild(newItem);

이 코드를 실행하면 <li>4WD</li>가 #cars 목록에 표시됩니다. 이렇게 하면 얕은 복사본만 생성됩니다. 깊은 복사를 하려면 true를 인수로 전달하면 됩니다.

4. 후()

DOM에 요소를 추가하는 새로운 방법을 찾는 것보다 더 흥미로운 것은 없습니다 😎
after() 메서드를 사용하면 다른 요소 뒤에 하나 이상의 요소 또는 텍스트 노드를 추가할 수 있습니다. 한 번에 여러 요소를 추가할 수 있다는 것은 매우 유용합니다.

/*
    HTML:
    <ul id="drinks">
        <li>Water</li>
        <li id="softDrink">Soft Drink</li>
        <li>Juice</li>
    </ul>
*/

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

const milkshake = document.createElement("li");
const cordial = document.createElement("li");

milkShake.textContent = "Milkshake";
cordial.textContent = "Cordial";

softDrink.after(milkShake, cordial);

이 코드가 실행되면 각각 <li>Milkshake</li> 뒤에 <li>Cordial</li> 와 <li>Soft Drink</li> 가 모두 존재합니다.

5. 제거()

이 목록에서 가장 간단한 방법이 마지막에 있습니다.

이름에서 알 수 있듯이 remove() 메서드는 DOM에서 요소를 제거합니다. 이것은 removeChild() 의 편리한 대안입니다.

const someParentElement = document.getElementById("parent");
const toRemove = someParentElement.querySelector("span");

// Using removeChild()
someParentElement.removeChild(toRemove);

// Using remove()
toRemove.remove();

위의 예에서 볼 수 있듯이 remove() 를 사용할 때 하위 요소를 제거하기 위해 상위 요소를 참조할 필요가 없습니다.

그리고 그게 다야! 이 목록을 즐기셨기를 바랍니다 😁

지금 등록하세요 👉 JavaScript DOM 단기집중과정

아래 링크에서 이 게시물에서 다루는 주제 중 일부를 다루는 JavaScript DOM에 대한 전체 과정을 찾을 수 있습니다. 👇

https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1



행복한 코딩 😎