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;

输出“undefined”。

Answer 1

value属性仅对表单元素存在。如果您想获取任何其他元素的内容，可以使用innerHTML ^[MDN]将内容作为HTML字符串，或textContent ^[MDN] resp。 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]来获取对这两个元素的引用。

Answer 2

问题是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

的简写。

这是人们非常喜欢jQuery的原因之一：

parent.getElementsByTagName('div')

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/

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;

这也将解决您的问题

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
}

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>

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

6 个答案: