JavaScript：获取节点值

Question

我对JavaScript还比较陌生，我需要获取具有id firstvalue的节点的值，以便在我的脚本中使用。请问有谁能告诉我如何获取该值呢？

<div id="myDiv">

<span id="firstValue"> 5.22 <span id="nestedValue"> 500 </span></span>

</div> <!-- myDiv -->

- haunted85

---

你想要inner html（它是嵌套的）还是第一个值，就像文本内容一样。如果是后者，在 <span id="firstValue"> 5.22 <span> foo</span> 42 </span> 这种情况下应该检索什么？ - Dilettant

@Dilettant：我想只获取5.22并忽略其他所有内容。 - haunted85

Answer 1

document.getElementById("firstValue")会获取到一个指向<span>的引用。该元素有两个子节点，您可以通过类似数组的childNodes属性来引用它们，或者在这种情况下直接使用firstChild和lastChild属性。例如，下面的代码将返回字符串" 5.22 "：

document.getElementById("firstValue").firstChild.nodeValue;

- Tim Down

---

所以我可以使用 firstChild（或更一般的 childNodes[i]）向下遍历树并获取我需要的任何值，谢谢你，我本来会很困惑，但你帮我省去了很多麻烦。 - haunted85

Answer 2

var nodeValue = document.getElementById("firstValue").innerHTML

这将会等于 "5.22 <span id="nestedValue"> 500 </span>"

- Diodeus - James MacFarlane

---

那么没有办法仅捕获那个值吗？ - haunted85

我会让自己轻松一些，不将这两个项目嵌套。 - Diodeus - James MacFarlane

Answer 3

许多JavaScript库在访问DOM元素方面提供了很大的帮助，例如：prototype、dojo、jQuery等。在原型中，您可以键入：$('firstValue').firstChild.nodeValue。

- leDamien

Answer 4

这是一个简单的函数，它用于此目的，并具有错误处理功能，以防范 span 不存在或为空的情况：

function getFirstValue() {
    var spanFirstValue = document.getElementById("firstValue");
    if (spanFirstValue) {
        var textNode = spanFirstValue.childnodes[0];
        if (textNode) {
            return textNode.data;
        }
    }
    return "";
}

- Luc125

Answer 5

这也可以这样做...

document.getElementById("firstValue").textContent;

这将为您提供文本内容，而不包含HTML。

- Shawn W