DOM API
DOM (Digital Object Model) 은 HTML 문서의 계층적 구조와 저보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조이다.
🧸 ID를 이용한 요소 노드 취득
> Document.prototype.getElementById Method
<!DOCTYPE html>
<html>
<body>
<ul>
<li id="apple">Apple</li>
<li id="banana">Banana</li>
<li id="orange">Orange</li>
</ul>
<script>
// ID 값이 banana 인 요소 노드 탐색하여 반환.
const el = document.getElementById('banana');
// 취득한 요소 노드의 style.color 프로퍼티 값 변경.
el.style.color = 'red';
</script>
</body>
</html>✔️ 단 하나의 요소 노드만 반환.
: Html내에 중복된 id 값을 갖는 여러 요소가 존재하더라도 전달된 id 요소 값을 가진 첫번째 노드만 반환.
✔️ 만약 인수로 전달된 id 값을 갖는 Html 요소가 존재하지 않을 경우 null 반환.
🧸 Tag Name을 이용한 요소 노드 취득
> Document.prototype.getElementsByTagName Method
<html>
<body>
<ul>
<li class="apple">Apple</li>
<li class="banana">Banana</li>
<li class="orange">Orange</li>
</ul>
<script>
// 태그 이름이 li인 요소 노드 모두 탐색하여 반환.
const els = document.getElementsByTagName('li');
// 취득한 모든 요소의 class 값 추가
[...els].forEach(el =>{el.classList.add('fruits');}
</script>
</body>
</html>✔️ 인수로 주어진 태그 이름과 일치하는 모든 요소를 반환.
✔️ HtmlCollection 객체로 반환.
: 여러 개의 노드 객체를 갖는 DOM 컬렉션 객체.
🧸 Class를 이용한 요소 노드 취득
> Document.prototype.getElementByClassName Method
<html>
<body>
<ul>
<li class="fruits apple">Apple</li>
<li class="fruits banana">Banana</li>
<li class="fruits orange">Orange</li>
</ul>
<script>
// Class 값이 fruits 인 요소 노드 탐색하여 반환.
const els = document.getElementsByClassName('fruits');
// 취득한 모든 요소의 style.color 값 변경
[...els].forEach(el=>{el.style.color('red');});
</script>
</body>
</html>✔️ 인수로 전달된 class 값과 일치하는 모든 요소 노드 취득.
✔️ 인수로 전달할 class 값은 공백으로 구분하여 여러 class 값 지정 가능.
🧸 CSS 선택자를 이용한 요소 노드 취득
> Css 선택자
/* 전체 선택자 : 모든 요소를 선택 */
*{...}
/* 태그 선택자 : p 태그 요소를 선택 */
p{...}
/* ID 선택자 : id 값이 foo 인 요소 선택 */
#foo{...}
/* Class 선택자 : class 값이 foo 인 요소 선택 */
.foo{...}
/* 후손 선택자 : div의 후손 요소 중 p 요소 선택 */
div p{...}
/* 자식 선택자 : div 요소의 자식 요소 중 p 요소 선택 */
div > p{...}> Document.prototype.querySelector Method
<html>
<body>
<ul>
<li class="fruits apple">Apple</li>
<li class="fruits banana">Banana</li>
<li clas="fruits orange">Orange</li>
</ul>
<script>
// Class 값이 banana 인 요소 노드 탐색하여 반환.
const el = document.querySelector('.banana');
// Html 요소에 적용할 수 있는 메소드
// 1. 이벤트 Event : 상황
el.addEventListner('click',2);
// 2. 핸들러 Handler : 실행할 함수
el.addEventListner('click',function(){
console.log('click!')};
</script>
</body>
</html>✔️ Css의 class 선택자 .를 사용해서 같은 class 값을 가진 요소 노드 반환.
✔️ 인수로 전달한 Css 선택자를 만족하는 요소가 여러 개일 경우 첫번째 요소 노드 만 반환. 존재하지 않을 경우 null 반환.
> Document.prototype.querySelectorAll Method
<html>
<body>
<ul>
<li class="fruits apple">Apple</li>
<li class="fruits banana">Banana</li>
<li clas="fruits orange">Orange</li>
</ul>
<script>
// Class 값이 banana 인 요소 노드 탐색하여 반환.
const fruitEls = document.querySelectorAll('.banana');
// 찾은 요소들 반복해서 함수 실행
// 첫번째 매개변수 boxEl : 반복중인 요소
// 두번째 매개변수 index : 반복중인 번호
fruitEls.forEach(function(fruitEl,index){})
</script>
</body>
</html>✔️ 인수로 전달한 Css 선택자를 만족하는 모든 요소 반환.
✔️ 인수로 전달한 Css 선택자를 만족하는 요소가 존재하지 않을 경우 빈 NodeList 객체 반환.
💡 HTMl 내에 모든 요소 노드 취득
const all = document.querySelectorAll('*');
// OR
const $all = document.getElementsByTagName('*');🧸 노드 탐색
> 자식 노드 탐색
<html>
<body>
<ul id ="fruits">
<li class="apple">Apple</li>
<li class="banana">Banana</li>
<li clas="orange">Orange</li>
</ul>
<script>
const $fruits = document.getElementById('fruits');
// #fruits 요소의 모든 자식 노드 탐색.
// Node.prototype.childNodes [요소 노드 + 텍스트 노드]
console.log(#fruits.childNodes);
// NodeList(7) [text, li.apple, text, li.banana, text, li.orange, text]
// Element.prototype.children [요소노드]
console.log(#fruits.children);
// HTML Collection(3) [li.apple, li.banana, li.orange]
// #fruits 요소의 첫번째 자식노드 반환
// Node.prototype.firstChild [요소 노드 + 텍스트 노드]
console.log(#fruits.firstChild)
// #text
// Element.prototype.firstElementChild [요소노드]
console.log(#fruits.firstElementChild);
// li.apple
// #fruits 요소의 마지막 자식노드 반환
// Node.prototype.lastChild [요소 노드 + 텍스트 노드]
console.log(#fruits.lastChild)
// #text
// Element.prototype.lastElementChild [요소노드]
console.log(#fruits.lastElementChild);
// li.orange
</script>
</body>
</html>✔️ Node.prototype. Method : 요소노드 + 텍스트 노드
✔️ Element.prototype. Method : 요소노드
> 부모 노드 탐색
<html>
<body>
<ul id ="fruits">
<li class="apple">Apple</li>
<li class="banana">Banana</li>
<li clas="orange">Orange</li>
</ul>
<script>
const $banana = document.querySelector('.banana');
console.log($banana.parentNode); // ul#fruits
</script>
</body>
</html>✔️ Node.prototype.parentNode
🧸 요소 노드를 통한 텍스트 조작
const boxEl = document.querySelector('.box');
// Getter
console.log(boxEl.textContent); // Box!!
// Setter
boxEl.textContent = 'HEROPY?!';
console.log(boxEl.textContent); // HEROPY?!✔️ Getter : 값을 얻는 용도
✔️ Setter : 값을 지정하는 용도
