요소 조상 가져오기

소개

이 랩에서는 JavaScript 를 사용하여 문서 루트에서 주어진 요소까지의 모든 조상 요소를 검색하는 방법을 살펴봅니다. 여기에는 Node.parentNode를 사용하여 조상 트리를 탐색하고, 각 새로운 조상을 배열의 시작 부분에 추가하기 위해 Array.prototype.unshift()를 사용하는 것이 포함됩니다. 이 랩이 끝나면 JavaScript 를 사용하여 요소 조상을 검색하는 방법에 대한 확실한 이해를 갖게 될 것입니다.

요소 조상 검색

문서 루트에서 지정된 요소까지의 요소 조상을 검색하려면 다음 단계를 따르세요.

1. 터미널/SSH 를 열고 node를 입력하여 코딩 연습을 시작합니다.
2. Node.parentNode와 while 루프를 사용하여 요소의 조상 트리를 위로 이동합니다.
3. Array.prototype.unshift()를 사용하여 각 새로운 조상을 배열의 시작 부분에 추가합니다.

위 단계를 구현하는 샘플 코드는 다음과 같습니다.

const getAncestors = (el) => {
  let ancestors = [];
  while (el) {
    ancestors.unshift(el);
    el = el.parentNode;
  }
  return ancestors;
};

특정 요소의 조상을 검색하려면 querySelector() 메서드를 사용하여 요소를 선택하고 이를 getAncestors() 함수에 인수로 전달합니다. 예를 들어:

getAncestors(document.querySelector("nav"));
// [document, html, body, header, nav]

이렇게 하면 문서 루트에서 요소 자체까지의 순서로 지정된 요소의 모든 조상 배열이 반환됩니다.

요약

축하합니다! 요소 조상 가져오기 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 실력을 향상시킬 수 있습니다.