假设我有一个简单的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
之后我无法降低一级。
答案 0 :(得分:3)
使用.
(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>
答案 1 :(得分:2)
您可以选择这样的范围
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;
或者您也可以使用firstChild
var span = document.getElementById("my_div").firstChild;
console.log(span);
&#13;
<div id="my_div"><span>Nothin' but the G thang </span></div>
&#13;