質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

子要素より下の階層の取得について

skillUp
skillUp

総合スコア25

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

3回答

0グッド

1クリップ

233閲覧

投稿2022/11/20 14:02

編集2022/11/20 14:46

実現したいこと

ボタンをクリックして該当部分のdata属性を書き換えています。
「たちつてと」部分のdata属性を書き換えるため
JSで「たちつてと」のaタグを取得したいです。
※この場合、IDを振るなどせず、現状のHTMLには修正を加えないものとします。

「あいうえお」のaタグを取得し、変数list_aiueoに代入した場合
list_aiueoから「たちつてと」のaタグを取得するには
どのようにすればよいのでしょうか。
( list_aiueo.children.childrenでしょうか?)

querySelectorAll内を .wrappInner>ul>li>ul>li>a として「たちつてと」のaタグを指定するのは
スマートではないように思っています。

ご教授いただけないでしょうか。

該当のソースコード

HTML

1<div class="wrappInner"> 2 <ul> 3 <li><a href="#" data-num="01">あいうえお</a></li> 4 <li> 5 <ul> 6 <li><a href="" data-num="04">たちつてと</a></li> 7 </ul> 8 </li> 9 </ul> 10</div> 11<div class="wrappInner"> 12 <ul> 13 <li><a href="#" data-num="02">かきくけこ</a></li> 14 </ul> 15</div> 16<div class="wrappInner"> 17 <ul> 18 <li><a href="#" data-num="03">さしすせそ</a></li> 19 </ul> 20</div> 21 22<button type="button">ボタン</button> 23

Javascript

1//ボタン要素 2const btn = document.querySelector("button"); 3 4//クリック後の動作 5btn.addEventListener("click", function(){ 6 addDatasetAction(); 7 8 function addDatasetAction() { 9 const lists = document.querySelectorAll('.wrappInner>ul>li>a'); 10 for(let list of lists){ 11 list.dataset.num = "1000"; 12 console.log(list); 13 } 14} 15});

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答3

1

<a href="#" data-num="01">あいうえお</a>」と「<a href="" data-num="04">たちつてと</a>」とは構造的に親子関係ではなく兄弟関係です。命題の親子関係を前提にヒットさせることはできません。(ここまでが回答)
構造を見直すか、あらためて兄弟関係とした上でどういう条件でヒットしたいのかを提示してください。

投稿2022/11/21 00:44

yambejp

総合スコア109126

spoofy_dragon😄を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

skillUp

2022/11/22 00:37

確かに、兄弟関係でしたね。例として当てずっぽうで書いておりました。 質問前にしっかり考えるようにします。 単に、list_aiueoからたちつてとへは どのようにたどり、そしてその記述方法をお聞きしたかったのです。 >どういう条件 より深く考えないといけないのかもしれません。 ありがとうございます。

0

ベストアンサー

「あいうえお」のaタグを取得し、変数list_aiueoに代入した場合
list_aiueoから「たちつてと」のaタグを取得するには
どのようにすればよいのでしょうか。

例を示すのは良いことですが、ルールを示すことも必要です。「あいうえお」と「たちつてと」は親子関係でもないですし、どういうルールなのか伝わりません。
ルールが「list_aiueo の親 ul の中にある ul の中にある data-num を持つ <a> すべて」であれば list_aiueo.parentNode.querySelectorAll('ul a[data-num]') でしょうか。

投稿2022/11/20 21:37

int32_t

総合スコア17258

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

skillUp

2022/11/22 00:46 編集

一旦、親要素へと辿るのですね。 確かに、親から辿ればわかりやすいです。 list_aiueoの兄弟の子供の子供の子供 というように辿る必要があると思い、 その方法を探していました。 勉強になります。 例といいますか、あてずっぽうでしかも間違えて書いたものであったため 誤って伝わってしまったように思います。すみません。 ありがとうございます。

0

どのようにするのが一般的でしょうか。

一般的とかそういう問題ではなく、どういう基準で選びたいのかをまずは示してください。

たとえば、どんなHTMLの状況になっても「このエレメント」と決めておきたいのであれば、そこにidを振っておけばいい、ということになります。

投稿2022/11/20 14:06

maisumakun

総合スコア141545

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

skillUp

2022/11/20 14:50

うまく文章で伝えられなかったので 質問文を訂正しました。 再度お読みいただけると幸いです。 質問を要約すると 「あいうえお」のaタグをJSで取得し、変数list_aiueoに代入した場合 list_aiueoから(例:list_aiueo.children)始めて「たちつてと」のaタグを取得するには どのようにすればよいのでしょうか。 ※この場合、IDを振るなどせず、現状のHTMLには修正を加えないものとします。
maisumakun

2022/11/20 22:17

「あいうえおからたちつてとを探す」以外のパターンはありうるのでしょうか? (それがなければ、「あいうえおとは無関係に、文書全体からたちつてとを探す」でも問題ない、ということになります)
skillUp

2022/11/22 00:29

全体像ではなく、知りたい個所の一部を切り取って質問したためか お答えが若干かみ合っていないのかもしれません。 特に、list_aiueoから始めて という部分が不思議に感じるのかもしれませんね。 単にlist_aiueoから辿って「たちつてと」を取得するにはどのように 記述すればよいかをお聞きしたかったのです。 list_aiueoから始める必要がなければ もっと違う方法はあると思います。 >「あいうえおからたちつてとを探す」以外のパターン は今回は必要ないので考える必要がないと思っています。 書き方がまだ中途半端だったためか混乱させてしまいましたね。すみません。 ありがとうございます。
maisumakun

2022/11/22 00:39 編集

> 単にlist_aiueoから辿って「たちつてと」を取得するにはどのように 記述すればよいかをお聞きしたかったのです。 ですから、その「たどり方」を聞きたいのです。 skillUpさんにとっては自明なことなのかもしれませんが、「あいうえお」から見て、どんな位置にある、どのような条件を持ったエレメントを取得したいのか、日本語で提示してください。 (もう1例あったほうが、「文書全体からたちつてとを取る」ような別手段が出ないので、むしろわかりやすいです)

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。