获取父级 <div> 元素下子级 <div> 元素的值

Question

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

我该如何获取“some-value”？ 我尝试了

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

输出结果为“未定义”。

- Nitin

---

请尝试熟悉阅读参考资料，例如在MDN上的DOM参考文档是一个很好的资源。您将会了解到div（HTMLDivElement）没有value属性，以及您实际可以使用哪些属性。 - kapa

Answer 1

value属性仅适用于表单元素。如果你想获取其他元素的内容，可以使用innerHTML方法以HTML字符串形式获取内容，或者使用textContent 或 innerText 方法只获取文本内容不包含HTML标记。 childNodes方法会返回所有子节点，而不仅仅是元素节点。这意味着它还包括例如文本节点。在<div id="parent">后面的换行符也是一个文本节点。因此，parent.childNodes[0]返回的是由一个换行符组成的文本节点。

如果你想获取第一个元素节点，可以使用children方法（请参阅浏览器兼容性），或者遍历子节点并测试每个节点的类型。其中，1表示元素节点，3表示文本节点。

var child = parent.firstChild;

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

还有其他获取元素的方法，例如使用getElementsByTagName^[MDN]。

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

- Felix Kling

---

因此，parent.childNodes[0]返回的是仅包含换行符的文本节点。谢谢！感谢您提供参考资料，Google正在成为垃圾邮件收集器，我一直得到各种未回答/无关的问题链接。 - Nitin

MDN的文档非常优秀。当你搜索与DOM或JavaScript相关的内容时，只需添加“mdn”作为关键词即可。 - Felix Kling

Answer 2

问题在于父级 <div> 实际上有三个子元素：一个包含 parent 开始标签后换行符的 TextNode，实际的 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()

- Tomasz Nurkiewicz

---

是的，最好使用实际的getElementById("child")...但目的实际上是学习DOM。迭代和查找实际子元素听起来比我的方法更好。谢谢！ - Nitin

如果你想避免使用jQuery，我认为你也可以使用document.querySelector('#parent div')。 - mvndaai

Answer 3

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/

- gion_13

---

嗯...我将它更改为parent.childNodes[1]，然后它就起作用了（就像Felix上面说的那样）。我忽略了你使用.children [0]这一事实，它也可以工作。谢谢。 - Nitin

@gion_13 对我有用，谢谢。 - Muhammad Abdullah

Answer 4

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;

这也将解决您的问题。

- AmGates

---

是的，但我真的需要在这里使用子属性。这不可能吗？ - Nitin

parent.childNodes[0] 不是指元素节点。 - Felix Kling

Answer 5

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

- Manish Kumar Majumdar

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>

- Omar bakhsh