[JS] DOM

DOM

• 브라우저 렌더링 엔진이 HTML 문서를 해석(파싱:Parsing) 브라우저가 이해할 수 있는 자료구조인 DOM(Document Object Model : 문서 객체 모델)을 생성한다.
• 브라우저는 DOM을 통해 HTML에 작성된 문서를 사용자가 볼 수 있게 화면에 출력한다.
• DOM은 화면 출력 외에도 HTML 요소와 스타일 변경 등 HTML 문서를 조작할 수 있게 도와주는 DOM API(프로퍼티와 메서드)를 제공한다.
  => JS를 통해 HTML 요소를 조작하는 것은 JS가 자체적으로 가진 기능이 아닌 브라우저가 제공하는 DOM API를 통해서 가능한 것이다.
• DOM API를 활용하여 동적 웹사이트(Dynamic Website)를 만들 수있다.

DOM API를 통한 요소 제어

• 요소 노드(element node)는 HTML 요소가 가지고 있는 대한 속성, 스타일 등의 프로퍼티와 요소를 제어할 수 있는 여러 메서드를 가지고 있다.
• DOM API를 통해 HTML 문서 내의 요소 노드를 취득하여 요소를 조작하거나 요소의 추가 및 제거 등 문서의 내용을 수정할 수 있다.
• document : HTML 문서에 대한 api를 제공하는 객체로 요소 취득, 요소 생성, 요소 제거 등을 통해 문서를 조작할 수 있다.

요소 취득

• HTML 문서 내의 특정 요소의 값을 참조하거나 내용을 업데이트하기 위해 해당 요소에 대한 정보를 답는 요소 노드를 취득해야한다.
• document 객체에서 호출 시 HTML 문서의 전체가, 특정 요소에서 호출 시 해당 요소가 범위가 된다.

1. getElementById()

• 인자로 전달된 값을 id 속성값으로 가진 요소를 반환한다.
  => 동일한 id값을 가진 요소가 여러개일 경우 문서에서 가장 첫번째 요소만 반환한다.
• CSS 선택자가 아닌 id값 자체로 비교하기 때문에 인자값에는 #이 포함되지 않는다.

<div id="container">
  	<div id="box"></div>
</div>

// HTML 문서 내에서 id 속성값으로 "container"를 가지고 있는 요소를 반환
let container = document.getElementById("container");
console.log(logo); // <div id="container">...</div>
// <div id="container"></div>에서 box라는 id값을 가진 요소를 반환
let box = container.getElementById("box");
console.log(box); // <div id="box"></div>

2. getElementsByClassName

• 인자로 전달된 값을 class 속성값으로 가진 요소를 취득한다.
  => 같은 클래스명을 가진 여러개의 요소들을 HTML Collection 이라는 유사 배열 형태로 반환한다.
  => 요소가 실시간으로 업데이트 되기 때문에 다루기 까다롭다.
  => 유사 배열을 배열로 만들어서 사용하면 수월하다.
• 전달된 요소를 모두 제어하려면 유사 배열에 담긴 각 요소에 접근해야한다.
• CSS 선택자가 아닌 id값 자체로 비교하기 때문에 인자값에는 .이 포함되지 않는다.

<div id="container">
  	<div class="box"></div>
  	<div class="box"></div>
  	<div class="box"></div>
</div>

// box라는 클래스를 가진 요소 모두를 HTML Collection(유사배열)로 반환
let boxArr = document.getElementsByClassName("box");
console.log(boxArr); // HTMLCollection(3) [div.box, div.box, div.box]

3. querySelector()

• 문자열 형태의 CSS 선택자를 인자로 전달받아 선택자에 만족하는 요소 하나를 반환한다.
  => 만족하는 요소가 여러개일 경우 HTML 문서 내에서 가장 첫번째 요소만 반환한다.

<div id="container">
  	<div id="box"></div>
</div>

// 문서 전체에서 #container라는 CSS 선택자에 만족하는 요소 1개를 반환 => container라는 id값을 가진 요소
let container = document.querySelector("#container");
console.log(container); // <div id="container">...</div>
let box = container.querySelector("#box");
console.log(box); // <div id="box"></div>

4. querySelectorAll()

• 문자열 형태의 CSS 선택자를 인자로 전달받아 선택자에 만족하는 요소 모두를 NodeList라는 유사 배열 형태로 반환
  => HTMLCollection과 다르게 실시간 반영되지 않는다.
  => 유사배열이지만 forEach() 메서드가 기본적으로 구현되어 있다.

<div id="container">
  	<div class="box"></div>
  	<div class="box"></div>
  	<div class="box"></div>
</div>

// 문서 전체에서 .box라는 CSS 선택자에 만족하는 요소 모두를  NodeList(유사배열)로 반환 => box라는 클래스 값을 가진 요소 모두
let boxArr = document.querySelectorAll(".box");
console.log(boxArr); // HTMLCollection(3) [div.box, div.box, div.box]

// 유사배열이지만 forEach() 메서드 사용 가능
boxArr.forEach(box=> {
	box.style.width = "100px";
})

요소 스타일 변경하기

1. 취득한 요소의 style 속성 사용하기

• style 속성을 통해 인라인 스타일을 적용할 수 있다
  => 인라인 스타일이기 때문에 우선순위가 !important 다음으로 높으므로 주의해야한다.
• css 문법에 맞게 문자열 형태로 지정한다.
• style.color 와 같이 세부 속성을 개별적으로 설정하는 것도 가능하다.
  background-color와 같이 여러 단어로 되어있는 속성은 backgroundColor와 같이 카멜 케이스로 적용한다.

<div class="container">
	<div class="box"></div>
  	<div class="box"></div>
	<div class="box red"></div>
</div>

.container {
	width : 500px;
    height : 300px;
}
.box {
	width : 100px;
    height : 100px;
    background-color : black;
}

// container 클래스를 가진 요소 취득 후, border 적용
let container = document.querySelector(".container");
cotainer.style = "border : 1px solid #blue;";

// box와 red를 클래스로 가진 요소 취득 후 background-color 변경
// 인라인 스타일 적용이기 때문에 겹치는 속성은 우선적으로 적용
let redBox = document.querySelector(".box.red");
redBox.style.backgroundColor = "background-color: red;";

2. 특정 스타일에 대한 css 미리 지정 후 클래스 추가

• 특정 클래스에 대해서 스타일을 미리 지정 후 요소 노드의 classList를 통해 클래스 추가를 하여 스타일을 변경할 수 있다.
  1) 요소.classList : 요소가 가진 클래스 목록을 DOMTokenList라는 유사배열로 반환
  2) 요소.classList.add("클래스명") : 요소의 클래스 목록에 인자로 받은 클래스명 추가
  3) 요소.classList.remove("클래스명") : 요소의 클래스 목록에 인자로 받은 클래스명 제거
  4) 요소.classList.toggle("클래스명") : 요소의 클래스 목록에 인자로 받은 클래스명이 없다면 추가, 있다면 제거

<div class="container">
	<div class="box"></div>
  	<div class="box"></div>
	<div class="box red"></div>
</div>

.container {
	width : 500px;
    height : 300px;
}
.box {
	width : 100px;
    height : 100px;
    background-color : black;
}
.box.on {
	/* box와 on 클래스를 동시에 가진 요소에만 적용 */
    border : 1px solid #green;
}

// box라는 클래스를 가진 요소를 NodeList 형태로 반환
let boxList = document.querySelectorAll(".box");
// boxList의 두번째 요소에만 on 클래스 추가
boxList[1].classList.add("on");