노드탐색
- 요소노드를 얻고, DOM트리의 노드를 옮겨다니며 탐색할 경우가 있다.
- 노드탐색 프로퍼티는 모두 자체적으로 값을 갖진 않고 다른 데이터 프로퍼티 값을 읽거나 저장할 때 호출되는 프로퍼티 (== 접근자 프로퍼티)이다.
- 노드 탐색 프로퍼티는 setter없이 getter만 존재한다.
공백 텍스트 노드
HTML 요소 사이 스페이스, 탭 , 줄바꿈등의 공백 문자는 텍스트 노드를 생성한다.
이를 공백 텍스트 노드라 한다.
* 읽기 전!
프로퍼티를 볼땐 요소노드만 반환하는지 텍스트 노드도 반환하는지 구별하며 알아두면 좋을 것 같다!
자식 노드 탐색 프로퍼티
1) Node.prototype.childNodes : 요소노드 + 텍스트 노드 포함
2) Element.prototype.children : HTMLCollection에 요소노드만 포함
3) Node.prototype.firstChild : 첫번째 자식노드 , 텍스트노드 반환가능
4) Node.prototype.lastChild : 마지막 자식노드, 텍스트 노드 반환 가능
5) Element.prototype.firstElementChild : 첫번째 자식노드 , 요소노드만 반환
6) Element.prototype.lastElementChild : 마지막 자식노드, 요소노드만 반환
요소 노드의 텍스트 노드 탐색
- 요소노드의 자식노드 : 텍스트 노드
- 따라서 요소노드로 부터 firstChild 프로퍼티로 접근 가능하다.
부모 노드 탐색
- Node.prototype.parentNode 프로퍼티 사용
부모 노드 탐색
- Node.prototpye.previousSibling : 부모가 같은 자신의 이전 형제노드 반환 (텍스트 노드도 가능)
- Node.prototpye.nextSibling : 부모가 같은 다음 형제노드 반환 (텍스트 노드도 가능)
- Node.prototpye.previousElementSibling : 부모가 같은 자신의 이전 형제노드 반환 (요소노드만 반환)
- Node.prototpye.nextElementSibling :부모가 같은 다음 형제노드 반환(요소노드만 반환)
요소 노드의 텍스트 조작
이제는 참조와 할당이 모두 가능한 프로퍼티를 보겠다.
nodeValue
- setter와 getter 모두 존재하는 접근자 프로퍼티이다
- 노드객체.nodeValue 는 노드 객체의 값을 반환한다. (노드 객체 값 ? 텍스트노드의 텍스트 )
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<div>순대</div>
<script>
const div = document.querySelector("div");
const textNode = div.firstChild;
console.log(div.nodeValue);
console.log(textNode.nodeValue);
</script>
</body>
</html>- div.firstChild인 값이 텍스트 노드이다.
- 값을 바꾸고 싶다면 textNode.nodeValue = "바꾸고 싶은 값" 으로 조작하면 된다.
(위의 요소 노드의 텍스트 노드 탐색 참고)
textContent
- setter와 getter 모두 존재
- 모든 자손의 텍스트를 취득하거나 변경한다.
- 텍스트만 모두 반환하고 HTML마크업은 무시한다.
- nodeValue로 텍스트를 반환하는것보다 간결하다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<p></p>
<input type="text">
<button>Write Something!</button>
<script>
const myBtn = document.querySelector("button");
const myInput = document.querySelector("input");
const myP = document.querySelector("p");
myBtn.addEventListener('click', function(){
myP.textContent = myInput.value;
});
</script>
</body>
</html>다음 코드에선 input박스에 값을 넣고 button을 click하면 그 값을 p태그 안에 넣어준다.
innerText
- css를 고려해야하므로 느리다
- 따라서 사용하지 말자
DOM(3)에선 노드의 조작에 대해 알아보겠다.
* 모던 자바스크립트 DeepDive를 참고하였습니다.
https://mandelina-code.tistory.com/58
[JS] DOM (1) - DOM이란?
DOM이란? - HTML 문서의 계층적 구조와 정보를 표현하며, 이를 제어할 수 있는 API (프로퍼티,메소드)를 제공하는 트리자료구조이다. - 이때 각각의 요소와 속성, 콘텐츠를 표현하는 단위를 "노드 (nod
mandelina-code.tistory.com
https://mandelina-code.tistory.com/59
[JS] DOM (2) - 노드 탐색 , 및 Text 조작
노드탐색 - 요소노드를 얻고, DOM트리의 노드를 옮겨다니며 탐색할 경우가 있다. - 노드탐색 프로퍼티는 모두 자체적으로 값을 갖진 않고 다른 데이터 프로퍼티 값을 읽거나 저장할 때 호출되는
mandelina-code.tistory.com
https://mandelina-code.tistory.com/62
[JS] DOM (3) - DOM 조작
DOM 조작 - DOM조작이란 새로운 노드를 생성하여 DOM에 추가하거나, 기존 노드를 삭제 또는 교체하는것을 말한다. - 성능에 영향을 주므로 최적화를 위해 주의하여 다뤄야한다. innerHTML - 요소
mandelina-code.tistory.com
https://mandelina-code.tistory.com/66
DOM(4) - attribute 조작 및 style조작
Attribute? - HTML 요소의 동작을 제어하기 위한 추가적인 정보를 제공한다. - 글로벌 어트리뷰트 :id , class ,style ,title ,lang ,hidden 등 - HTML 문서가 파싱될때 , 어트리뷰트 하나당 하나의 노드가 생성..
mandelina-code.tistory.com
'FE > JavaScript' 카테고리의 다른 글
| [JS] 이벤트 위임 (0) | 2022.05.22 |
|---|---|
| [JS] DOM (3) - DOM 조작 (0) | 2022.05.18 |
| [JS] DOM (1) - DOM이란? (0) | 2022.05.17 |
| [JS] JSON (0) | 2022.05.16 |
| [JS] Prototype (0) | 2022.05.16 |