獲得孩子的價值<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]或textContent ^[MDN]來獲取內容。 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

問題是parent <div>實際上有三個孩子：一個TextNode在parent開始標簽后包含一個新行，實際的child <div>和另一個在關閉child標簽后帶有換行符的TextNode 。 但是硬編碼第二項是一個壞主意：

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()

Answer 3

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 4

要獲取所有<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
}

Answer 5

document.getElementById("output").innerHTML = document.getElementById("child").innerHTML;

這將解決您的問題。

使用您的方法嘗試如下所示

var parent = document.getElementById("parent");
var child = parent.childNodes[0];

var childval = child.innerHTML;

document.getElementById("outPut").innerHTML=childval;

這也將解決您的問題

Answer 6

通過這個指針試試這種方式。

 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>