在没有 jquery 的情况下获取第一个 <li>答案

【问题标题】：Get first <li> WITHOUT jquery在没有 jquery 的情况下获取第一个 <li>
【发布时间】：2020-05-13 11:18:08
【问题描述】：

这可能已经被问过了，但是滚动浏览大约 40 多个搜索结果只会显示 jQuery 解决方案。假设我想获取无序列表中的第一项并对其应用新的文本颜色，并且单独使用它。使用 jQuery 很简单。

标记 ->

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

使用 jQuery ->

$("ul > li:first").css("color", "blue");

问题是，我如何实现这个没有 jQuery？

解决方案： 我发现这种方法适用于所有浏览器（包括 IE7+）->

document
    .getElementsByTagName("ul")[0]
    .getElementsByTagName("li")[0]
    .style.color = "blue";

【问题讨论】：

【解决方案1】：

你可以使用querySelector（不支持IE7及更低版本）：

document.querySelector("ul > li")

或querySelectorAll:

document.querySelectorAll("ul > li")[0]

或getElementsByTagName:

document.getElementsByTagName("ul")[0]
        .getElementsByTagName("li")[0]

更改样式 IMO 的最佳方法是设置一个类。您可以通过设置（或扩展）结果元素的.className 属性来做到这一点。

否则，您可以使用 .style 属性设置单独的样式。

更新

正如@Randy Hall 所指出的那样，也许您想在所有ul 元素中首先使用li。在这种情况下，我会像这样使用querySelectorAll：

document.querySelectorAll("ul > li:first-child")

然后迭代结果来设置样式。

要使用getElementsByTagName，您可以这样做：

var uls = document.getElementsByTagName("ul");

var lis = [].map.call(uls, function(ul) {
    return ul.children[0];
});

对于 IE8 及更低版本，您需要一个 Array.prototype.map() shim。

【讨论】：

document.getElementsByTagName("ul").getElementsByTagName("li")[0] - 您的示例仅获得第一个 li 的第一个 ul，这是每个 li 的第一个 li，只是为了清楚起见。 Asker 没有说明他们是否只寻找第一个 ul。
@RandyHall：是的，我所有的例子都只给出了第一个。好点子。我不知道意图是什么。

【解决方案2】：

document
    .getElementsByTagName("ul")[0]
    .getElementsByTagName("li")[0]
    .style.color = "blue";

【讨论】：

【解决方案3】：

如果您只需要更改样式，请使用 CSS :first-child

ul > li:first-child {
    color: blue;
}

【讨论】：

请小心使用它。我相信它是 CSS3 的新功能，可能在某些旧浏览器中不受支持。
@Tymoteusz Czech 好的，我想我错了，但 quirksmode 确实说 IEfirst-child 选择器有一个问题。见quirksmode.org/css/contents.html#t17
@jdwire 这是 CSS 2.1。如果您动态创建它，可能会出现问题

【解决方案4】：

由于<ul> 的唯一有效子代是<li>，您可以这样做：

var firstLI = document.getElementsByTagName('ul')[0].children[0];

【讨论】：

【解决方案5】：

还可以考虑sizzle，具体取决于您的需要。比 jQuery 小，但可以处理所有选择器规范化。

【讨论】：

是的，我认为 jQuery 实际上使用了一个版本的 sizzle 作为它的选择器，我正在寻找纯 javascript 替代品。
jQuery 确实使用了 sizzle - sizzle 是跨浏览器元素选择的“纯 JavaScript”后备。如果这是您需要担心的唯一功能，那么嘶嘶声就太多了。但是如果你有几个使用复杂选择器的函数并且你需要支持旧的浏览器，sizzle 非常快，非常经过验证，而且非常小。它不像 jQuery 或 Mootools 那样是一个库，它只是一个单一功能的规范化。
我同意，如果您需要选择多个元素，它非常有用。但是您提到的规范化使它变得不“纯”！

【解决方案6】：

使用基本的 DOM 操作：

var ul = document.getElementById('id of ul');
var child = ul.childNodes[0];

【讨论】：

【解决方案7】：

在某些情况下，这就足够了：

document.querySelector("ul > li:first-child");

【讨论】：