JavaScript、idがない要素を取得したい

Question

<div id="aa">
<div id="bb">
<div id="cc">
<p class="c1"><a href="#1" data-id="d1">いぬ</a></p>
<p class="c2"><a href="#2 data-id="d2">ねこ</a></p>
<p class="c3"><a href="#3" data-id="d3">うさぎ</a></p>
</div>
</div>
</div>

jQueryをつかわず、JavaScriptだけで、「ねこ」を取得したいです。

document.querySelector(''); などをつかうのかなあとしか思いついておりません、すみません・・・。

Comments

[m.ts10806]

>document.querySelector(''); などをつかうのかなあとしか思いついておりません

まず、思ったようにやってみてください。

[kagua]

document.getElementById("cc").children.onclick = function() {
console.log(document.querySelector('.c2'));
};
でしょうか？

[kagua]

let a = document.querySelector('.c2 a');
console.log(a.innerText);

これでいかがでしょうか？

[m.ts10806]

実行してみてどうだったか
起きた問題を解決する方向で質問してください。(質問は編集できます)
質問ではなく作業依頼になってますので。

Answer 1

console.log(document.querySelector('[data-id="d2"]').textContent);

こういうことでしょうか？ご希望のものに沿えたら幸いです。

Comments

[kagua]

ありがとうございます。
Uncaught TypeError: Cannot read properties of null (reading 'textContent')
がでてしまいました。

[Maximillion]

ご提示のコードにダブルクォーテーションが足りていない部分があると思います
<p class="c2"><a href="#2 data-id="d2">ねこ</a></p>
↓
<p class="c2"><a href="#2" data-id="d2">ねこ</a></p>

[kagua]

ありがとうございます！data属性も、class名のように、指定できることがわかり、助かりました。