Contents
もうすぐ梅雨かな
ここんところ、天気が優れない日々が続いてますね。
もうすぐ梅雨入りかな？
ジメジメやだなー洗濯物乾かないし…って長年思ってたけど、
今年はドラムを購入したのでそんな悩みは消滅しました！！素晴らしいですね。
ドラムを購入するのを迷っている方、超絶にオススメします。人生変わりました。
洗剤自動投入機能が特にオススメですね。
…ってなんのブログ。。
はい、今回は JavaScript で要素の取得です。超基本ですが…
まぁ例のごとく知らないことが多いもので。おさらい兼ねて書きました。
前回ブログはこちらから↓
こんな感じの構成になっている場合を考えてみます。
<div class="parent1">
<div class="child">1番目の parent1 の child だよ</div>
<div class="child">2番目の parent1 の child だよ</div>
<div class="child">3番目の parent1 の child だよ</div>
</div>
<div class="parent2">
<div class="child">1番目の parent2 の child だよ</div>
<div class="child">2番目の parent2 の child だよ</div>
<div class="child">3番目の parent2 の child だよ</div>
</div>1番目の子要素
擬似クラスを使用
CSS の擬似クラスで最初の要素を取得します。
div:first-child じゃなくて、:first-child だけ書いたらどうなるかと思ったけど、div つけないと取得できなかったです。タグ名を指定する必要があるみたいですね。
const firstChild = document.querySelector('.parent1 div:first-child');
console.log(firstChild); Element.firstElementChild
最初の子の要素ノードを返します。要素ノードとは HTML の div とかのタグを指します。
const firstElementChild = document.querySelector('.parent1').firstElementChild;n番目の子要素
擬似クラスを使用
擬似クラスを使用して、n 番目の要素を取得します。
const secondChild = document.querySelector('.parent1 div:nth-child(2)');最後の子要素
擬似クラスを使用
const lastChild = document.querySelector('.parent1 div:last-child');Element.lastElementChild
const lastElementChild = document.querySelector('.parent1').lastElementChild;指定のクラスを持つ全ての子要素
querySelectorAll
querySelectorAll で指定した親クラスの子要素全てを取得します。
child クラスを持つ要素は6つありますが、親要素 parent1 を指定しているので、parent1 の子要素のみ取得することができました。よって変数 chiled は3つの NodeList が返ってきます。
また、child[0] のようにインデックスを指定してあげれば、そのうちの特定の要素を取得することができます。
const child = document.querySelectorAll('.parent1 .child');これ試しに const child = document.querySelectorAll(‘.child .parent1’); って逆に書いたらどうなるんだろ？って思ったら、NodeList は空の配列([])、child[0]は undifined となりました。
querySelectorAll(‘.親要素 .子要素’) の順でなければならないようですね。
Element.chilren
指定した親要素の子要素全てを HTMLCollection として返します。
const parent1 = document.querySelector('.parent1').children;
console.log(parent1);HTMLCollection(3) [div.child, div.child, div.child]
0: div.child
1: div.child
2: div.child
length: 3Node.childNodes
指定した親要素の子ノード全てを NodeList として返します。
const parent1 = document.querySelector('.parent1').childNodes;
console.log(parent1);NodeList(7) [text, div.child, text, div.child, text, div.child, text]
0: text
1: div.child
2: text
3: div.child
4: text
5: div.child
6: text
length: 7テンプレートリテラルを使用
下記のようにテンプレートリテラルを使用することもできます。
const parentName = '.parent1';
const parent = document.querySelectorAll(`${parentName}, .child`);いや〜、、これは便利ですね！！
親要素が可変な場合でも対応できるという…
まとめ
今回は、JavaScript 指定の親要素から特定の子要素を取得する方法についてまとめてみました。
何かの参考になれば幸いです。
ここまでお読みいただき、ありがとうございました！
