javascript - 为什么我无法通过 document.getElementById ("node' s_id").child 选择子节点？

Question

假设我有一个简单的 html 代码 sonsisiting 父 div和 child 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返回未定义？

同样window.document.body有效，但我不能再用 window.document.body.div 下降一级.

Answer 1

使用.(dot-notation)，您正在尝试访问对象的span属性(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>