[DOM]JavaScript를 사용하여 HTML 자식, 부모 요소 접근하기

자식 요소 선택

먼저 JavaScript를 사용하여 HTML 자식 요소에 접근하기 위해 해당 요소를 선택해야 합니다. 아래 코드는 <ul> 요소를 선택합니다.

let ulTag = document.querySelector("ul");

특정 자식 요소 접근

JavaScript의 children 속성을 사용하면 특정 자식 요소에 접근할 수 있습니다. 예를 들어 아래코드는 2번째와 3번째 <li> 요소의 텍스트를 가져옵니다.

let two = ulTag.children[1].innerHTML; // 2번째 <li>의 텍스트
let three = ulTag.children[2].innerHTML; // 3번째 <li>의 텍스트

첫 번째와 마지막 자식요소 접근

또한 firstElementchild 와 lastElementchild를

let one = ulTag.firstElementChild.innerHTML; // 첫 번째 <li>의 텍스트
let last = ulTag.lastElementChild.innerHTML; // 마지막 <li>의 텍스트

부모 요서 선택

먼저 JavaScript를 사용하여 HTML 부모 요소에 접근하려면 해당 자식 요소를 선택해야 합니다. 아래의 코드는 class=two를 가진 <li> 태그를 선택합니다.

let litag = document.querySelector(".two");

부모 요소 접근

자식 요소의 부모 요소에 접근하려면 parentElement 메서드를 사용합니다. 아래의 코드는 litag 요소의 부모요소에 접근하고 그 결과를 콘솔에 출력합니다

let parent = litag.parentElement;
console.log("parent", parent);

 

JavaScript를 사용하여 HTML 요소의 자식,부모 요소에 접근하고 내용을 가져올 수 있으며 웹페이지를 동적으로 제어하는데 유용하게 활용할 수 있습니다.