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

Question

実現したいこと

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

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

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

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

該当のソースコード

<div class="wrappInner">
  <ul>
    <li><a href="#" data-num="01">あいうえお</a></li>
    <li>
      <ul>
        <li><a href="" data-num="04">たちつてと</a></li>
      </ul>
    </li>
  </ul>
</div>
<div class="wrappInner">
  <ul>
    <li><a href="#" data-num="02">かきくけこ</a></li>
  </ul>
</div>
<div class="wrappInner">
  <ul>
    <li><a href="#" data-num="03">さしすせそ</a></li>
  </ul>
</div>

<button type="button">ボタン</button>

//ボタン要素
const btn = document.querySelector("button");

//クリック後の動作
btn.addEventListener("click", function(){
    addDatasetAction();

  function addDatasetAction() {
  const lists = document.querySelectorAll('.wrappInner>ul>li>a');
  for(let list of lists){
    list.dataset.num = "1000";
    console.log(list);
  }
}
});

Answer 1

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

Comments

[skillUp]

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

Answer 2

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

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

Comments

[skillUp]

一旦、親要素へと辿るのですね。
確かに、親から辿ればわかりやすいです。
list_aiueoの兄弟の子供の子供の子供 というように辿る必要があると思い、
その方法を探していました。
勉強になります。

例といいますか、あてずっぽうでしかも間違えて書いたものであったため
誤って伝わってしまったように思います。すみません。

ありがとうございます。

Answer 3

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

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

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

Comments

[skillUp]

うまく文章で伝えられなかったので
質問文を訂正しました。
再度お読みいただけると幸いです。

質問を要約すると
「あいうえお」のaタグをJSで取得し、変数list_aiueoに代入した場合
list_aiueoから（例：list_aiueo.children）始めて「たちつてと」のaタグを取得するには
どのようにすればよいのでしょうか。
※この場合、IDを振るなどせず、現状のHTMLには修正を加えないものとします。

[maisumakun]

「あいうえおからたちつてとを探す」以外のパターンはありうるのでしょうか？

（それがなければ、「あいうえおとは無関係に、文書全体からたちつてとを探す」でも問題ない、ということになります）

[skillUp]

全体像ではなく、知りたい個所の一部を切り取って質問したためか
お答えが若干かみ合っていないのかもしれません。
特に、list_aiueoから始めて という部分が不思議に感じるのかもしれませんね。
単にlist_aiueoから辿って「たちつてと」を取得するにはどのように
記述すればよいかをお聞きしたかったのです。

list_aiueoから始める必要がなければ
もっと違う方法はあると思います。
＞「あいうえおからたちつてとを探す」以外のパターン
は今回は必要ないので考える必要がないと思っています。

書き方がまだ中途半端だったためか混乱させてしまいましたね。すみません。
ありがとうございます。

[maisumakun]

> 単にlist_aiueoから辿って「たちつてと」を取得するにはどのように
記述すればよいかをお聞きしたかったのです。

ですから、その「たどり方」を聞きたいのです。

skillUpさんにとっては自明なことなのかもしれませんが、「あいうえお」から見て、どんな位置にある、どのような条件を持ったエレメントを取得したいのか、日本語で提示してください。

（もう1例あったほうが、「文書全体からたちつてとを取る」ような別手段が出ないので、むしろわかりやすいです）