编辑这个页面须要登录或更高权限!

HTML DOM firstElementChild 属性

HTML DOM Element 对象

firstElementChild只读属性返回指定的父元素的第一个子元素。

如果父元素没有子元素,则此方法将返回null值。

使用children属性返回指定父元素的任何子元素。children [0]将返回与firstElementChild相同的结果。

要返回指定父元素的最后一个子元素,请使用lastElementChild属性。

语法:

ParentElement.firstElementChild
<div>
   <p>这是DIV中的第1个P</p>
   <p>这是DIV中的第2个P</p>
   <p>这是DIV中的第3个P</p>
</div>

<script>
var x = document.querySelector("div").firstElementChild.nodeName;
document.getElementById("result").innerHTML = x;
</script>
测试看看‹/›

浏览器兼容性

所有浏览器完全支持firstElementChild属性:

属性
firstElementChild

技术细节

返回值:一个Node对象,代表指定父元素的第一个子元素;如果没有子元素,则为null
DOM版本:DOM级别1

更多实例

获取DIV元素的第一个子元素的HTML内容:

<div>
   <p>这是DIV中的第1个P</p>
   <p>这是DIV中的第2个P</p>
   <p>这是DIV中的第3个P</p>
</div>

<script>
var x = document.querySelector("div").firstElementChild.textContent;
document.getElementById("result").innerHTML = x;
</script>
测试看看‹/›

更改DIV元素的第一个子元素的HTML内容:

var div = document.querySelector("div");
div.firstElementChild.textContent = "HELLO WORLD";
测试看看‹/›

相关参考

HTML DOM参考:lastElementChild属性

HTML DOM Element 对象