[TIL 26] javascript | DOM

DOM

Document Object Model
웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체 모델

javascript는 DOM을 통해 웹페이지에 접근해 페이지를 수정할 수 있다.

즉, DOM이란❗️

HTM인 웹페이지와 javascript를 서로 잇는 역할!

DOM을 통해 HTML에 접근하는 이유

많은 정보를 html에 직접 작성하지 않고 api 통신을 통해 가져온 데이터를 javascript로 동적으로 제어하기 위해서!

DOM으로 HTML 핸들링

javascript에서 HTML DOM 요소에 접근하는 방법은 태그이름, 아이디, 클래스, 이름 등을 이용해 특정 노드 객체를 선택하는 것이다.
-> CSS 의 선택자와 유사 하다고 볼 수 있다

예를 들어서! 버튼에서 클릭이벤트가 발생했을 때 폼 안의 입력값을 읽어 값에 따라 화면 구성을 변경해야한다고 가정해보자.
이 경우

1. 특정 태그를 찾아 입력값을 가지고 온다.
2. 화면 변경을 위해 특정 태그의 노드값이나 속성을 변경한다.

다음과 같은 로직을 거치게 된다.

document.getElementsByTagName("tag_name");
document.getElementById("id_name");
document.getElementsByClassName("class_name");
document.getElementsByName("name_attribute");
document.querySelector("#main, #title, #footer");
document.querySelectorAll("p.note, p.tip");

• querySelector는 해당 조건에 맞는 첫번째 노드만 가져오기 때문에 같은 클래스의 모든 노드를 가지고 오려면 querySelectorAll를 사용한다.

const img = document.getElementById("title-img");
img.setAttribute('src','b.jpg');

위 코드를 글로 풀어서 설명하면,

const로 선언한 img 변수에 title-img라는 아이디를 가진 노드를 찾는다.
그 노드에 src라는 속성을 추가하고 b.jpg라는 속성값을 준다.