JavaScript의 ParentNode 속성

JavaScript 프로그래밍 언어의 ParentNode 속성은 용도와 함께 이 문서에서 설명 및 표시됩니다.

JavaScript의 ParentNode 개요

ParentNode의 children 속성은 호출된 노드의 모든 자식 구성 요소를 포함하는 라이브 HTMLCollection을 제공하는 읽기 전용 속성입니다.

이 컬렉션은 속성이 호출될 때 반환되며 본문은 각 HTML 요소의 일부 자식 노드입니다.

또한 요소의 속성에는 읽기 전용 액세스 권한만 있으므로 parentNode 속성 유형에서 개별화된 기능이 허용되는지 여부에 관계없이 어떤 식으로든 노드를 편집할 수 없습니다.

n번째 자식에서 부모 노드를 가져오려면 액세스해야 하는 부모의 자식 노드를 알아야 합니다. 또한 필요한 상위 노드와 액세스 권한이 있는 하위 노드 사이에 존재하는 요소의 수를 알아야 합니다.

우리는 첫 번째 부모를 찾을 때 자식에서 부모로 이동할 때 반대 순서로 화면에서 현재 활성화된 모든 구성 요소를 포함하는 JavaScript의 이벤트에 액세스할 수 있습니다.

필요한 부모 노드를 찾기 위해 먼저 이벤트를 인수로 받아들이는 함수를 생성한 다음 이벤트를 반복합니다.

for (var i = event.length; i >= 0; i--) {
}

이제 이벤트와 루프가 이벤트 배열의 모든 요소를 반복하도록 설정되었으므로 변수를 만들고 이름을 storedValue로 지정합니다.

그런 다음 이벤트 배열에 있는 요소를 추적할 수 있도록 하위 배열을 변수에 저장합니다.

var storedValue = event.children[i];

루프를 통과하면 필요한 parent 요소가 storedValue 변수에 저장됩니다. 저장된 값을 parent 변수에 넣습니다.

parent = storedValue;

함수의 전체 코드는 다음과 같습니다.

function getNthParent(event) {
  for (var i = event.length; i >= 0; i--) {
    var storedValue = event.children[i];
    console.log(storedValue);
  }
  parent = storedValue;
}

.를 사용하여 parentNode의 체인을 생성할 필요가 없는 parentNode를 찾기 위한 또 다른 방법으로 while 루프를 활용할 수 있습니다. 운영자.

함수를 구성하고 이름을 nthParent로 지정합니다. 자식 노드와 부모 노드 사이에 존재하는 요소 수로 요소와 숫자 n을 공급합니다.

while (n-- && element) {
  element = element.parentNode;
}

이 코드는 상위 노드에 도달할 때까지 노드 트리를 위로 이동합니다.

루프 반복이 완료된 후 루프의 각 주기 동안 할당된 요소 변수에서 필요한 상위 노드에 액세스할 수 있습니다.

상위 노드를 찾아 요소 변수에 할당한 이전 단계를 완료한 후 이제 요소를 반환합니다. while 루프를 포함한 전체 코드 라인이 여기에 표시됩니다.

function nthParent(element, n) {
  while (n-- && element) element = element.parentNode;
  return element;
}

위에서 설명한 기술은 계층 구조의 요소를 통과하는 간단한 루프로, 자식부터 시작하여 위로 올라갑니다.

재귀 방법은 코드에서 루프를 사용하지 않고도 상위 노드에 도달하는 데 도움이 되는 전략 중 하나입니다.

이 방법에서는 직속 부모 노드를 가져오는 함수를 작성한 다음 이전 단계에서 얻은 부모 노드에서 해당 함수를 호출합니다. 이 프로세스는 요소 수가 0이 될 때까지 반복됩니다.

다음은 함수 선언을 위한 코드와 전달해야 하는 매개변수입니다.

function getNthParent(elem, n) {}

이 경우 자식과 부모 사이의 요소와 항목 수가 매개 변수입니다.

이 시점에서 필요한 것은 우리가 사용하기 위해 필요한 부모 노드를 다시 가져오는 조건입니다.

return n === 0 ? elem : getNthParent(elem.parentNode, n - 1);

이 코드는 n의 값이 0과 같은지 확인합니다. 함수는 명시된 조건이 충족되면 요소를 반환합니다.

그렇지 않은 경우 함수는 제공된 요소의 상위 노드에서 자체를 호출하고 n의 값을 1씩 감소시켜 0이 되고 조건이 충족되어 필요한 부모 노드를 반환합니다.

함수가 완료되면 관심 있는 함수를 실행하고 반환된 부모 노드를 아래와 같은 방식으로 변수에 저장해야 합니다.

var child = getNthparent(someElement, 4);

우리가 제공하는 자식은 이 특정 시나리오에서 “4번째” 부모 요소에 대한 액세스를 제공합니다.

이 문제를 해결하기 위한 재귀 기법의 전체 코드는 여기에서 볼 수 있습니다.

function getNthParent(elem, n) {
  return n === 0 ? elem : getNthParent(elem.parentNode, n - 1);
}