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

时间:2016-04-25 10:25:53

标签: javascript dom parent-child nodes

假设我有一个简单的html代码,它将父级div和子级span元素包含为:

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

据说html DOM中的每个元素都是一个对象。所以我们可以选择子对象为parent.child。例如。 window.documentwindow.document.bodywindow.document.head等我的问题是为什么document.getElementById("my_div").span返回undefined?

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

2 个答案:

答案 0 :(得分:3)

使用.dot-notation),您正在尝试访问span返回的objectNode/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>

答案 1 :(得分: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;