반응형
javascript nextSibling nextElementSibling 차이
nextSibling, nextElementSibling 모두 같은 노드 레벨의 다음 값을 가져옵니다.
둘의 차이는
nextSibling은 공백이든, 텍스트든 가리지 않고 다음에 있는 것을 가져오게 되고,
nextElementSibling 은 Element(요소)만 가져오게 됩니다.
예를들어 아래와 같은 HTML 코드가 있을 경우
<html>
<div id="a"></div>
nextSibling테스트
<div id="b"></div>
</html>
nextSibling과 nextElementSibling 의 결과를 보겠습니다.
var aDiv = document.getElementById("a");
console.log(aDiv.nextSibling); //nextSibling테스트
console.log(aDiv.nextElementSilbing) //<div id="b"></div>
위와 같은 차이가 발생하게됩니다.
각각의 용도에 맞게 사용하도록 합시다!
반응형
'Programing > JavaScript' 카테고리의 다른 글
| javascript 이벤트 버블링 방지 이벤트 중복 방지 / 이벤트 버블링, 캡처링 (0) | 2021.04.13 |
|---|---|
| iframe contentDocument contentWindow 차이 (1) | 2021.03.08 |
| SVG 파일 읽어 DOM 객체로 변환, SVG 내용변경 후 다운로드 (0) | 2020.11.13 |
| prototype chain 에 대하여, 상속의 개념, 중복을 줄이자! (0) | 2020.11.04 |
| javascript 의 상속 첫번째 prototype 기반의 상속 (0) | 2020.10.27 |
댓글