DOMの操作、要素の取得(getElementById, getElementsByClassName, querySelector)

Edgeの拡張機能を自作する(プルダウンの中身を削る)にて見様見真似で使ってみたけれど、DOM(Document Object Model)においては「要素を取得する」という行為が重要らしい。

もうちょっとココを改めて学んでみる。

タグで取得する

以前の記事でやってたもの。これしかないと思ってた。

const pObject = document.querySelector("p");

属性セレクターを使うともうちょっと細かい条件をつけて取得できる。

const pObject = document.querySelector('p[class="btn"]');

クラスで取得する

先述のタグで取得するにてclass="xxxx"という属性セレクターをつけてしまったが、最初からクラスを対象に取得する場合は以下のように書けるらしい

const pObject = document.querySelector(".btn");

.から始まるクラス、みたいな指定の仕方。

idで取得する

これもきっと属性クラスターにて[id="xxx"]っって指定できるのだろうけど、個別の実装がある。

const pObject = document.querySelector("#menu");

querySelectorとgetElement...の違い

参考:要素を取得する3つのJSメソッド 〜挙動の違いをまとめてみた〜

使いやすいやつ使って良さそう。

例題

sample.html

<div id="title" class="style-a">わらびもち</div>
<div class="style-a">さくらもち</div>

getElementById

idで唯一を特定して取得。getElementByIdのなかでid名は#をつける必要がない。

'use strict'
const title = document.getElementById("title");
console.log(title);

出力結果

div#title.style-a
0 = 'わらびもち'
[[Prototype]] = Object
ノード属性 = ...

getElementsByClassName

classが一致するものを配列で取得。なのでgetElementsByClassNameになる。

'use strict'
const classes = document.getElementsByClassName("style-a");
console.log(classes);

出力結果

HTMLCollection(2) [div#title.style-a, div.style-a, title: div#title.style-a]
0 = <div id="title" class="style-a">...</div>
1 = <div class="style-a">...</div>
(以下省略)

querySelector

柔軟にできるやつ

idで取得

こっちは#をつける必要がある。

classNameで取得

こっちは.をつける必要がある。

classNameで全部取得

ただのクラス名指定だと1個しか取れない。全部とるときはquerySelectorAll()らしい。

実践

'use strict'
const title = document.querySelector('#title');
console.log(title);
console.log("------------");
const classMono = document.querySelector('.style-a');
console.log(classMono);
console.log("------------");
const classes = document.querySelectorAll('.style-a');
console.log(classes);

出力結果

div#title.style-a
0 = 'わらびもち'
...
------------
div#title.style-a
0 = 'わらびもち'
...
------------
NodeList(2) [div#title.style-a, div.style-a]
0 = <div id="title" class="style-a">...</div>
1 = <div class="style-a">...</div>
...