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

Question

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

我如何获得"一些价值"？我试过了

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] resp.innerText ^[MSDN]仅获取没有HTML标记的文本内容.

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

如果要获取第一个元素节点,可以使用children ^[MDN](请参阅浏览器兼容性),或迭代子节点,测试每个节点的节点类型.1表示元素节点,3文本节点:

var child = parent.firstChild;

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

还有其他方法可以检索元素,例如使用getElementsByTagName ^[MDN].

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

Answer 2

var parent = document.getElementById("parent");
var child = parent.children[0];
var childVal = child.innerHTML;
document.getElementById("output").innerHTML = childVal;

演示： http: //jsfiddle.net/bcqVC/2/

Answer 3

问题是,它parent <div>实际上有三个孩子:一个TextNode在parent打开标签后包含一个新行,实际child <div>和另一个TextNode在关闭child标签后有换行符.但硬编码第二项是一个坏主意:

var parent = document.getElementById("parent");
console.info(parent.childNodes.length);
var child = parent.childNodes[1];
var childval = child.innerHTML;

我建议迭代孩子并找到实际child或使用

parent.getElementsByTagName('div')

速记.

这就是人们如此热爱jQuery的原因之一:

$('#parent div').text()