javascript - 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支持它.