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获取下一个兄弟时，您将获得一个空文本节点而不是下一个<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，而不会检索这些文本节点。

以不同的方式访问DOM元素

4 个答案: