lastElementChild用于选择ul中的最后一个li？

Question

我正在尝试选择

中的最后一项

<ul id="list_1">
    <li>Apple</li>
    <li>Orange</li>
    <li>Grape</li>
    <li>Banana</li>
    <li>Mango</li>
</ul>

所以我做了

var ul    = document.getElementById("list_1");
var mango = ul.lastElementChild;

到目前为止，选择似乎正在起作用。但我不确定我是否正确使用了lastElementChild。将

var mango =  ul.getElementsByTagName("li")[4];

是正确使用的吗？

Answer 1

使用lastElementChild很好，它总是会引用 last 元素，它是列表的直接子元素。

ul.getElementsByTagName("li")[4]总会给你第五个，这可能不是最后一个（虽然在这种情况下）。

请注意，如果您需要支持IE8，IE8不支持lastElementChild。 （IE9及以上版本。）要包含IE8，您可以像这样可靠地获取最后一个元素：

var ul    = document.getElementById("list_1");
var mango = ul.children[ul.children.length - 1];

与childNodes不同，children只包含子元素，而不包含其他类型的子元素（文本节点等），IE8支持它。