Kuzunoha-NEのブログ

プログラミングなどの勉強をしてます

【Javascript】querySelectorAllでDomをとるかねぇ

こんばんは葛の葉です。

今回はdocument.querySelectorAll()をつかってDomをとります。

下記のようにhtml内でpiyopiyoクラスの要素が複数あります。

<!DOCTYPE html>
<html lang="ja">
<body>
    <div class="hogehoge">
        <div class="piyopiyo">
            <p>大腸菌がしゃっくりする</p>
        </div>
        <div class="piyopiyo">
            <b>ほんど</b>
        </div>
    </div>
    <script src="./test.js"></script>
</body>
</html>

f:id:Kuzunoha-NE:20190815222355p:plain
上記のHTMLのスクリーンショット

const piyopiyos = document.querySelectorAll('.hogehoge .piyopiyo');
console.log(piyopiyos);

document.querySelectorAll(selector)のうち、selectorCSSのクラス指定と方法は同じになります。

取得したDomをプリントしてみる。

piyopiyos変数に代入しましたのでconsoel.log()を使って出力してみます。

NodeList(2) [div.piyopiyo, div.piyopiyo]
0: div.piyopiyo
1: div.piyopiyo
length: 2
__proto__: NodeList
entries: ƒ entries()
forEach: ƒ forEach()
item: ƒ item()
keys: ƒ keys()
length: (...)
values: ƒ values()
constructor: ƒ NodeList()
Symbol(Symbol.iterator): ƒ values()
Symbol(Symbol.toStringTag): "NodeList"
get length: ƒ length()
__proto__: Object

querySelectorAllで返却されるものはNodeListというObjectになります。

NodeListイテレータでも配列でも無いようです。今回、.hogehoge .piyopiyoのクラスに相当する要素は2つあります。以下の2つのHtmlElementが格納されています。

<div class="piyopiyo">
    <p>大腸菌がしゃっくりする</p>
</div>
<div class="piyopiyo">
    <b>ほんど</b>
</div>

piyopiyos[0]が最初の要素になります。

const piyopiyos = document.querySelectorAll('.hogehoge .piyopiyo');
console.log(piyopiyos[0].innerText) // 大腸菌がしゃっくりする
console.log(piyopiyos[1].innerText) // ほんど

forEachを使って要素全てに適応

NodeListはArrayの.forEachと似ているメソッドを持っているようです。コールバック関数を使います。引数はNodeListの内の要素を1つずつ代入していき、すべての要素が一巡するまでループします。pythonで言えばfor piypiyo in piyopiyosといった感じです。

const piyopiyos = document.querySelectorAll('.hogehoge .piyopiyo');

piyopiyos.forEach(function (piyopiyo) {
    console.log(piyopiyo.innerText);
})

// 大腸菌がしゃっくりする
// ほんど

piyopiyoはHtmlElementなのでクラスや属性を追加することも可能です。

const piyopiyos = document.querySelectorAll('.hogehoge .piyopiyo');

piyopiyos.forEach(function (piyopiyo) {
    piyopiyo.setAttribute("align", "center");
})

piyopiyoの要素を持つものをすべてセンタリングします。

f:id:Kuzunoha-NE:20190815230443p:plain
センタリングのHTML