#DOM

DOM은 HTML문서의 계층적 구조와 정보를 표현하며 이를 에어할 수 있는 API, 즉 프러포티와 메서드를 제공하는 트리자료구조다.

1. 요소 노드 취득

🔵 Document.prototype.getElementByID()

• 인수로 전달한 id 어트리뷰트 값을 갖는 하나의 요소 노드를 탐색하여 반환
• id를 갖는 HTML요소가 존재하지 않을 경우 null을 반환
• id값과 동일한 이름의 전역 변수가 암묵적으로 선언되고 해당 노드 객체가 할당되는 부수효과가 있음.

🔵 Document/Element.prototype.getElementsByTagName()

• 인수로 전달한 태그 이름을 값는 모든 요소 노드들을 탐색하여 반환
• DOM객체인 HTMLCollection 객체를 반환
• Element.prototype.getElementsByTagName() 메서드는 특정 요소를 통해 호출하며, 특정 요소 노드의 노드중에서 요소 노드를 탐색하여 반환
• 인수로 전달된 태그 이름을 갖는 요소가 존재하지 않는 경우 빈 HTMLCollection 객체를 반환

🔵 Document/Element.prototype.getElementsByClassName()

• 인수로 전달한 class 어트리뷰트 값을 갖는 하나의 요소 노드를 탐색하여 반환
• DOM객체인 HTMLCollection 객체를 반환
• Element.prototype.getElementsByClassName() 메서드는 특정 요소를 통해 호출하며, 특정 요소 노드의 노드중에서 요소 노드를 탐색하여 반환
• 인수로 전달된 태그 이름을 갖는 요소가 존재하지 않는 경우 빈 HTMLCollection 객체를 반환

🔵 Document/Element.prototype.querySelector()

• 인수로 전달한 css선택자를 만족시키는 요소노드가 존재하지 않는 경우 null 반환
• 인수로 전달한 css선택자가 문법에 맞지 않는 경우 DOMException 에러 발생

🔵 Document/Element.prototype.querySelectorAll()

• DOM 컬렉션 객체인 NodeList 객체를 반환.
• 인수로 전달한 css선택자가 문법에 맞지 않는 경우 빈 NodeList객체를 반환

🔵 Element.prototype.matches()

• 특정 요소 노드를 취득할 수 있는지 확인
• 이벤트 위임 시 유용

2. HTMLCollection과 NodeList

✏️ HTMLCollection

• HTMLCollection 객체는 노드 객체의 실시간으로 반영하는 살아 있는 DOM컬렉션 객체이다.
• 유사배열이면서 이터러블 객체인 HTMLCollection 객체를 배열로 반환하면 배열의 고차 함수(forEach, map, filter, reduce 등)을 사용할 수 있다.

👾 #1

[...$elems].forEach(elem => elem.calssName = 'blue');

✏️ NodeList

• querySelectorAll 메서드를 사용하여 NodeList객체를 반환함!!
• NodeList객체는 실시간으로 노드 객체의 상태 변경을 반영하지 않음!!
• NodeList객체는 NodeList.prototype.forEach를 상속받아 사용가능, 이외에도 item, entries, keys, values등 메서드 제공

$elems.forEach(elem => elem.calssName = 'blue');

• childNodes 프로퍼티가 반환하는 NodeList 객체는 실시간으로 노드 객체의 상태변경을 반영하는 live 객체로 동작함!!
• NodeList객체 또한 배열로 변환하여 사용하는것이 안전함!!
• Array.from메서드나 스프레드 문법으로 배열로 변환 가능

3. 노드 탐색

• parentNode, previousSibling, firstChild, childNodes 프로퍼티는 Node.prototype이 제공하고, 프로퍼티키에 Element가 포함된 previousElementSibling, nextElementSibling과 children프로퍼티는 Element.prototype이 제공
• 노드 탐색 프로퍼티는 모두 접근자 프로퍼티이며 할당하면 에러 없이 무시 됨

🔵 자식 노드 탐색

🟡 Node.prototype.childNodes

• NodeList객체에 담겨 반환
• 요소 노드뿐만 아니라 텍스트 노드 포함될 수 있음.

🟡 Element.prototype.children

• HTMLCollection객체에 담겨 반환
• 텍스트 노드가 포함 되지 않음.

🟡 Node.prototype.firstChild / Element.prototype.firstElemetChild

• 첫번째 자식 노드를 반환

🟡 Node.prototype.lastChild / Element.prototype.lastElemetChild

• 마지막 자식 노드를 반환

🔵 자식 노드 존재 확인

🟡 Node.prototype.hasChildNodes()

• 자식 노드의 존재 유무를 불린으로 반환
• 텍스트 노드를 포함하여 자식노드의 존재를 확인!!!

🟡 children.length, Element 인터페이스의 childElementCount 프로퍼티

• 요소 노드가 존재하는지 확인할 경우!!

console.log(!!$fruits.chilren.length); // 0 -> false
console.log(!!$fruits.childElementCount); // 0 -> false

🔵 부모 노드 탐색

🟡 Node.prototype.parentNode

• 텍스트 노드는 DOM트리의 최종단 노드인 리프 노드이므로 부모노드가 텍스트 노드인 경우는 없음~!

🔵 형제 노드 탐색

🟡 Node.prototype.previousSibling / Element.prototype.previousElementSibling

• 부모노드가 같은 형제 노드 중에서 자신의 이전 형제노드를 탐색하여 반환.

🟡 Node.prototype.nextSibling / Element.prototype.nextElementSibling

• 부모노드가 같은 형제 노드 중에서 자신의 다음 형제노드를 탐색하여 반환.

4. 노드 정보 취득

🔵 Node.prototype.nodeType

• 노드 타입을 나타내는 상수를 반환

• node.ELMENT_NODE: 상수 1 반환
• node.TEXT_NODE: 상수 3 반환
• node.DOCUMENT_NODE: 상수 9 반환

🔵 Node.prototype.nodeName

• 노드의 이름을 문자열로 반환

• 요소 노드: 문자열로 태그 이름("LI"등) 반환
• 텍스트 노드: 문자열 "#text" 반환
• 문서 노드: 문자열 "#document" 반환

5. 요소 노드의 텍스트 조작

🔵 textContent

• setter, getter 모두 존재하는 접근자 프로퍼티로서 요소 노드의 텍스트와 모든 자손 노드의 텍스트를 모두 취득하거나 변경
• 요소 노드의 콘텐츠 영역(시작태그와 종료 태그 사이) 내의 텍스트를 모두 반환
• 즉, childNodes 프로퍼티가 반환하는 모든 노드들의 텍스트노드의 값, 즉 텍스트를 모두 반환함 -> html 마크업은 모두 무시!!

• html

  <div id ="foo">Hello <span>Wold!</span></div>

👾 #1 > 반환

• js

 console.log(document.getElementById('foo').textContent);
// Hello Wold!

👾 #2 > 할당

• 할당한 문자열에 HTML 마크업이 포함되어 있더라도 문자열 그대로 인식되어 텍스트로 취급됨!!! 즉, HTML 마크업이 파싱되지 않음!!

 document.getElementById('foo').textContent = 'Hi <span>Wold!</span>'

👉🏻 브라우저에 Hi <span>Wold!</span>으로 출력 됨!, 문자열로 할당된 마크업은 반환시에도 텍스트 형태로 출력됨~!