javascript - JavaScriptの次の兄弟関数

Question

<html>
<body>
<script language="JavaScript">
function function1() {
   var m = document.getElementById("myNodeOne").nextSibling;
   m.innerHTML = "asdfsdf";
}
</script>
<p>This PARAGRAPH has two nodes, 
    <b id="myNodeOne">Node One</b>, and 
    <b id="myNodeTwo">Node Two</b>.
</p>
<p></p>
<button onclick="function1();">Node One has a Next Sibling</button>
</body>
</html>

これにより、2 番目の段落タグに「asdfsdf」が出力されます。しかし、それは機能していません。

score 16 · Accepted Answer

nextElementSibling代わりに使用してみてくださいnextSibling

function function1() {
var m = document.getElementById("myNodeOne").nextElementSibling;
m.innerHTML = "asdfsdf";
}

HTML要素のみをフェッチするため、機能します。

score 3 · Accepted Answer

いくつかの問題:

変数 ma DOM 要素に格納してから m プロパティを設定すると、DOM はまったく影響を受けません。
document.getElementById("myNodeOne").nextSibling は myNode2 ではなく, and、2 つのノード間のテキスト要素です。

これを試して：

function function1() {
   document.getElementById("myNodeOne").parentNode.nextSibling.nextSibling.innerHTML = "asdfsdf";
}

デモ

score 2 · Accepted Answer

nextSiblingは、このノードの直後のノードを返します。そのようなノードがない場合は、null を返します。

直後のノードは TEXT_NODE なので、それを返します。すべての nodeType は次のとおりです。

Node.ELEMENT_NODE == 1
Node.ATTRIBUTE_NODE == 2
Node.TEXT_NODE == 3
Node.CDATA_SECTION_NODE == 4
Node.ENTITY_REFERENCE_NODE == 5
Node.ENTITY_NODE == 6
Node.PROCESSING_INSTRUCTION_NODE == 7
Node.COMMENT_NODE == 8
Node.DOCUMENT_NODE == 9
Node.DOCUMENT_TYPE_NODE == 10
Node.DOCUMENT_FRAGMENT_NODE == 11
Node.NOTATION_NODE == 12

ノードタイプでフィルタリングする方法の例を次に示します。

function function1() {
   var m = document.getElementById("myNodeOne").nextSibling;

  if (m.nodeType != 1) {
    m = m.nextSibling;
  }
   m.innerHTML = "asdfsdf";
}

score 1 · Accepted Answer

myNodeOne の次の兄弟は ", and" のように見えます。次の兄弟に行きたい場合は、

var m = document.getElementById("myNodeOne").nextSibling;
    m.nextSibling.innerHTML= "asdfsdf";

score 1 · Accepted Answer

これは、最初の div の次の兄弟がテキストノードであるためです。, and

innerHTMLテキストノードに属性がありません

以下を使用する必要があります。

document.getElementById("myNodeOne").nextSibling.nextSibling

score 1 · Accepted Answer

<b>...</b>タグ間に存在し、最初のタグの nextSibling として正しく返されるテキストを考慮する必要があります。

function function1() {
   var m = document.getElementById("myNodeOne");
   m.nextSibling.nextSibling.innerHTML = "asdfsdf";
}

</p>

javascript - JavaScriptの次の兄弟関数

6 に答える 6

Related

Reference