假设我有一个简单的html代码，它将父级div和子级span元素包含为：
<div id="my_div"><span> Nothin' but the G thang </span></div>
据说html DOM中的每个元素都是一个对象。所以我们可以选择子对象为parent.child。例如。 window.document，window.document.body，window.document.head等我的问题是为什么document.getElementById("my_div").span返回undefined？
同样window.document.body有效，但在window.document.body.div之后我无法降低一级。
答案 0 :(得分：3)
使用.（dot-notation），您正在尝试访问span返回的object（Node/Element）的document.getElementById属性。由于没有与返回对象关联的span属性，document.getElementById("my_div").span将为undefined
使用document.querySelector，返回文档中的第一个元素（使用文档节点的深度优先预先遍历|按文档标记中的第一个元素，按顺序迭代顺序节点子节点）匹配指定的选择器组
console.log(document.querySelector('#my_div span'));<div id="my_div"><span> Nothin' but the G thang </span>
</div>
或Node.chilren，只读属性，返回Node的子元素的实时HTMLCollection。
console.log(document.getElementById('my_div').children[0]);<div id="my_div"><span> Nothin' but the G thang </span>
</div>
答案 1 :(得分：2)
您可以选择这样的范围
var span = document.getElementById("my_div").querySelector('span');
console.log(span);<div id="my_div"><span> Nothin' but the G thang </span>
</div>
或者您也可以使用firstChild
var span = document.getElementById("my_div").firstChild;
console.log(span);<div id="my_div"><span>Nothin' but the G thang </span></div>