제어대상 찾기 (DOM 요소) queryselector 웹 사이트 파싱 방법

DOM (Document Object Model): 객체 지향 모델로, HTML, XML 등으로 구조화된 문서를 웹 브라우저에서 해석해서 트리 구조로 변환한 것을 말합니다.

JavaScript 같은 언어를 사용하여 내용이나 스타일을 동적으로 접근하고 수정할 수 있습니다.

body > main > div > section > ul > li > article > h2 > a
우리가 가져오고자 하는 포스트 제목들은 위와 같은 DOM 구조를 이루고 있습니다.

DOM CSS Selector

CSS의 queryselector 메서드는 웹 페이지의 요소를 선택하고 조작하기 위해 사용합니다.
- document.querySelector : CSS 선택자에 해당하는 가장 첫번째의 DOM Element를 잡아온다.
ex) const heading = document.querySelector('h1'); // h1 태그 가져오기
- document.querySelectorAll : CSS 선택자에 해당하는 모든 DOM Element를 잡아온다.

ID, Class, Tag를 사용하여 DOM 요소를 선택하는 방법

- getElementById : 주어진 문자열과 일치하는 id속성을 가진 요소를 찾아온다.
ex) const element = document.getElementById('myElement'); // ID가 myElement인 요소를 선택하고 element 변수에 할당합니다.
- getElementsByClassName : 주어진 클래스 이름을 가진 모든 자식 요소를 배열과 같은 객체로 반환한다.
- getElementsByTagName : Element의 HTMLCollection과 주어진 태그명을 반환한다. Root node를 포함해 전체 document를 대상으로 검색된다.

부모, 형제, 자식 DOM 요소를 선택하는 방법

- parentElement : 호출된 Element의 부모 요소를 반환한다.
ex)
const child = document.getElementById('myElement');
const parent = child.parentElement;
ID가 myElement인 요소를 선택하고 child 변수에 할당합니다. 그런 다음 myElement의 상위 요소를 선택하고 이를 parent 변수에 할당합니다.
- nextElementSibling : 호출된 Element의 바로 뒤에 있는 요소(형제)를 반환한다.
- previousElementSibling : 호출된 Element의 바로 앞에 있는 요소(형제)를 반환한다.
- children : 호출된 Element의 모든 자식을 반환한다.

querySelector를 활용하면 페이지의 특정 문구를 파싱하여 가져올 수 있습니다.

Javascript

const titles = document.querySelectorAll('.title');
for (let i = 0; i < titles.length; i++) {
console.log(titles[i].textContent);
}

클래스 선택기 .title과 함께 querySelectorAll 메서드를 사용하여 HTML 문서에서 클래스 이름이 "title"인 모든 요소를 선택하고 textContent 속성을 사용하여 해당 텍스트 콘텐츠를 검색합니다. 그런 다음 for 루프를 사용하여 각 제목 요소를 반복하고 텍스트 내용을 콘솔에 기록합니다.