Javascript 抢先一步<；李>；没有jquery

可能有人会问这个问题，但滚动大约40多个搜索结果只会显示jQuery解决方案。假设我想获得无序列表中的第一个项目，并对其应用新的文本颜色，并且仅此一项。这对于jQuery来说很简单

标记->

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

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

---

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

---

您可以使用

querySelector

（不支持IE7及更低版本）：

---

或

querySelectorAll

：

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

---

或

getElementsByTagName

：

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

---

改变IMO风格的最好方法是设置一个类。您可以通过设置（或扩展）结果元素的

.className

属性来实现这一点

否则，可以使用

.style

属性设置各个样式

---

更新

正如所指出的，也许您想首先使用所有

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];
});

---

你需要一个“代码>数组。原型。小于jQuery，但处理所有选择器规范化。

使用基本DOM操作：

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

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

---

由于

的唯一有效子级是

，因此可以执行以下操作：

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

---

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

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

甚至在IE7中也能工作

---

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

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

---

document.getElementsByTagName（“ul”）.getElementsByTagName（“li”）[0]

-您的示例只获取第一个

ul

的第一个

li

，这只是为了清楚起见。Asker没有说明他们是否只寻找第一个

ul

。@RandyHall:是的，我所有的例子都只给出了第一个。说得好。我不知道目的是什么。不过使用时要小心。我相信从CSS3开始，它是新的，在一些旧的浏览器中可能不受支持。@Tymoteusz捷克好吧，我想我错了，但quirksmode确实说，在IE@jdwire它是css2.1。如果您创建此dynamicallyYeah，可能会出现问题。我认为jQuery实际上使用了一个版本的sizzle作为其选择器，我正在寻找纯javascript替代方案。jQuery确实使用了sizzle-sizzle是跨浏览器元素选择的“纯javascript”回退。如果这是您需要担心的唯一功能，那么sizzle就太多了。但是，如果您有几个使用复杂选择器的函数，并且需要支持较旧的浏览器，那么sizzle速度非常快，经过充分验证，而且非常小。它不像jQuery或Mootools那样是一个库，它只是一个单一功能的标准化。我同意，如果你需要选择多个元素，它非常有用。但是你提到的规范化是它非“纯”的原因！

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

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

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