노드 찾기에 대해 알아보기 전에 DOM에 대해 먼저 알아봅시다.
DOM(Document Object Model)이란?
- 브라우저가 HTML 문서를 객체의 트리 구조로 표현한 모델(부모-자식 관계로 연결된 계층 구조)
- 브라우저는 웹서버에서 다운로드 받은 텍스트 기반의 HTML문서를 파싱하면서 HTML 문서의 각 구성 요소를 트리 구조의 객체로 만들어 자바스크립트로 제공한다.
- 노드(Node): DOM 트리 구조의 모든 구성원은 각각의 객체로 인식되며 이러한 객체 하나 하나를 노드라고 한다.
- DOM API를 이용하면 정적인 HTML 문서를 자바스크립트로 동적으로 제어하는게 가능하다.(특정 요소를 찾거나 생성, 삽입, 삭제, 이동 등)
DOM API(DOM Application Programming Interface)
- DOM을 조작할 수 잇는 속성과 메서드들의 집합
- querySelector() : 요소 찾기
- createElement() : 요소 생성
- remove() : 요소 삭제
- appendChild() : 요소 삽입, 이동
- ...
Doument 객체
- 브라우저의 최상위 객체는 window, 웹페이지의 최상위 객체는 window.document(window 생략 가능)
- HTML 문서 전체를 나타낸다.
- 모든 DOM 조작의 시작점
주요 노드
- DOM에는 12 종류의 노드가 존재하며 주요 노드는 다음과 같다.
- 문서 노드(document node): 문서 전체
- 요소 노드(element node): HTML 태그
- 속성 노드(attribute node): 태그의 속성
- 텍스트 노드(text node): 태그 내의 텍스트 내용
- ...
| 종류 | 설명 | nodeName | nodeType | nodeValue |
|---|---|---|---|---|
| 문서 노드 | 문서 전체 | #document | 9 | null |
| 요소 노드 | 태그 | 태그의 이름 | 1 | null |
| 속성 노드 | 요소의 속성 | 속성의 이름 | 2 | 속성의 값 |
| 텍스트 노드 | 요소의 내용 | #text | 3 | 문자열 값 |
이제 노드 찾기를 알아 보기 전에 알아야 할 내용을 살펴 봤으니 본격적으로 노드 찾기에 대해 알아봅시다.
노드 찾기
1. 태그의 id로 노드 찾기
- document.getElementById(id) : HTML 문서에서 해당 id를 가진 요소를 찾아서 반환한다.
❗️ id로 선택한 요소는 단 하나만 반환한다.❗️
<!-- HTML 예제 -->
<html>
<head>
<title>선수 명단</title>
</head>
<body>
<h1>선수 명단</h1>
<p>대한민국 국가대표 팀에 포함된 선수</p>
<ul id="player-list" class="list">
<li>손흥민</li>
<li>김민재</li>
<li>이강인</li>
</ul>
</body>
</html>// id가 player-list인 ul 요소를 선택하기
const playerList = document. getElementById('player-list');2. 태그명으로 노드 찾기
- document(또는)요소노드.getElementsByTagName(tagName) : 문서 전체 또는 지정한 요소노드의 하위 모든 요소를 대상으로 태그명에 해당하는 요소노드를 NodeList(유사배열객체)로 반환한다.
❗️태그명에 해당하는 요소노드가 한 개라도 객체로 반환한다.❗️
// 위에서 선택한 ul 하위의 li 태그명을 가진 요소노드를 유사배열 객체로 반환
const liList = buyList.getElementsByTagName('li');3. 트리구조로 노드 찾기
부모/자식과 관련된 노드의 속성
- childNodes : 자식 노드(요소, 텍스트, 주석 등의 노드)의 목록이 저장된 NodeList(유사 배열 객체) 반환
❗️요소, 텍스트, 주석 등을 모두 반환❗️ - children : 자식 요소 노드의 목록이 저장된 HTMLCollection(유사 배열 객체) 반환
❗️요소만 반환❗️
- firstChild : 첫 번째 자식 노드 반환
- firstElementsChild : 첫 번째 자식 요소 노드 반환
- lastChild : 마지막 자식 노드 반환
- lastElementsChild : 마지막 자식 요소 노드 반환
- parentNode : 부모 노드 반환
- parentElement : 부모 요소 노드 반환
const playerList = document.getElementById('player-list');
const firstPlayer = playerList.firstElementChild;
const lastPlayer = playerList.lastElementChild;
const liList = playerList.childNodes;형제와 관련된 노드의 속성
- previousSibling : 바로 앞의 형제 노드(요소, 텍스트, 주석 등의 노드)
- previousElementSibling : 바로 앞의 형제 요소 노드
- nextSibling : 바로 뒤의 형제 노드(요소, 텍스트, 주석 등의 노드)
- nextElementSibling : 바로 뒤의 형제 요소 노드
const playList = document.getElementById('player-list');
const secondPlayer = playerList.children[1]; // 유사 배열 객체로 반환하기 때문에 인덱스로 접근
const firstPlayer = secondPlayer.previousElementSibling;
const lastPlayer = secondPlayer.nextElementSibling;class 속성으로 노드 찾기
- document.getElementsByClassName(className) : 지정한 클래스명을 가진 요소 노드의 목록을 반환(NodeList, 유사 배열 객체)
❗️클래스는 여러 개일 수도 있기 때문에 여러 개 선택 가능❗️
const playerList = document.getElementsByClassName('list')[0];
// list라는 클래스를 가진 요소 중 첫 번째 요소를 반환CSS 셀렉터로 노드 찾기
- Selector : CSS에서 사용하는 노드 선택 구문
- document.querySelector(selector) : 지정한 selector 구문에 매칭되는 노드 목록 중 첫번째 노드 반환 (하나만 선택할 때 사용)
- document.querySelectorAll(selector) : 지정한 selector 구문에 매칭되는 노드 목록을 반환(NodeList, 유사 배열 객체/ 여러 개 선택할 때 사용)
❗️querySelectorAll로 선택한 NodeList는 유사 배열 객체이지만, forEach 메서드 사용 가능❗️
const playerList = document.querySelector('.list');
const playerList = document.querySelector('#buy-list');
const playerList = document.querySelectorAll('ul')[0];
// querySelectorAll의 경우 다수가 선택되기 때문에 하나에만 접근하기 위해 인덱스를 사용이상 노드 찾기에 대해 알아봤습니다.
하나만 선택할지 여러 개를 선택할지,
혹은 자식 노드를 선택할지 자식 요소 노드를 선택할지에 따라
사용해야 하는 속성이 다르기 때문에 주의하여 사용할 필요가 있습니다.
추가적으로 요소 노드 내부 컨텐츠를 제어하는 것도 알아보겠습니다!
요소노드의 내부 콘텐츠 제어
innerHTML과 outerHTML
- elem.innerHTML : elem의 내부 HTML 코드의 값을 조회하거나 수정 (elem 자신은 제외)
- elem.outerHTML : elem 자신을 포함하여 elem 내부 HTML 코드의 값을 조회하거나 수정
<ul id="nct-wish" class="members">
<li>시온</li>
<li>리쿠</li>
<li>유우시</li>
<li>재희</li>
<li>료</li>
<li>사쿠야</li>
</ul>const memberList = document.querySelector('#nct-wish');
console.log(memberList.innerHTML);
// '\n <li>시온</li>\n <li>리쿠</li>\n <li>유우시</li>\n <li>재희</li>\n <li>료</li>\n <li>사쿠야</li>\n '
console.log(memberList.outerHTML);
// '<ul id="nct-wish" class="members">\n <li>시온</li>\n <li>리쿠</li>\n <li>유우시</li>\n <li>재희</li>\n <li>료</li>\n <li>사쿠야</li>\n </ul>'textContent와 innerText
- elem.textContent : elem의 내부 텍스트 노드의 소스코드 값 그대로 조회하거나 수정
- elem.innerText : elem의 내부 텍스트 노드의 브라우저에 실제 보이는 값만 조회하거나 수정 (화면에 보이지 않는 요소는 제외)
<ul id="song-list" class="list">
<li>Steady<span>✔️</span></li>
<li>WISH<span hidden>✔️</span></li>
<li>Songbird<span>✔️</span></li>
</ul>const secondLi = document.querySelector('#song-list > li:nth-child(2)');
console.log(secondLi.textContent); // WISH✔️ 출력
console.log(secondLi.innerText); // WISH만 출력이상 요소 노드의 콘텐츠 내부를 제어하는 방법까지 알아 보았습니다.
요소 노드의 콘텐츠 내부를 제어할 때에는 어떤 것 까지 포함하여 제어하고 싶은지에 따라 주의하여 사용할 필요가 있습니다. 이상입니다.
웹 프론트엔드 개발자를 꿈꾸고 있습니다.