获得第一 WITHOUT的jQuery(Get first WITHOUT jque

这可能已经问过，但经过约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的？

---

解决办法：我发现这个方法在所有浏览器（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]

---

国际海事组织改变风格，最好的办法是设置一个类。 您可以通过设置（或扩大）的做到这一点.className所产生的元素的性质。

否则，你可以使用设置的个人风格.style财产。

---

更新

作为@Randy霍尔指出，或许你想先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：第一子

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:

还要考虑的咝咝声 ，根据您的需要。 比jQuery的小，但处理您的所有选择正常化。

Answer 6:

使用基本的DOM操作：

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

文章来源: Get first

WITHOUT jquery