JS) [querySelector] document object를 통한 elements 접근

브라우저는 기본적으로 document라는 object를 가지고 있다.

 

console.dir(document)를 입력하면 확인할 수 있다.

 

document object 와 html title

 

console.dir(document)에 있는 title 정보

 

이처럼, 내가 입력하지 않은 사이트의 정보에 대해 접근하고 사용할 수 있다는 점은 아주 중요하다.

 

JavaScript는 HTML을 읽어온다.

 

 

---

1) HTML 코드와 Element를 JS로 접근하기

 

 

getElementById 메서드를 통한 element 내용 수정

 

document 객체에 있는 정보로 접근하는 것에서부터 모든 것이 시작된다.

 

예시로, getElementById 메서드를 통해 html 요소에 접근한다.

 

const title = document.getElementById("contents");

 

---

2) querySelector

 

 

getElement 방식보다는 querySelector가 더 자주 쓰이는 편이다.

 

CSS 방식으로 element를 검색한다.

 

다양한 방식으로의 querySelector 메서드 이용

 

querySelector에 담긴 정보 확인

 

querySelectorAll 을 이용하면, 해당 특징을 갖고 있는 요소들을 배열로 만들 수 있다.

 

querySelector는 클래스명과 id명을 활용하면 더욱 효율적일 것으로 보인다.

 

---

참고)

 

https://nomadcoders.co/javascript-for-beginners/lectures/2892