javascript 获取第一个 <li> 没有 jquery

Get first <li> WITHOUT jquery

提问by reekogi

This may have been asked, but scrolling through about 40+ search results reveals only the jQuery solution. Let's say I want to get the first item in an unordered list and apply a new text color to it, and it alone. This is simple with jQuery.

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

Markup ->

标记 ->

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

With jQuery ->

使用 jQuery ->

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

Question is, how do I achieve this withoutjQuery?

问题是，我如何在没有jQuery 的情况下实现这一目标？

---

---

SOLUTION:I found this method to work across all browsers (inc IE7+) ->

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

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

回答by I Hate Lazy

You can use querySelector(IE7 and lower not supported):

您可以使用querySelector（不支持 IE7 及更低版本）：

document.querySelector("ul > li")

---

---

Or querySelectorAll:

或querySelectorAll：

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

---

---

Or getElementsByTagName:

或getElementsByTagName：

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

---

---

The best way to change style IMO is to set a class. You do this by setting (or expanding)the .classNameproperty of the resulting element.

更改样式 IMO 的最佳方法是设置一个类。您可以通过设置（或扩展）.className结果元素的属性来做到这一点。

Otherwise you can set the individual styles using the .styleproperty.

否则，您可以使用该.style属性设置各个样式。

---

---

update

更新

As @Randy Hallpointed out, perhaps you wanted to first liof all ulelements. In that case, I would use querySelectorAlllike this:

正如@Randy Hall指出的那样，也许您首先想li了解所有ul元素。在那种情况下，我会这样使用querySelectorAll：

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

Then iterate the result to set the style.

然后迭代结果设置样式。

---

---

To use getElementsByTagName, you could do this:

要使用getElementsByTagName，您可以这样做：

var uls = document.getElementsByTagName("ul");

var lis = [].map.call(uls, function(ul) {
    return ul.children[0];
});

You'll need an Array.prototype.map()shim for IE8 and lower.

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

回答by Tymek

If you need to change style only, use CSS :first-child

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

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

works even in IE7 http://caniuse.com/#feat=css-sel2

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

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

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

回答by Salman A

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

回答by Niet the Dark Absol

Since the only valid child of <ul>is <li>, you can do this:

由于 的唯一有效子项<ul>是<li>，因此您可以执行以下操作：

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

回答by allenski

In some cases, this is enough:

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

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

回答by Randy Hall

Also consider sizzle, depending on your needs. Smaller than jQuery, but handles all your selector normalization.

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

回答by ZorleQ

Using the basic DOM operations:

使用基本的 DOM 操作：

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