자바스크립트 DOM 프로퍼티 nextElementSibling으로 다음 요소 선택하기

Last Modified : 2017-04-30 / Created : 2017-04-30

16,304
View Count

주소 복사하기

자바스크립트 DOM 프로퍼티 nextElementSibling에 대하여 알아보겠습니다.

"다음 요소를 선택하고 싶다"

제이쿼리의 next(), prev()를 순수 자바스크립트로 구현할 수 없을까요? 이 해답을 일부 충족시켜주는 방법으로 nextElementSibling를 사용하는 것입니다. 다만 DOM level 3으로 IE 9 이상 및 최신 브라우저에서 구현이 가능합니다.

그래도 다음 요소를 선택하는 방법으로 이만한게 없겠죠? 아래는 사용 예제입니다.

# nextElementSibling 예제 알아보기
아래 예제는 버튼을 클릭하면 다음 요소의 텍스트를 모두 제거하는 간단한 예제입니다. 아래 코드를 봐주세요.

<button id="btn" onclick="emptyInput()">Empty all</button>
<input type="text" value="blah blah~" />

이제 버튼을 클릭하면 다음 요소를 비워야하겠죠?

function emptyInput() {
  var nextEle = document.getElementById('btn').nextElementSibling;
  nextEle.value = '';
}

이제 버튼을 클릭하면 다음 요소인 input 태그의 값이 사라지게 됩니다. 간단한 방법이군요 ~

# 알아두면 좋은 정보
비슷한 방법으로 nextSibling 프로퍼티도 있습니다. 다만 엘리먼트뿐만 아니라 텍스트노드 정보를 가져온다는 점이 다릅니다. 텍스트 노드를 대상으로 작업한다면 nextSibling을 사용하면 좋겠습니다.

아래의 글도 찾고 계시지 않나요?

php에서 http헤더 header request 정보를 얻는 방법은?

php 데이터 및 변수 타입을 알아내는 방법