javascript nextsibling 函数答案

【问题标题】：javascript nextsibling functionjavascript nextsibling 函数
【发布时间】：2012-07-05 14:46:24
【问题描述】：

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

【问题讨论】：

正如其他人所说。这个链接看起来很有用：v3.thewatchmakerproject.com/journal/329/…
请注意，nextSibling 不是一个函数，它是一个属性。
@Wasim 检查this是否有帮助

标签： javascript html parent nextsibling

【解决方案1】：

尝试使用nextElementSibling 而不是nextSibling

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

之所以有效，是因为它只获取 HTML 元素。

【讨论】：

【解决方案2】：

几个问题：

如果您在变量 m 中存储一个 DOM 元素，然后设置任何 m 属性，DOM 完全不会受到影响。
document.getElementById("myNodeOne").nextSibling 不是 myNode2，而是两个节点之间的文本元素, and。

试试这个：

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

Demo

【讨论】：

【解决方案3】：

下一个兄弟姐妹 返回紧跟在 this 节点之后的节点。如果没有这样的节点，则返回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";
}

【讨论】：

【解决方案4】：

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

文本节点没有innerHTML 属性

你需要使用：

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

【讨论】：

这样打印出来的第二个粗体元素，他说的是第二个段落元素。

【解决方案5】：

您必须考虑文本，该文本存在于您的 <b>...</b> 标记之间，并且作为第一个标记的 nextSibling 正确返回

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

【讨论】：

最好只提供要更新的部分...否则我们必须将您的每一行代码与原始代码进行比较，以找出不同之处！

【解决方案6】：

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

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

【讨论】：