[ HTMLCollection ]
* HTMLCollection
HTML 문서에서 요소(element)들의 집합으로,
집합의 요소들을 배열처럼 다룰 수 있는 객체. (유사배열객체)
* 특징
- DOM의 변경사항에 대해 동적으로 업데이트. (실시간반영)
- 순서를 가지고 있어 배열처럼 요소에 접근 가능.
index, length 사용가능
- 유사배열형태이나 배열은 아니기 때문에 forEach나 map은 사용 불가.
=> for... of , for문 사용
=> 배열로 변환하여 배열메소드 사용 _ Array.from(), 스프레드 문법
* HTMLCollection 객체를 반환하는 메서드
- getElementsByTagName( tagName )
- getElementsByClassName( className )
- getElementsByName( name )
[ NodeList ]
* Node란?
DOM (Document Object Model, 문서객체모델) 에서 문서의 구성 요소를 나타내는 기본 단위로,
HTML 문서의 모든 요소. ( 태그, 속성, 텍스트, 주석 등..)
계층적구조 (트리구조)
* Document Node (문서노드) : HTML 문서 전체를 나타내는 노드 _ <html>
* Element Node (요소 노드) : HTML 요소를 나타내는 노드 _ <div>, <p>, <span>
* Text Node (텍스트 노드) : HTML 요소의 텍스트 내용을 나타내는 노드
* Attribute Node (속성 노드) : HTML 요소의 속성을 나타내는 노드 _ <img>요소의 src 속성
* Comment Node (주석 노드) : HTML 문서 내의 주석을 나타내는 노드
* NodeLIst
HTML 문서에서 요소(element)뿐만 아니라 텍스트, 주석, 속성 등의 모든 노드들의 집합으로,
집합의 요소들을 배열처럼 다룰 수 있는 객체. (유사배열객체)
* 특징
- DOM의 변경사항에 대해 동적으로 반영하지 않음. (실시간반영X) _ Node.childNodes (내부요소들)은 실시간 반영
- 순서를 가지고 있어 배열처럼 요소에 접근 가능.
index, length 사용가능
- 유사배열형태이나 배열은 아니기 때문에 forEach나 map은 사용 불가.
=> for... of , for문 사용
=> 배열로 변환하여 배열메소드 사용 _ Array.from(), 스프레드 문법
* NodeLIst 객체를 반환하는 메서드
- querySelectorAll( tagName, .className, #id ) => CSS 선택자로 요소를 선택
* querySelector( tagName, .className, #id )
=> 단일 요소(element)를 반환.
만일 querySelector ('.className') 으로 요소를 가져올 때,
'className'을 class이름으로 가진 요소가 여러개라면 가장 첫번째 요소만 반환.
- Node.childNodes (해당 노드의 모든 자식노드를 포함하는 NodeList를 반환)
* NodeList 메서드
- NodeList.item() : 리스트 내 항목(item)의 인덱스 반환, 범위 외는 null을 반환. (NodeList [idx]가 범위 외일땐 undefined)
- NodeList.entries() : iterator를 반환, [index(0~), node] 형태
- NodeList.keys() : iterator를 반환, key인 index를 반환.
- NodeList.values() : iterator를 반환, value인 모든 nodes를 반환.
append & appendChild
=> 부모노드에 자식노드를 추가하는 메서드
* append
노드객체(Node object) & DOMString(text) 가능
한번에 여러개의 자식 노드 추가 가능
* appendChild
노드객체(Node object)만 가능
한번에 하나의 자식 노드만 추가 가능
(** 계속 같은 위치에 여러번 추가하게 되면 이전에 추가했던 요소들은 지워지고 마지막 요소만 남는다.
즉 덮어씌워진다 **)
* innerHTML
문자열로 자식노드를 읽기 / 생성 가능
Node.innerHTML = "지정할값"
* innerText / textContent
innerHTML은 NodeLIst나 하나의 element에 모두 사용가능하지만,
아래 두개는 하나의 요소에만 사용가능.
* innerText
- 내부의 텍스트를 반환, 태그는 무시.
- 브라우저상에 현재 표시된 항목만 반환. (none으로 숨긴 요소는 무시)
* textContent
- 내부의 텍스트를 반환, 태그는 무시.
- 숨겨진 항목까지 반환.
* outerHTML
innerHTML이 선택요소 태그 내부의 값만 가져온다면
outerHTML은 선택요소 태그까지 함께 가져온다.
* insertAdjacentHTML ( position, html )
innerHTML은 기존 노드를 삭제하고(덮어씀) 새 노드를 생성한다면
insertAdjacentHTML은 기존 노드를 기준으로 네가지의 position에 새 노드를 추가할 수 있다.
beforebegin, afterbegin, beforeend, afterend
'JavaScript > 공부공부' 카테고리의 다른 글
| [JS] Select / Option 태그 (0) | 2024.03.17 |
|---|---|
| [JS] 키보드 이벤트 (keypress / keyup / keydown ) (0) | 2024.03.15 |
| [JS] jquery_jqGrid / ajax (0) | 2024.03.12 |
| [JS] null & undefined (0) | 2024.02.26 |
| [JS] Infinity & NaN (0) | 2024.02.26 |
