js nextSibling 속성과 PreviousSibling 속성 개요 및 사용법 참고사항_기본지식

1: nextSibling 속성
이 속성은 현재 노드의 다음 노드를 나타냅니다(후속 노드는 현재 노드와 동일한 수준에 속함). 이후 동일한 수준의 노드가 없으면 null 반환됩니다.
이 속성의 실행 결과는 브라우저마다 동일하지 않다는 점에 유의해야 합니다. 다음 예를 참조하세요.
먼저 예를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

표면적으로 이 객체의 구조는 div의 nextSibling이 단 2개의 항목 - 2개의 입력 노드. 그러나 실제로는 /n,input,/n,input,/n의 5개 항목이 있습니다. 이는 입력이 다양한 양식 입력 컨트롤을 생성하는 레이블로 사용되기 때문입니다. 버튼, 체크박스, 라디오 등을 생성하든 관계없이 IE는 자동으로 끝에 1바이트 공백을 생성합니다.
IE는 노드 사이에 생성된 공백 문서 노드(예: 줄 바꿈 문자)를 건너뛰지만 Mozilla는 이를 수행하지 않습니다. FF는 공백 구분 및 줄 바꿈과 같은 레이아웃 요소를 노드 읽기로 처리하므로 다음 노드 요소에서 IE에서 nextSibling을 사용하여 읽을 수 있는 내용은 FF: nextSibling.nextSibling에서 다음과 같이 작성해야 합니다.
opera와 safari는 FF와 동일한 방식으로 nextSibling을 처리합니다.


2: PreviousSibling 속성 이 속성은 nextSibling 속성과 반대 효과를 갖습니다. 예: someTagObject.nextSibling.previousSibling은 실제로 태그 요소 자체를 반환하지만 전제는 다음과 같습니다. 태그 요소 뒤에 형제 요소가 있어야 하며, 그렇지 않으면 null이 반환됩니다.


3: nextSibling 또는 PreviousSibling을 통해 얻은 HTML 태그 요소 개체에 속성 문제가 있습니다. 일반적으로 태그 이름은 nextSibling.nodeName 또는 nextSibling.nodeType을 통해 먼저 얻습니다. type이면 nextSibling.nodeName = #text이면 해당 텍스트 값은 nextSibling.nodeValue를 통해 획득되고, 그렇지 않으면 해당 속성은 nextSibling.innerHTML과 같은 다른 공통 레이블 요소 속성을 통해 획득될 수 있습니다.