以不同的方式訪問DOM元素

Question

我想在以下html文檔中訪問DOM的li2元素，但是即使我指向li2，我的訪問方法也無法正常工作。這個問題只是為了了解基本的DOM訪問方式。

<ol id="ol1">
    <li id="li1">
        <span id="span1">
            This is Text 1
        </span>
    </li>
    <li id="li2">
        <span id="span2">
            This is Text 2
         </span>
    </li>
    <li id="li3">
        <span id="span3">
            This is Text 3
        </span>
    </li>
</ol>

<div id="divContainer" ></div>

我使用以下每個liNode來附加divContainer，但是它不起作用。

window.onload= initall;

function initall(){
     var liNode = document.getElementById("li1").nextSibling; 

    //var liNode = document.getElementById("li3").previousSibling; 

    //var liNode = document.getElementsByTagName("span").item(2).parentNode.previousSibling; 

    //var liNode = document.getELementsByTagName("ol").childNodes.item(1).parentNode.childNodes.item(1).parentNode.childNodes.item(1); 

    //var liNode = document.getElementsByTagName("body").item(0).firstChild.firstChild.nextSibling;

    //var liNode = document.body.childNodes.item(0).lastChild.previousSibling;

    document.getElementById("divContainer").appendChild(liNode);
}

Answer 1

我相信您正在尋找的功能是nextElementSibling ，因為nextSibling將檢索文本節點，包括空格。

Answer 2

似乎您正在嘗試將<div>元素追加到<li id="li2">元素內。 如果是這樣，那您就倒退了。 我不確定為什么要嘗試獲取上一個或下一個元素而不是直接獲取li2 ，但是如果我理解正確，那么您可以這樣做：

var div = document.getElementById('divContainer');
var liNode = document.getElementById('li2');

liNode.appendChild(div);

---

或者，也許你正在試圖獲得的內容li2並將它放入divContainer 。 如果是這樣，請嘗試以下方法： jsFiddle

var div = document.getElementById('divContainer');
var liNode = document.getElementById('li2');

// firstChild gets you the text node after the li element (because of whitespace)
// nextSibling gets the next sibling of the text node, which is the span.
var newNode = liNode.firstChild.nextSibling.clone();
newNode.id = ''; // IDs should be unique on the page

div.appendChild(newNode);

Answer 3

這將獲得您要查找的元素：

 var liNode = document.getElementById("li1").nextSibling;
 while(liNode != null && liNode.tagName !="LI") liNode = liNode.nextSibling;

Answer 4

nextSibling的問題在於，大多數瀏覽器會將空白或新行視為文本節點，而Internet Explorer則不會。 這就是為什么當您嘗試使用nextSibling獲取下一個同級nextSibling ，會得到一個空的文本節點，而不是下一個<li>元素。

如果您的HTML代碼是這樣的：

<ol id="ol1">
    <li id="li1">
        <span id="span1">
            This is Text 1
        </span>
    </li><li id="li2">
        <span id="span2">
            This is Text 2
         </span>
    </li><li id="li3">
        <span id="span3">
            This is Text 3
        </span>
    </li>
</ol>

那么您的JavaScript代碼將可以立即用於nextSibling 。

但是，如果您不想更改HTML代碼，則可以使用nextElementSibling ，它不會檢索那些文本節點。