1

我想在下面的 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);
}
4

4 回答 4

1

我相信您正在寻找的功能是nextElementSibling，因为nextSibling将检索文本节点，包括空格。

于 2012-12-31T15:14:21.703 回答
0

看起来您正在尝试将元素附加到<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);
于 2012-12-31T14:39:21.223 回答
0

这将获得您正在寻找的元素：

 var liNode = document.getElementById("li1").nextSibling;
 while(liNode != null && liNode.tagName !="LI") liNode = liNode.nextSibling;
于 2012-12-31T14:44:43.533 回答
0

问题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 代码，你可以使用nextElementSiblingwhich 不会检索那些文本节点。

于 2012-12-31T14:48:58.730 回答