컴퓨터가 내가 원하는 것을 하도록 하기 위해 IDE에서 재미있는 단어를 쓰는 동안, 나는 돈을 벌기 위해 약간의 웹 스크래핑에 손을 댔습니다.

내 프로그램 내에서 스크랩하고 정리하고 싶은 페이지의 특정 부분을 대상으로 지정하는 방법을 계속 잊어버렸습니다.

그래서 아래에 미래의 나와 당신과 공유할 몇 가지 메모를 정리했습니다. :)

우리가 작업할 수 있는 약간의 상용구 HTML부터 시작하겠습니다.

<div class="grandparent" id="grandparent-id">
<!-- top level grandparent -->
    <div class="parent"> <!-- first parent -->
        <div class="child" id="child-one"></div> <!-- child 1 -->
        <div class="child"></div> <!-- child 2 -->
    </div>
    <div class="parent"> <!-- second parent -->
        <div class="child"></div> <!-- child 3 -->
        <div class="child" id="child-four"></div> <!-- child 4 -->
    </div>
</div>

ID로 요소 가져오기

페이지당 하나의 고유한 ID 이름만 있어야 합니다. 따라서 getElement(단수)라고 합니다.

const grandparent = document.getElementById("grandparent-id")

클래스 이름으로 요소 가져오기

요소 가져오기(복수형)를 호출하면 DOM(위 HTML의 부모 모두)에서 요소의 HTMLCollection이 반환됩니다. 그러나 이 컬렉션에서 Array 메서드를 사용하려고 하면 오류가 발생합니다.



반환된 요소 컬렉션을 배열 내부에 래핑하여 이 문제를 해결할 수 있으며, 그런 다음 해당 콘텐츠에 배열 메서드를 사용할 수 있습니다.

const parent = Array.from(document.getElementsByClassName("parent"))

쿼리 선택기

이것은 CSS 선택자를 사용하여 DOM을 대상으로 하여 단일 요소(DOM 트리에 나타나는 첫 번째 요소)를 제공합니다.

const grandparent = document.querySelector("#grandparent-id") // id
const grandparent = document.querySelector(".grandparent") // class

Queryselectorall

Get Elements by ID와 마찬가지로 쿼리와 일치하는 모든 요소를 ​​제공합니다. 그러나 이는 Array 메서드를 사용할 수 있는 NodeList를 반환합니다.

const grandparent = document.querySelectorAll("#grandparent-id") // id
const grandparent = document.querySelectorAll(".grandparent") // class

하위 요소 선택

먼저 최상위 조부모 노드를 대상으로 지정하려고 합니다. 거기에서 우리는 아래에 있는 모든 아이들을 붙잡을 수 있습니다.

일반적으로 NodeList를 제공하는 QuerySelector를 사용하고 있지만 자식을 호출할 때 HTMLCollection을 반환합니다!! 성가신.

따라서 반환된 자식에서 배열을 만들어야 합니다.

const grandparent = document.querySelector(".grandparent")
const parents = Array.from(grandparent.children)
const parentOne = parents[0] // etc

부모의 자식으로 드릴다운할 수도 있습니다.

const children = parentOne.children

상위 요소 선택

이미 캡처한 NodeLists에서 QuerySelector를 사용하여 자식 수준으로 바로 이동하고 부모를 건너뛸 수 있습니다.

const childFour = document.querySelector("#child-four")
const parent = childFour.parent

가장 가까운 조부모 요소 선택

이것은 QuerySelector와 매우 유사하게 작동하지만 DOM 아래로 내려가는 대신 위로 이동합니다.

전달된 선택기가 있는 가장 가까운 요소를 찾기 위해 DOM 위로 이동하는 CSS 인수를 사용합니다.

const childFour = document.querySelector("#child-four")
const grandparent = childFour.closest(".grandparent")

DOM 절반 건너뛰기

이미 캡처한 NodeLists에서 QuerySelector를 사용하여 자식 수준으로 바로 이동하고 부모를 건너뛸 수 있습니다.

const grandparent = document.querySelector(".grandparent")
const childOne = grandparent.querySelector(".child")

형제자매 선택 이전 + 다음

이것은 현재 위치에서 다음 요소를 가져옵니다. 위아래로 이동하는 대신 DOM을 통해 옆으로 이동하는 것과 같습니다.

const childOne = document.querySelector("#child-one")
const childTwo = childOne.nextElementSibling

const childFour = document.querySelector("#child-four")
const childThree = childFour.previousElementSibling