📚 [JavaScript] DOM

📕 DOM

document object model(문서 객체 모델)

자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법

✔ DOM은 웹 문서와 그 안의 모든 요소를 객체로 인식하고 처리한다

📙 DOM 트리

• 문서 노드(document node) : HTML 문서 전체를 나타내는 노드
• 요소 노드(element node) : 모든 HTML 요소, 속성 노드를 가질 수 있는 유일한 노드
• 텍스트 노드(text node) : HTML 문서의 모든 텍스트
• 속성 노드(attribute node) : 모든 HTML 요소의 속성, 요소 노드에 관한 정보를 가지고 있다
• 주석 노드(comment node) : HTML 문서의 모든 주석

📒 탐색

1. document.getElementById()

특정한 id가 포함된 DOM 요소에 접근한다

document.getElementByID("id이름")
var selectedItem = document.getElementById("even");
-> 아이디가 "even"인 요소를 선택

✔ HTML 태그의 id 속성은 HTML 요소 안에서 중복되지 않도록 사용하는 CSS 선택자이다

2. document.getElementsByName()

지정한 name 속성값을 가진 요소에 접근한다

document.getElementsByName("name 속성값")
var selectedItem = document.getElementsByName("first");
-> name 속성값이 "first"인 모든 요소를 선택

3. document.getElementsByTagName()

지정한 태그명을 사용한 DOM 요소에 접근한다

document.getElementsByTagName("태그이름")
var selectedItem = document.getElementsByTagName("li");
-> 모든 <li> 요소를 선택

✔ class나 id를 지정하지 않은 DOM 요소에 접근하려면 태그를 이용한다
✔ 웹 문서 안에서 같은 태그를 사용하는 요소가 2개 이상일 수 있으므로 메소드가 반환하는 값도 HTMLCollection 형태로 저장된다

4. document.getElementsByClassName()

지정한 class 선택자 이름이 들어있는 DOM 요소에 접근한다

document.getElementsByClassName("class이름")
var selectedItem = document.getElementsByClassName("odd");
-> 클래스가 "odd"인 모든 요소를 선택

✔ class 선택자는 웹 문서 안에서 여러 요소에서 사용할 수 있으므로 반환하는 요소가 2개 이상일 수 있다
✔ 메소드를 사용하면 클래스 이름이 같은 DOM 요소들이 HTMLCollection 객체로 저장된다

5. document.querySelector()

DOM 트리의 텍스트, 속성 노드까지 자유롭게 제어해야 할 때 사용한다

document.querySelector(선택자)
var selectedItem = document.querySelectorAll("li.odd");
-> 클래스가 "odd"인 요소 중에서 <li> 요소만을 선택

✔ 반환값이 하나라면 querySelector() 메소드를 사용하고, 반환값이 여러개라면 querySelectorAll() 메소드를 사용한다
✔ 선택자를 표시할 때 id 이름 앞에는 해시 기호(#)를 붙이고, class 이름 앞에는 마침표(.)를 붙인다

📗 생성

1. document.createElement

새로운 요소 노드를 만든다

document.createElement(HTML요소)
var newNode = document.createElement("p");
-> 새로운 <p> 요소를 생성

2. document.createTextNode

새로운 텍스트 노드를 만든다

document.createTextNode("텍스트");
var newText = document.createTextNode("새로운 텍스트");
-> 새로운 텍스트 노드를 생성

📘 제어

1. element.appendChild

새로운 노드를 해당 노드의 자식 노드 리스트(child node list)의 맨 마지막에 추가한다

element.appendChild(aChild);
var p = document.createElement("p");
document.body.appendChild(p);
-> 새로운 단락 요소를 생성하고 문서에 있는 바디 요소의 끝에 붙입니다.

2. element.setAttribute

속성값을 특정한 값으로 지정한다
만약 속성값을 변경하려는 속성이 존재하지 않으면 먼저 해당 속성을 생성한 후에 속성값을 설정한다

setAttribute(속성, 값)
document.getElementsByTagName("p")[0].setAttribute("class", "para");
-> 모든 <p> 요소중에서 첫 번째 요소에 클래스 속성값으로 "para"를 설정

3. element.getAttribute

해당 요소에 지정된 값을 반환한다

getAttribute(속성)
document.getElementById("div").getAttribute("align");
-> id가 "div"인 요소의 align 값을 반환

4. element.innerHTML

요소 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정한다

const content = element.innerHTML;
element.innerHTML = htmlString;