3 
<html>
  <head>

    <title></title>
    <script type="text/javascript"><!--
function test2() {
  var val2 = document.getElementById("ex2").childNodes[1].childNodes[0].nodeValue;
  alert(val2);
}
--></script>

  </head>
  <body>
        <div id="ex2">Web courses - <span>http://coursesweb.net</span> - lessons, tutorials</div>
<a href="#" onclick="test2()" title="childNodes example">Test 2</a>
  </body>
</html>

上記のアラートhttp://coursesweb.net。

しかし、追加<p>Some text</p>して追加しようとすると、機能childNodes[2]しません。

ChildNodeこのコードとコンセプトについても説明してください。

4

3 に答える 3

3

元のクエリをトレースすると、次のdocument.getElementById("ex2").childNodes[1].childNodes[0].nodeValue;ことがわかります。

document.getElementById("ex2")=><div id="ex2">Web courses -<span>http://coursesweb.net</span> - lessons, tutorials</div>

textNode「Web講座」が最初のノードなので

.childNodes[1]=><span>http://coursesweb.net</span>

.childNodes[0]=>テキストノード"http://coursesweb.net"

.nodeValue=>"http://coursesweb.net"

追加する場合は<p>Some text</p>、元の ex2 文字列を作成します。

<div id="ex2">Web courses - <span>http://coursesweb.net</span><p>Some text</p> - lessons, tutorials</div>

今 document.getElementById("ex2").childNodes[2].childNodes[0].nodeValue;=>"Some text"

于 2013-11-08T15:38:21.227 に答える
1

childNodes プロパティは、ノードの子ノードのコレクションを NodeList として返します。

ヒント: length プロパティを使用して子ノードの数を決定すると、すべての子ノードをループして、必要な情報を抽出できます。

この JavaScript では、id ex2 の div に子ノードがあり、その値を取得するため、 " http://coursesweb.net " が返されます。

于 2013-11-08T15:39:05.327 に答える
1

childNodes には注意してください。その内容は、IE 8 (またはそれ以下) やその他のブラウザーを使用しているかどうかによって異なります。

Firefox やその他のほとんどのブラウザーは、空の空白や改行をテキスト ノードとして扱いますが、Internet Explorer はそうしません。

http://quirksmode.org/dom/core/#t70

つまり、2 つのノード間にスペースまたは改行を追加すると、一部のブラウザでは、2 つのノードが childNodes で隣り合っているか、空のノードで区切られます。

ファイアフォックスの場合:

<div>hey</div> <p>Some text</p> // childNodes[0] : hey, childNodes[1] : some text

と同じ結果は得られません

<div>hey</div>
<p>Some text</p> // childNodes[0] : hey, childNodes[1] : nothing, childNodes[2] : some text

Internet Explorer では、どちらも同じです (childNodes[0] : ちょっと、childNodes[1] : テキスト)

可能であれば、jQuery .find() を使用して、指定された明示的な識別子を直接掘り下げることをお勧めします。

しかし、既存の DOM ツリーをイントロスペクトする必要がある場合は、この煩わしい事実に対処する必要があります。子ノードを取得する最良の方法を参照してください

于 2013-11-08T16:08:34.877 に答える