[JS] Node, Element를 선택하는 방법

티스토리 뷰

이론/JS

millfeel1298 2021. 1. 4. 06:42

위치	속성	설명
부모	parentNode	부모의 노드
형제	previousSibling	이전에 인접한 형제 노드
형제	nextSibling	다음에 인접한 형제 노드
자식	childNodes	직계 자식 노드
	firstChild	첫번째 자식 노드
	lastChild	마지막 자식 노드
노드	nodeType	읽기 전용 속성으로 노드의 종류를 식별하고, 상수를 반환한다.
	nodeName	노드의 이름을 "대문자"로 반환한다. 소문자로 사용해야 한다면 toLowerCase()를 사용한다. 과거에는 tagName을 사용했다. (표준에서는 nodeName 사용) *localName도 있지만 호환성 좋지 않다.
	nodeValue	노드의 값 *$0.firstChild.nodeValue === $0.textContent는 동일함으로, textNode가 아닌 상태에서 값을 가져오고 싶다면 textContent로 대처한다.

*DOM에서 null 값은 '존재하지 않음’이나 '해당하는 노드가 없음’을 의미한다.

document.documentElement.parentNode //#document
document.documentElement.parentElement //null

반환 값이 다른 이유는 <html>에 해당하는 document.documentElement의 부모는 document인데, document 노드는 요소 노드가 아니기 때문이다.

이런 사소한 차이는 임의의 요소 노드 elem에서 시작해 <html>까지 거슬러 올라가고 싶은데, document까지는 가고 싶지 않을 때 유용하게 활용할 수 있다.

가상 요소는 DOM의 일부가 아니기 때문에 Node나 Element를 통해서 선택할 수 없다.

*가상 요소는 CSSOM의 일부이다.

[공부 좌표]

인터랙션디자인(DOM) -> 01. 문서프로그래밍인터페이스

공지사항

최근에 올라온 글

최근에 달린 댓글

링크

글 보관함