#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씩 커진다

+ Recent posts