[WEB]DOM과 querySelector

1. DOM

브라우저에서는 HTML코드를 DOM(Document Object Model)이라는 객체형태의 모델로 저장합니다. 

그렇게 저장된 정보를 DOM Tree라고 합니다.

결국 HTML element는 Tree 형태로 저장됩니다.

 

Dom tree

복잡한 DOM Tree를 탐색하기 위해 JavaScript로 탐색알고리즘을 구현하면 너무 힘듭니다.

그래서 브라우저에서는 DOM(document object model)이라는 개념을 통해서, 다양한 DOM API(함수 묶음정도)를 제공하고 있습니다.

브라우저는 DOM Tree찾고 조작하는 걸 쉽게 도와주는 여러 가지 메서드를(DOM API)를 제공합니다.

 

 

2. getElementById()

ID 정보를 통해서 찾을 수 있습니다.

MDN사이트를 참고해서 이를 테스트해봅시다.

테스트를 할 때는 특정 웹사이트에 접속한 후, 크롬 개발자도구-콘솔을 열어서 그곳에서 코딩을 해보면서 찾을 수 있습니다. 

ex)

아마존 사이트 → 개발자 도구 → console

document.getElementById("nav-cart-count");

=> id값이 "nav-cart-count"인 엘리먼트를 찾아준다.

 

document.getElementById("nav-cart-count").id;

=> id값이 나온다.

 

document.getElementById("nav-cart-count").className;

=> class 이름이 나온다.

 

 

document.getElementById("nav-cart-count").innerText = "ㅋ";

=> 아마존 카트위에 0이 ㅋ으로 바뀜

 

 

3 Element.querySelector()

DOM을 찾는데 특히 유용한 querySelector 메서드입니다.

CSS 스타일을 결정할 때 사용하던, Selector 문법을 활용해 DOM에 접근할 수 있습니다.

DOM을 찾을 때 querySelector만 써도 충분하고 빠릅니다.

참고로, 비슷하지만 다른 querySelectorAll이 있습니다. 

이 녀석은 어떤 역할을 하는지, 그 반환 값은 무엇인지 확인해보세요.

특정 웹사이트에 접속한 후, 크롬 개발자도구를 열어 콘솔 창에서 querySelectorAll을 활용해서 다양한 UI 영역을 찾아보세요.

 

 

ex)

document.querySelector("div");

=> 첫번째 div 태그가 나옴

 

document.querySelector("nav-cart-count");

=> null, 그냥 입력하면 태그로 인식, #nav-cart-count로 해야 id가 nav-cart-count인 엘리먼트를 찾음, 클래스는 .

 

 

document.querySelector("body .nav-line-2");

=> 자식 엘리먼트를 찾음. 자식의 자식이건 자손들을 다 차례대로 찾음

 

document.querySelector("nav-line-2 > .nav-arrow);

=> 바로 아래 자식을 찾음

 

즉 , css selector 문법대로 사용하면 된다.

 

 

 querySelectorAll()

- document.querySelectorAll("div"); 를 입력하면 div태그를 사용한 모든 엘리먼트들이 리스트형태로 나온다.

 

참고 사이트 : http://www.edwith.org/

※
본 게시물은 개인적인 용도로 작성된 게시물입니다. 이후 포트폴리오로 사용될 정리 자료이니 불펌과 무단도용은 하지 말아주시고 개인 공부 목적으로만 이용해주시기 바랍니다.

※