为什么我不能通过document.getElementById选择节点child（＆＃34; node＆＃39; s_id＆＃34;）。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返回undefined？

同样window.document.body有效，但在window.document.body.div之后我无法降低一级。

Answer 1

使用.（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>

Answer 2

您可以选择这样的范围

＆＃13;

＆＃13;

var span = document.getElementById("my_div").querySelector('span');
console.log(span);

＆＃13;

<div id="my_div"><span>  Nothin' but the G thang  </span>
</div>

＆＃13;

＆＃13;

＆＃13;

或者您也可以使用firstChild

＆＃13;

＆＃13;

var span = document.getElementById("my_div").firstChild;
console.log(span);

＆＃13;

<div id="my_div"><span>Nothin' but the G thang  </span></div>

＆＃13;

＆＃13;

＆＃13;