javascriptでquerySelectorのつかいかた

javascriptでquerySelectorで下記HTMLで
liのヒマワリの値をとるために("ul li");を
指定したのですがバラが取得されてしまいます。
idがついているバラ、サクラ、タンポポを抜かして
ヒマワリを取得するには
どうしたらいいでしょうか

<ul>
  <li id="item1">バラ</li>
  <li id="item2">サクラ</li>
  <li id="item3">タンポポ</li>
  <li>ヒマワリ</li>
  <li>コスモス</li>
</ul>

</body> </html>

//ヒマワリを出力したい
elem = document.querySelector("ul li");
console.log(elem.textContent);

行動規範の内容に同意します

回答3件

ベストアンサー

どうしてもquerySelectorでということなら、下記とか。

js
1const elem = document.querySelector("ul li:not([id^='item'])");
2console.log(elem.textContent);

~~idが”item”で始まっていると限らないなら、querySelectorだけでは難しいかと。~~:not([id])でいけました。

投稿2020/10/24 05:19

編集2020/10/24 05:28

hatena19

総合スコア34075

maisumakun

2020/10/24 05:22 編集

ul li:not([id])で済ませてもいいかと思います。

hatena19

2020/10/24 05:26

あっ、なるほど、言われてみれば、それでいますね。

行動規範の内容に同意します

idがついてない最初のliってことですか？

javascript
1console.log(document.querySelector('li:not([id])').textContent);

投稿2020/10/24 05:22

yambejp

総合スコア116724

ヒマワリを取得するには

どうしたらいいでしょうか

これでいいじゃん。

<html>

<body>

<ul>
<li id="item1">バラ</li>
<li id="item2">サクラ</li>
<li id="item3">タンポポ</li>
<li id="item4">ヒマワリ</li>
<li>コスモス</li>
</ul>

</body>
</html>

//ヒマワリを出力したい
elem = document.querySelector("#item4");
console.log(elem.textContent);

そもそも一意に特定できる条件がないと、どれを取得して良いのか判別つかないんで、素直にIDでもいれておきましょう。

なんか凝った回答されてる人もいて、それはそれでいいけど、果たしてこの条件で実際そんな実装を実務で事やるか？と言われりゃ絶対やらんと思いますが。

投稿2020/10/24 05:24

編集2020/10/24 05:26

gentaro

総合スコア8947

sousuke

2020/10/24 13:02

実装でそんなことするか？っていうのはわかる話ですが、そんなこと言い始めたら「id振ってquerySelectorで#item4」も実装であり得ないのでは？私ならgetElementByIdします。

gentaro

2020/10/24 13:21

・querySelectorの使い方の質問であること・質問者はidは理解してそうなこと・上記を合わせれば最も単純の方法であることの３点からこの回答にしましたが、実務で云々、というのはまぁ仰るとおりで表現が悪かったかも知れない。ただまぁ、シンプルに変な事やってるのは他者が読んでも理解できる分マシだけど、難しくて変なことを下手に真似されるのはなんかなぁ…とは思います。

sousuke

2020/10/26 00:28

「idがついているバラ、サクラ、タンポポを抜かしてヒマワリを取得するには」って質問者さんが言っていて、実際どういう風にこのコードを使うつもりなのかとか IDを振らずに要素を取得したい背景がわからないとなんとも言えませんね。実際そんなことするか？っていうのを突き詰めるとここの質問だとそこそこな割合で「なぜそんなことをするのか」っていうのを聞かないといけなくなるような気がします。

行動規範の内容に同意します

あなたの回答