要素を取得する

JavaScriptでWebページを動かす / 全 5 枚

JavaScriptでWebページを動かす - 要素を取得する

木の中から目的の要素を探す

書き換えたい部品を先に見つけないと、何も始まりません。探すのに使うのが querySelector と querySelectorAll です。探しかたの指定には、CSS で使うセレクタの文字列をそのまま渡します。

同じ .work という 1 つの文字列で、当たる相手の数が変わります。次の図解で、その数を自分で数えます。

1 つだけ欲しいときが querySelector、全部欲しいときが querySelectorAll です。

const name = document.querySelector("#profile-name");
console.log(name.textContent); // 山田はな

const works = document.querySelectorAll(".work");
console.log(works.length); // 3

1 / 5

← → キーでも送れます

このスライドが付いているレッスンを開く