javascript - 最初に取得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

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

document.querySelector("ul > li")

---

Or querySelectorAll:

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

---

Or 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 .className property of the resulting element.

Otherwise you can set the individual styles using the .style property.

---

update

As @Randy Hall pointed out, perhaps you wanted to first li of all ul elements. In that case, I would use querySelectorAll like this:

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

Then iterate the result to set the style.

---

To use getElementsByTagName, you could do this:

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.

Answer 2

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

Answer 3

の唯一の有効な子は で<ul>あるため<li>、これを行うことができます。

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

Answer 4

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

Answer 5

Using the basic DOM operations:

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