先获取<li> WITHOUT jquery </li>

Question

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

标记 - ＆gt;

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

使用jQuery - ＆gt;

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

问题是，如何在没有 jQuery的情况下实现？

---

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

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

你需要一个Array.prototype.map()垫片用于IE8及更低版本。

Answer 2

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

Answer 3

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

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

即使在IE7中也能正常工作 http://caniuse.com/#feat=css-sel2

http://jsfiddle.net/Tymek/trxe3/

Answer 4

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

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

Answer 5

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

Answer 6

使用基本的DOM操作：

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

Answer 7

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

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