先获取<li>没有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");

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

---

解决方案: 我发现这种方法适用于所有浏览器(包括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];
});

Array.prototype.map()IE8及更低版本需要垫片.