首先获取 不使用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");

问题是，如何实现此[[without jQuery？

---

SOLUTION：

我发现这种方法可在所有浏览器（inc IE7 +）中使用->

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

Answer 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所指出的，也许您想在所有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()填充程序。

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

使用基本的DOM操作：

Answer 7

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