[Javascript] 특정 자식 노드 찾기

 

Javascript를 이용하여

dom에서 특정 부모 노드가 가지는 특정 자식 노드를 찾는 방법입니다.

1. 부모 노드를 선택합니다.
2. 부모 노드에서 특정 자식 노드를 선택합니다.

 

 

부모 노드를 선택하거나,

특정 자식 노드를 선택할 때

getElementById(), getElementsByClassName(), querySelector() 등의

노드 선택 함수를 사용할 수 있습니다.

 

노드를 선택하는 방법은 지난 포스팅을 참조하세요.

[Javascript] 선택자, DOM 특정 요소(element) 찾기

 

   예제   

<ul id='fruit'>
  <li class='p1'>바나나</li>
  <li class='p2'>사과</li>
</ul>
<ul id='animal'>
  <li class='p1'>강아지</li>
  <li class='p2'>토끼</li>
</ul>

<div> ======== 결과 ======== </div>

// animal element 선택
const parent = document.getElementById('animal');

const p1 = parent.getElementsByClassName('p1');

// animal 중 p1 class 노드 값 찍기
document.write(p1.length); // 1
document.write('<br>');
document.write(p1[0].innerText); // 강아지

위 예제의 dom에는 'fruit', 'animal' 2개의 <ul>이 있습니다.

그리고, 그 2개의 <ul> 하위에는

'p1', 'p2' 클래스를 가지는 <li>가 각각 존재합니다.

여기서는 'animal' 노드 하위에 'p1' 클래스를 가지는 노드를 선택하려고 합니다.

'fruit' 노드 하위의 'p1' 클래스를 선택해서는 안됩니다.

 

const parent = document.getElementById('animal');

부모 노드를 먼저 선택합니다.

 

const p1 = parent.getElementsByClassName('p1');

클래스 이름으로 부모 노드 하위의 노드를 검색합니다.

동일한 클래스 이름은 여러번 중복될 수 있기 때문에

getElementsByClassName() 함수는 유사 배열 형태인 HTMLCollection을 리턴합니다.

 

p1.length;

p1[0].innerText;

'animal' 노드 하위의 'p1' 클래스 노드는 1건입니다.

그리고, 그 노드의 텍스트는 '강아지'입니다.

 

---

 

예제에서는 하위의 특정 노드를 선택하기 위해

getElementsByClassName() 메소드를 사용하였지만

getElementById()를 사용하여 id로 노드를 검색하거나,

getElementByTagName()을 사용하여 태그 이름으로 노드를 검색할 수도 있습니다.

querySelector(), querySelectorAll() 함수를 사용하여

id, 클래스 이름, 태그 이름 등 다양한 형태로 노드를 검색할 수도 있습니다.

자세한 방법은 아래의 지난 포스팅을 참조하세요.

[Javascript] 선택자, DOM 특정 요소(element) 찾기