【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>
const piyopiyos = document.querySelectorAll('.hogehoge .piyopiyo'); console.log(piyopiyos);
document.querySelectorAll(selector)
のうち、selector
はCSSのクラス指定と方法は同じになります。
取得した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の要素を持つものをすべてセンタリングします。