javascript - 抢先
没有jQuery

Question

这可能已经被问过了，但是滚动浏览大约 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";

score 14 · Accepted Answer

您可以使用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指出的那样，也许您首先想要li的是ul元素。在这种情况下，我会这样使用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。

score 3 · Accepted Answer

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

score 3 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

使用基本的 DOM 操作：

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

score 0 · Accepted Answer

0

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

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

于 2020-05-13T03:18:08.700 回答

javascript - 抢先没有jQuery