#1. HTML 탐색하기
1. 부모 요소 탐색
- HTML 태그 예시
<ul class="list-group">
<li class="list-group-item">
<a href="#" class="find-parent" data-color="red">parent</a>
<a href="#" class="find-parents" data-color="blue">parents</a>
</li>
</ul>
1) 부모 요소 찾기
- parentElement 속성을 통해 지정된 요소의 부모 요소를 반환한다.
- parentNode와의 차이점은 부모 노드가 요소 노드가 아닌 경우 parentElement는 null을 반환한다.
// HTML의 클래스 요소를 가져와 click 이벤트를 지정한다.
document.querySelector(".find-parent").addEventListener("click", e => {
// click 이벤트 발생시 link의 href, form의 action 으로 페이지가 이동하는 것을 방지
e.preventDefault();
// 이벤트가 발생한 자기 자신을 조회하여 가져온다.
const current = e.currentTarget;
// 클릭된 자신의 부모요소를 조회 -> 여기서는 클릭한 링크가 포함된 li 태그의 객체
const parent = current.parentElement;
// 부모의 배경 색상을 dataset으로 변경
parent.style.backgroundColor = current.dataset.color;
});
// 클릭하면 부모 요소(li태그)의 배경이 red로 변한다.
2) 조상 요소 찾기
- closest(선택자) 메소드를 통해 자신부터 부모 요소 단위로 조건에 만족할 때 까지 탐색한다.
- 지정한 선택자에 가장 가까운 조건에 만족하는 조상(부모) 요소가 반환된다.
- 조건에 만족한 요소가 없으면 null 을 반환한다.
// HTML의 클래스 요소를 가져와 click 이벤트를 지정한다.
document.querySelector(".find-parents").addEventListener("click", e => {
// click 이벤트 발생시 link의 href, form의 action 으로 페이지가 이동하는 것을 방지
e.preventDefault();
// 이벤트가 발생한 자기 자신을 조회하여 가져온다.
const current = e.currentTarget;
// 상위 요소들 중에서 주어진 selector를 충족하는 가장 가까운 요소를 검색 -> IE 지원x
const parents = current.closest(".list-group");
// 조상의 배경 색상을 변경
parents.style.backgroundColor = current.dataset.color;
});
// 클릭하면 조상 요소(ul태그)의 배경이 blue로 변한다.
2. 자식 요소 탐색
자식 요소 찾기
- children 속성을 통해 지정된 요소의 자식 요소를 반환한다.
- 불필요한 요소를 제거하고 하위 요소만 조회한다.
※ childNodes 는 지정된 요소의 텍스트와 하위 Element를 모두 조회하는데, 문제는 줄바꿈한 것도 텍스트로 인식한다. (비추)
- HTML 태그 예시
<ul id="list">
<li id="one">One</li>
<li id="two">
Two
<ul>
<li id="a">A</li>
<li id="b">B</li>
<li id="c">C</li>
<li id="d">D</li>
</ul>
</li>
<li id="three">Three</li>
<li id="four" class="blue">Four</li>
</ul>
<button type="button" id="btn">Two의 하위 자식들</button>
- Javascript
// HTML의 버튼 아이디를 가져와 클릭 이벤트를 지정한다.
document.querySelector("#btn").addEventListener("click", e => {
// children으로 획득하는 HTML 컬렉션은 배열과 비슷한 특성을 갖지만,
// 그 자체가 배열은 아니기 때문에 배열의 탐색 기능을 활용하기 위해서는 배열로 변환해야 한다.
const childrenArr = Array.from(document.querySelector("#two > ul").children);
// 반복문을 통해 ul 태그안의 모든 태그를 탐색
childrenArr.forEach((v,i) => {
v.style.color = "red";
});
});
// 버튼을 누르면 Two 하위에 있는 A,B,C,D 가 빨간색으로 변한다.
3. 이전, 다음 요소 탐색
- HTML 태그 예시
<div class="container">
<span>1</span>
<span>2</span>
<span>3</span>
<span>
<button type="button" id="btn1">Prev</button>
<button type="button" id="btn2">Next</button>
</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
1) 이전 요소 찾기
- previousElementSibling 속성을 통해 부모 요소의 바로 이전 요소를 반환한다.
// 변수 size1 지정
let size1 = 16;
// HTML의 버튼 아이디를 가져와 클릭 이벤트를 지정한다.
document.querySelector("#btn1").addEventListener("click", e => {
// 클릭 할 때 마다 size1 변수가 2씩 증가
size1 += 2;
// 클릭된 버튼 자신
const current = e.currentTarget;
// 자신의 부모에 대한 '이전' 요소의 style 변경 (뒤에 단위를 붙여줘야한다)
current.parentElement.previousElementSibling.style.fontSize = size1 + "px";
});
// 버튼을 클릭하면 3의 사이즈가 2씩 커진다
2) 다음 요소 찾기
- nextElementSibling 속성을 통해 부모 요소의 바로 다음 요소를 반환한다.
// 변수 size2 지정
let size2 = 16;
// HTML의 버튼 아이디를 가져와 클릭 이벤트를 지정한다.
document.querySelector('#btn2').addEventListener("click", e => {
// 클릭 할 때 마다 size2 변수가 2씩 증가
size2 += 2;
// 클릭된 버튼 자신
const current = e.currentTarget;
// 자신의 부모에 대한 '다음' 요소의 style 변경 (뒤에 단위를 붙여줘야한다)
current.parentElement.nextElementSibling.style.fontSize = size2 + "px";
});
// 버튼을 클릭하면 4의 사이즈가 2씩 커진다