이론/JS
[JS] Node, Element를 선택하는 방법
millfeel1298
2021. 1. 4. 06:42
Node.Node를 선택하는 방법
| 위치 | 속성 | 설명 |
| 부모 | parentNode | 부모의 노드 |
| 형제 |
previousSibling |
이전에 인접한 형제 노드 |
| nextSibling |
다음에 인접한 형제 노드 | |
| 자식 |
childNodes |
직계 자식 노드 |
| firstChild |
첫번째 자식 노드 | |
| lastChild | 마지막 자식 노드 | |
| 노드 | nodeType | 읽기 전용 속성으로 노드의 종류를 식별하고, 상수를 반환한다. |
| nodeName | 노드의 이름을 "대문자"로 반환한다. *소문자로 사용해야 한다면 toLowerCase()를 사용한다. *과거에는 tagName을 사용했다. (표준에서는 nodeName 사용) *localName도 있지만 호환성 좋지 않다. |
|
| nodeValue | 노드의 값 *$0.firstChild.nodeValue === $0.textContent는 동일함으로, textNode가 아닌 상태에서 값을 가져오고 싶다면 textContent로 대처한다. |
Node.Element를 선택하는 방법
| 위치 | 속성 | 설명 | 지원 |
| 부모 | parentElement | 부모의 요소 | 전부 IE9이상부터 지원 |
| 형제 |
previousElementSibling |
이전에 인접한 형제 요소 | |
| nextElementSibling | 다음에 인접한 형제 요소 | ||
| 자식 |
children | 직계 모든 자식 요소들 | |
| firstElementChild | 첫번째 자식 요소 | ||
| lastElementChild | 마지막 자식 요소 |
*DOM에서 null 값은 '존재하지 않음’이나 '해당하는 노드가 없음’을 의미한다.
Q. parentNode와 parentElement의 차이
document.documentElement.parentNode //#document
document.documentElement.parentElement //null반환 값이 다른 이유는 <html>에 해당하는 document.documentElement의 부모는 document인데, document 노드는 요소 노드가 아니기 때문이다.
이런 사소한 차이는 임의의 요소 노드 elem에서 시작해 <html>까지 거슬러 올라가고 싶은데, document까지는 가고 싶지 않을 때 유용하게 활용할 수 있다.
Q, ::after, ::before 같은 가상요소는 선택할 수 없나요?
가상 요소는 DOM의 일부가 아니기 때문에 Node나 Element를 통해서 선택할 수 없다.
*가상 요소는 CSSOM의 일부이다.
그래도 선택하고 싶은데 어떻게 해야하나요?
- 다른 방법
[공부 좌표]
인터랙션디자인(DOM) -> 01. 문서프로그래밍인터페이스