XML DOM nextSibling 속성

Element 객체

정의 및 사용법

nextSibling 속성은 선택된 요소의 다음 동일 수준 노드(동일한 트리 수준의 다음 노드)를 반환합니다.

해당 노드가 존재하지 않으면 이 속성은 null을 반환합니다.

문법

elementNode.nextSibling
팁 및 노트

주의:Firefox와 대부분의 다른 브라우저는 공백이나 줄 바꿈을 텍스트 노드로 간주하지만, Internet Explorer는 그렇지 않습니다. 따라서 아래 예제에서는 다음 형제 노드의 노드 타입을 확인하는 함수를 사용합니다.

요소 노드의 nodeType가 1이므로 다음 형제 노드가 요소 노드가 아니면 다음 노드로 이동하여 해당 노드가 요소 노드인지 확인합니다. 이 작업은 다음 동일 수준 노드(요소 노드여야 합니다)를 찾을 때까지 계속됩니다. 이렇게 하면 모든 브라우저에서 결과가 올바르게 표시됩니다.

힌트:브라우저 간 차이에 대한更多信息를 알고 싶다면, XML DOM 강의의 DOM 브라우저 장을 방문하세요.

예제

예제 1

아래 코드는 "books.xml"을 xmlDoc에 로드하고, 첫 번째 <title> 요소의 후자同级 노드를 가져옵니다:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
   if (this.readyState == 4 && this.status == 200) {
       myFunction(this);
   {}
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
// 확인 후자同级 노드가 요소 노드인지
function get_nextsibling(n) {
    var x = n.nextSibling;
    while (x.nodeType != 1) {
        x = x.nextSibling;
    {}
    return x;
{}
function myFunction(xml) {
var xmlDoc = xml.responseXML;
    var x = xmlDoc.getElementsByTagName("title")[0];
    var y = get_nextsibling(x);
    document.getElementById("demo").innerHTML = x.nodeName + " = " +
    x.childNodes[0].nodeValue +
    "<br>Next sibling: " + y.nodeName + " = " +
    y.childNodes[0].nodeValue;
{}

직접 테스트해 보세요

예제 2

사용 previousSibling 메서드로, 노드의 전자同级 노드를 가져옵니다:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    {}
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
// 확인 전자同级 노드가 요소 노드인지
function get_previoussibling(n) {
    var x = n.previousSibling;
    while (x.nodeType != 1) {
        x = x.previousSibling;
    {}
    return x;
{}
function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    var x = xmlDoc.getElementsByTagName("author")[0];
    var y = get_previoussibling(x);
    document.getElementById("demo").innerHTML = x.nodeName + " = " + 
    x.childNodes[0].nodeValue +
    "<br>이전 형제: " + y.nodeName + " = " + 
    y.childNodes[0].nodeValue;
{}

직접 테스트해 보세요

Element 객체