为什么不能通过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 ， 返回与指定组匹配的 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>