javascript - javascript nextsibling 函数

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”。但它不起作用。

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两个节点之间的文本元素。

尝试这个：

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

演示

score 2 · Accepted Answer

nextSibling 返回紧跟该节点的节点。如果没有这样的节点，则返回 null。

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

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

这是因为你的第一个 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>

score 1 · Accepted Answer

看起来你的 myNodeOne 的下一个兄弟是“，并且”如果你想进入下一个，你必须输入：

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

javascript - javascript nextsibling 函数

6 回答 6

Related

Reference