为什么我不能通过 document.getElementById("node's_id").child 选择节点子节点？

Question

假设我有一个简单的 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 返回未定义？

同样window.document.body 有效，但我无法在此之后使用window.document.body.div。

Answer 1

对于.(dot-notation)，您正在尝试访问document.getElementById 返回的object(Node/Element) 的span 属性。由于没有与返回对象关联的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>

Answer 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>