엘리먼트(element)
one specific type of node
노드(node)
노드는 엘리먼트의 상위 개념
Tree 구조에서 최상위 노드를 포함한 모든 개체를 node라고 표현한다.
head, body, title, script, h1 등의 태그뿐 아니라 태그 안의 텍스트나 속성 등도 모두 node에 속한다.
이 중에 HTML 태그를 요소노드(Element Node)라고 부르고 요소 노드 안에 있는 글자를 Text 노드(Text Node)
속성(property)
| 내용 | keyword |
|---|---|
| 태그이름 | tagName |
| id | id |
| class 목록 | classList |
| class를 지정한 이름 | className |
| 속성객체 | attributes |
| 스타일객체 | style |
| 엘리먼트에 담긴 내용 | innerText |
| 프로퍼티를 사용하여 HTML 요소의 내용(content)에 접근, 내용변경 | innerHTML |
| 프로퍼티를 사용하여 HTML 요소의 내용(content)에 접근, 내용변경 | textContent |
| form입력값 | value |
| 자식엘리먼트 | children |
| 자식노드 | childNodes |
| 부모엘리먼트 | parentElement |
Node type
nodeName, nodeValue
요소의 경우 nodeName은 태그명, nodeValue는 null
텍스트 노드일 경우 nodeValue는 문자열
노드 사이의 관계
hasChildNodes()
childNodes / parentNodes / firstChild / lastChilddocument.children은 모든 자식요소를 찾지만 요소 node만 찾는다 -> 유사배열 객체
length 프로퍼티 호출 당시 NodeList에 담긴 node의 수
nodeList 접근은 배열접근처럼 한다 (추가 .item()메서드)
document.childNodes[0]
document.childNodes.item(0)document.hasChildNodes() 노드에 자식 노드가 있으면 true 반환.
length로 자식 노드 확인하는 것보다 효과적이다
노드 조작
appendChild() / insertBefore() / replaceChild() / removeChild()이 메서드들은 자식에서만 동작하므로 부모 노드를 정확히 알아야한다.
document.appendChild() 는 childNodes 목록 마지막에 노드를 추가
document.insertBefore(삽입할 노드, 기준 노드)
-> 매개변수 2가지
삽입완료한 노드는 기준 노드의 이전형제가 되며, 이동이 끝나면 메서드는 삽입한 노드를 반환
document.replaceChild(삽입할 노드, 교체할 기존노드)
-> 기존 노드를 교체
document.removeChild(제거할 노드)
Document 타입
Document 자식 노드
documentElement(=<html>)
const html = document.documentElement;
console.log(html === document.childNodes[0] === document.firstChild)전역에서 접근할 수 있다 window의 프로퍼티 window.document
- 문서 정보
document.title / document.URL / document.domain / document.referrer- 요소 위치, 선택
getElementById() / getElementByTagName() / querySelector() / querySelectAll()특정 요소나 요소 그룹에 대한 참조를 얻는다
document.getElementByTagName() 해당요소가 담긴 NodeList를 반환
Element 타입
태그이름
-
HTML 요소
id / title / lang / dir / className -
속성 얻기
getAttribute() -
요소 생성
createElement()
새로운 요소 생성
생성 이후에는 문서 트리의 일부가 아니고 붕 떠있는 상태
appendChild(), insertBefore(), replaceChild() 메서드를 통해 요소를 문서 트리에 추가해야 한다 -
속성 설정
setAttribute() -
속성 제거
removeAttribute() -
attributes 프로퍼티
getNamedItem() / removeNamedItem(name) / setNamedItem(), item()
