[DOM]JavaScript로 HTML 형제 요소(태그)에 접근하기

형제 요소(태그) 선택

먼저, JavaScript를 사용하여 HTML 형제 요소(태그)에 접근하려면 해당 요소를 선택해야 합니다. 아래 코드는 class="two"를 가진 <li> 태그를 선택합니다.

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

앞에 있는 형제 요소(태그)에 접근

HTML 요소의 앞에 있는 형제 요소(태그)에 접근하려면 previousElementSibling 메서드를 사용합니다. 아래의 코드는 litag 요소의 앞에 있는 형제 요소의 내용을 가져옵니다.

let siblingPre = litag.previousElementSibling.innerHTML;
console.log("siblingPre", siblingPre);

뒤에 있는 형제 요소(태그)에 접근

HTML 요소의 뒤에 있는 형제 요소(태그)에 접근하려면 nextElementSibling 메서드를 사용합니다. 아래의 코드는 litag 요소의 뒤에 있는 형제 요소의 내용을 가져옵니다.

let siblingNext = litag.nextElementSibling.innerHTML;
console.log("siblingNext", siblingNext);

이러한 방식으로 JavaScript를 사용하여 HTML 요소의 형제 요소(태그)에 접근하고 내용을 가져올 수 있으며, 웹 페이지의 요소 간의 관계를 조작할 때 유용하게 활용할 수 있습니다.