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

Posted 2023-02-19

【中文标题】为啥我不能通过 document.getElementById("node\'s_id").child 选择节点子节点？

【英文标题】：Why can't I select nodes child by document.getElementById("node's_id").child?为什么我不能通过 document.getElementById("node's_id").child 选择节点子节点？

【发布时间】：2016-08-18 16:29:50

【问题描述】：

假设我有一个简单的 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。

【问题讨论】：

可能重复：best way to get child nodes.

@FreemanLambda .span.

【参考方案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>

【讨论】：

如果没有额外的 JS 东西，getElementsByTagName 一旦你有了父元素就可以工作

@zerohero，有n 多种方式！ querySelector

不需要额外的东西

head 和 body 是 DOM 中的属性还是对象？

是的，head 和 body 是 document 对象的属性！

您能否提供参考，因为 w3school 另有声明w3schools.com/jsref/dom_obj_head.asp

【参考方案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>

【讨论】：

我已经编辑了这个问题。我不是在问如何选择孩子。我在问为什么不能选为document.getElementById("my_div").span？

是的，它返回对象，但jsfiddle.net/Lg0wyt9u/609 内部没有 span 属性，这是所有属性的列表jsfiddle.net/Lg0wyt9u/610