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>

divContainer を追加するために次の各 liNode を使用しましたが、機能しませんでした。

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

nextSiblingは空白を含むテキストノードを取得するため、探している関数はnextElementSiblingであると思います。

于 2012-12-31T15:14:21.703 に答える
0

これにより、探している要素が取得されます。

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

の問題nextSiblingは、ほとんどのブラウザが空の空白または新しい行をテキストノードとして扱うのに対し、InternetExplorerはそうではないことです。そのため、次の兄弟を取得しようとすると、次の要素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これらのテキストノードを取得しないものを使用できます。

于 2012-12-31T14:48:58.730 に答える
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 に答える