Javascript 获取父 <div> 的子 <div> 的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8769158/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
get value of child <div> of a parent <div>
提问by Nitin
<div id="parent">
<div id="child">
some-value
</div>
</div>
how do I get "some-value"? I tried
我如何获得“一些价值”？我试过
var parent = document.getElementById("parent");
var child = parent.childNodes[0];
var childval = child.value;
document.getElementById("output").innerHTML=childval;
it outputs "undefined".
它输出“未定义”。
回答by Felix Kling
The valueproperty only exists for form elements. If you want to get the content of any other elements, you can either use innerHTML[MDN]to get the content as HTML string, or textContent[MDN]resp. innerText[MSDN]to only get the text content without HTML tags.
该value属性仅存在于表单元素中。如果要获取任何其他元素的内容，可以使用innerHTML[MDN]以 HTML 字符串的形式获取内容，也可以使用textContent[MDN]resp。innerText[MSDN]只获取没有 HTML 标签的文本内容。
childNodes[MDN]returns allchild nodes, not only element nodes. That means, it also contains text nodesfor example. The line break you have after <div id="parent">is a text node as well. Hence, parent.childNodes[0]returns the text node which consists only of a line break.
childNodes[MDN]返回所有子节点，而不仅仅是元素节点。这意味着，它还包含例如文本节点。您之后的换行符<div id="parent">也是一个文本节点。因此，parent.childNodes[0]返回仅由换行符组成的文本节点。
If you want to get the first element node, you can either use children[MDN](see browser compatibility), or iterate over the child nodes, testing what kind of node each of them is. 1indicates an element node, 3a text node:
如果你想获得第一个元素节点，你可以使用children[MDN]（参见浏览器兼容性），或者迭代子节点，测试每个节点是什么类型的节点。1表示元素节点，3文本节点：
var child = parent.firstChild;
while(child && child.nodeType !== 1) {
child = child.nextSibling;
}
There are also other ways to retrieve elements, e.g. with getElementsByTagName[MDN].
还有其他方法可以检索元素，例如使用getElementsByTagName[MDN]。
Or in your case, you can just use getElementById[MDN]to get a reference to both of the elements.
或者在您的情况下，您可以使用getElementById[MDN]来获取对这两个元素的引用。
回答by Tomasz Nurkiewicz
The problem is that parent<div>actuially has three children: a TextNodecontaining a new line after parentopening tag, the actual child<div>and yet another TextNodewith newline after closing childtag. But hard-coding second item is a bad idea:
问题是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;
I would suggest iterating over children and finding the actual childor using
我建议迭代儿童并找到实际child或使用
parent.getElementsByTagName('div')
shorthand.
速记。
That's one of the reasons why people love jQuery so much:
这就是人们如此喜爱 jQuery 的原因之一：
$('#parent div').text()
回答by gion_13
var parent = document.getElementById("parent");
var child = parent.children[0];
var childval = child.innerHTML;
document.getElementById("output").innerHTML=childval;
DEMO : http://jsfiddle.net/bcqVC/2/
回答by AmGates
document.getElementById("output").innerHTML = document.getElementById("child").innerHTML;
document.getElementById("output").innerHTML = document.getElementById("child").innerHTML;
This will solve your problem.
这将解决您的问题。
Using your way of approach try as shown below
使用您的方法尝试如下所示
var parent = document.getElementById("parent");
var child = parent.childNodes[0];
var childval = child.innerHTML;
var childval = child.innerHTML;
document.getElementById("outPut").innerHTML=childval;
This will also solve your problem
这也将解决您的问题
回答by Manish Kumar Majumdar
To get all the <div>elements you can use:
要获取<div>您可以使用的所有元素：
var div_val=prompt("Enter a div to Get the Child Elements","");
var div_ele=document.getElementById(div_val).childNodes;
for (var i=0, max=div_ele.length; i < max; i++) {
alert(div_ele[i]); //All your Div Elements
}
回答by Omar bakhsh
try this way by this pointer.
通过这个指针尝试这种方式。
var childs = document.getElementById('myDropdown').children; //returns a HTMLCollection
for (var indx = 0; indx < childs.length; indx++) {
// iterate over it
childs[indx].onclick = function() {
// attach event listener On Symbole Dive THIS .
this.style.color = "#ff0000";
// add to note form the symbole .
document.getElementById("Note_form").value += this.innerHTML;
}
}<div class="dropdown">
<div id="myDropdown" class="dropdown-content">
<div>?</div>
<div>?</div>
<div>π</div>
<div>?</div>
<div>Σ</div>
<div>°</div>
<div>Ω</div>
<div>∞</div>
<div>×</div>
<div>÷</div>
<div>≥</div>
<div>≤</div>
<div>≠</div>
<div>?</div>
<div>?</div>
<div>￥</div>
<div>￡</div>
<div></div>
</div>
</div>
<textarea id="Note_form" class="copy_erea" placeholder="The Content.." oninput="note_Edite(this.value);"></textarea>