javascript - 获取父 <div> 的子 <div> 的值

Question

<div id="parent">
    <div id="child">
        some-value
    </div>
</div>

我如何获得“一些值(value)”？ 我试过了

var parent = document.getElementById("parent");
var child = parent.childNodes[0];
var childval = child.value;
document.getElementById("output").innerHTML=childval;

它输出“未定义”。

Answer 1

value属性只存在于表单元素中。如果你想获取任何其他元素的内容，你可以使用 innerHTML ^[MDN]以 HTML 字符串形式获取内容，或 textContent ^[MDN]分别 innerText ^[MSDN]只获取没有 HTML 标签的文本内容。

childNodes ^[MDN]返回所有 子节点，而不仅仅是元素节点。这意味着，它还包含例如文本节点。 <div id="parent"> 之后的换行符也是一个文本节点。因此，parent.childNodes[0]返回仅包含换行符的文本节点。

如果要获取第一个元素节点，可以使用 children ^[MDN] (参见 browser compatibility )，或遍历子节点，测试每个子节点是什么类型的节点。 1表示元素节点，3一个文本节点:

var child = parent.firstChild;

while(child && child.nodeType !== 1) {
    child = child.nextSibling;
}

还有其他方法可以获取元素，例如与 getElementsByTagName ^[MDN] .

或者在您的情况下，您可以只使用 getElementById ^[MDN]获取对这两个元素的引用。