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>

这应该在第二段标签中打印“asdfsdf”。但它不起作用。

Answer 1

尝试使用nextElementSibling代替nextSibling

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

它有效，因为它只提取HTML元素。

Answer 2

有几个问题：

如果你在变量m中存储一个DOM元素然后你设置任何m 属性，DOM根本不会受到影响。
document.getElementById（＆＃34; myNodeOne＆＃34;）。nextSibling不是myNode2，但是两个节点之间的文本元素, and。

试试这个：

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

Demo

Answer 3

<强> nextSibling 在此节点后立即返回节点。如果没有这样的节点，则返回null。

由于紧随其后的节点是TEXT_NODE，因此返回该节点。以下是所有nodeTypes：

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";
}

Answer 4

这是因为您的第一个div的下一个兄弟是文本节点：, and

文本节点没有innerHTML属性

您需要使用：

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

Answer 5

您必须考虑<b>...</b>标记之间的文字，并正确地作为第一个标记的下一个标记返回

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

Answer 6

看起来你的myNodeOne的下一个兄弟是“和”，如果你想进入下一个你必须放的那个：

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

javascript nextsibling功能

6 个答案: