基于位置的Javascript元素获取元素节点

我正在试验一个Javascript函数，它将节点填充到一个位置。类似于

appendChild（document.getElementById（“foo”））

。但是，我不能完全控制周围的代码，而且可能有些元素具有相同的ID。考虑以下事项：

<div id="foo">
<span id = "bar">456</span>
<script type="text/javascript">document.write(document.getElementById("bar").innerText);</script>
</div>

<hr>

<div id="foo">
<span id = "bar">123</span>
<script type="text/javascript">document.write(document.getElementById("bar").innerText);</script>
</div>

而不是我想要的，那就是

456 456 
123 123

这个结果对我来说完全不奇怪；我确实理解为什么会发生这种情况。我希望我可以做一个javascript调用，更像

document.write(myscriptnode.parent.childnodes['bar'].innerText)

---

假设我除了脚本标记的内容之外没有任何控制权，有什么方法可以做到这一点吗？

使用jQuery这样的JavaScript库如何，它允许您编写类似CSS选择器的语法插入getElementById，还具有有用的辅助方法，如parent（）

---

这里有一个非常可怕的方法来解决这个问题：与其尝试获取当前节点，不如创建一个具有任意ID的新节点，然后在完成后将其删除

<div id="foo">
<span id = "bar">456</span>
<script type="text/javascript">
    document.write('<span id = "bfrogtmp"></span>');
    var y = document.getElementById("bfrogtmp");
    document.write(y.parentNode.children['bar'].innerHTML);
    y.parentNode.removeChild(y);
</script>
</div>

<hr>

<div id="foo">
<span id = "bar">123</span>
<script type="text/javascript">
    document.write('<span id = "bfrogtmp"></span>');
    var y = document.getElementById("bfrogtmp");
    document.write(y.parentNode.children['bar'].innerHTML);
    y.parentNode.removeChild(y);
</script>
</div>

456
文件。写（“”）；
var y=document.getElementById（“bfrogtmp”）；
document.write（y.parentNode.children['bar'].innerHTML）；
y、 parentNode.removeChild（y）；

123
文件。写（“”）；
var y=document.getElementById（“bfrogtmp”）；
document.write（y.parentNode.children['bar'].innerHTML）；
y、 parentNode.removeChild（y）；

div和span没有CSS。我不能添加它们，因为我“假设除了脚本标记的内容之外我不能控制任何东西”。抱歉，为了澄清，我应该说“jQuery允许您编写类似CSS选择器的语法”。请参阅jQuery将执行您需要的操作，即node.parent（）.children（）。。。请看另一个可以签出的JS框架是@TimS：这并没有告诉我应该如何实际选择节点。我没有看到任何选择器允许我选择脚本节点本身。使用$（'#foo'）之类的东西循环所有foo元素如何。each（）？对不起，我不知道你说的“对的”是什么意思。您希望遍历DOM，jQuery帮助您做到这一点，文档告诉您如何。。。这就是我的答案。具体实施方式取决于您：）

<div id="foo">
<span id = "bar">456</span>
<script type="text/javascript">
    document.write('<span id = "bfrogtmp"></span>');
    var y = document.getElementById("bfrogtmp");
    document.write(y.parentNode.children['bar'].innerHTML);
    y.parentNode.removeChild(y);
</script>
</div>

<hr>

<div id="foo">
<span id = "bar">123</span>
<script type="text/javascript">
    document.write('<span id = "bfrogtmp"></span>');
    var y = document.getElementById("bfrogtmp");
    document.write(y.parentNode.children['bar'].innerHTML);
    y.parentNode.removeChild(y);
</script>
</div>