JavaScriptの基本的なDOM操作が解る「チラ見表」

こんにちは、トッドです。

JavaScriptを学習し始めるとDOM操作と呼ばれる単元に遭遇します。DOMというのは Document Object Model の略称であり、ノードツリーで表現される文章構造を操作する機能を提供する Web API の一つです。簡単に言うと、HTML や CSS を JavaScript 側から操作することが出来る仕組みです。

基本的な DOM 操作について書いてみました。

下記で示している HTML は以降で紹介するコードの雛形として利用する body 要素です。

是非エディター等に、コピペして頂いて要素の動き方を確認しながら読み進めてください。

HTML

<div class="container">
    <ul class="list">
      <li id="active">item_one</li>
      <li>item_two</li>
      <li>item_three</li>
    </ul>
    <div class="container">
      <div id="box">Hello</div>
      <div id="box2">World</div>
    </div>
  </div>

色々な要素を取得する
新しい要素の生成/追加/除去
要素の置き換え/属性の付与＆取得

色々な要素を取得する

ID名に一致する要素を取得する

JavaScript

const elm = document.getElementById("active");
console.log(elm); // <li id="active">item_one</li>

クラス名に合致する要素を取得する

JavaScript

const elm = document.getElementsByClassName("container");
console.log(elm); // class名に合致する要素をまとめた配列を取得する

name属性に合致する要素を取得する

JavaScript

const elm = document.getElementsByName("example");
console.log(elm); // name属性に合致する要素を配列で取得する

タグ名に合致する要素を取得する

JavaScript

const elm = document.getElementsByTagName("div");
console.log(elm); // タグ名に合致する要素を取得する

セレクター方式で要素を取得する

JavaScript

const elm = document.querySelector("#active");
console.log(elm); // 単一取得

const elm2 = document.querySelectorAll(".container");
console.log(elm2); // 全て取得

セレクター方式というのは、CSS でスタイルを選定するときに「.」「#」を用いて class なのか？id 値なのか？を、判別するときに使っているあのやり方です。

親子/前後の要素を取得する

JavaScript

const list = document.querySelector(".list");

console.log(list.children); // 指定要素の子要素を取得
console.log(list.firstElementChild); // 指定要素内の先頭要素を取得
console.log(list.lastElementChild); // 指定要素内の末尾要素を取得
console.log(list.firstElementChild.nextElementSibling); // 指定要素の兄弟関係にある（弟）取得
console.log(list.lastElementChild.previousElementSibling); // 指定要素の兄弟関係にある（兄）取得
console.log(list.parentNode); // 指定要素の親要素を取得

新しい要素の生成/追加/除去

親要素の末尾に新しく生成した要素を追加する

JavaScript

const list = document.querySelector(".list");
const newListItem = document.createElement("li");
// ↑新しい<li>要素を生成する
newListItem.textContent = "item_four";
// ↑要素にテキストノードを追加する
list.appendChild(newListItem);
// ↑親要素の末尾に生成した要素を追加する
console.log(list);

指定要素の直前に要素を追加する

JavaScript

const list = document.querySelector(".list");
const newListItem = document.createElement("li");
newListItem.textContent = "item_zero";
list.insertBefore(newListItem, list.firstElementChild);
// ↑list先頭要素の直前にnewListItemを追加している
console.log(list);

要素の末尾に追加するには appendChild()を使えば良いのですが、先頭に追加するには insertBefore()を使うか、後述するものを使う必要があります。

指定要素の前後に要素を追加する

JavaScript

const list = document.querySelector(".list");
const listItem_two = list.children.item(1);

const newItem_a = document.createElement("li");
newItem_a.textContent = "space1";
const newItem_b = document.createElement("li");
newItem_b.textContent = "space2";

listItem_two.before(newItem_a); // 直前に追加
listItem_two.after(newItem_b); // 直後に追加

文字列をHTMLコードとしてオプションの位置に追加する

JavaScript

const list = document.querySelector(".list");
const newListItem = `<li id="aaa">New Item</li>`;
list.insertAdjacentHTML("beforeend", newListItem);
console.log(list);

insertAdjacentHTML()の第一引数には位置を決めるオプションがあり、それぞれ

beforebegin 親要素の直前
afterend 　親要素の直後
afterbigin 　親要素内の先頭
beforeend 　親要素内の末尾

の４種類がある。

要素を除去する

JavaScript

const list = document.querySelector(".list");

const firstListItem = list.firstElementChild;
list.removeChild(firstListItem);
console.log(list);

const lastListItem = list.lastElementChild;
lastListItem.remove();
console.log(list);

親要素からたどって子要素を除去するのは remobeChild()。一方、除去したい要素を特定して処理を行う場合は remove()がある。

要素の置き換え/属性の付与＆取得

親要素をたどって要素と要素を置き換える

JavaScript

const parentBox = document.querySelectorAll(".container").item(1);

const old_Item = document.querySelector("#box");
// ↓新しい<div>要素を生成し、クラスとテキストを追加している
const new_Item = document.createElement("div");
new_Item.classList.add("new_box");
new_Item.textContent = "See you";

parentBox.replaceChild(new_Item, old_Item);
console.log(parentBox);

要素.replaceChild()は親要素の子要素のコレをコレに置き換えるという使い方です。

要素と要素を置き換える

JavaScript

// const parentBox = document.querySelectorAll(".container").item(1);

// const old_Item = document.querySelector("#box");
// const new_Item = document.createElement("div");
// new_Item.classList.add("new_box");
// new_Item.textContent = "See you";

// さっきと同じ↑

old_Item.replaceWith(new_Item);
console.log(parentBox);

要素.replaceWith()は replaceChild()と、ほぼ同じです。異なるところは置き換える要素に直接対応しているところです。

要素の属性値の設定＆取得＆消去

JavaScript

const elm_li = document.getElementById("active");
console.log(elm_li.getAttribute("id"));
elm_li.setAttribute("class", "main");
console.log(elm_li);
elm_li.setAttribute("id", "point");
console.log(elm_li);
elm_li.removeAttribute("id", "point");
console.log(elm_li);
console.log(elm_li.hasAttribute("active"));

要素.getAttribute()は引数に属性名を与えると一致したものを返ます。

要素.setAttribute()は第一引数に属性名、第二引数に名称の形で指定することで要素に属性を付与できます。

要素.removeAttribute()は属性を除去します。

要素.hasAttribute()は引数で与えたものを要素が持っているか否やを判定してくれます。

要素のクラス名の設定＆取得＆消去

JavaScript

const elm = document.querySelector(".list");
elm.classList.add("items");
elm.classList.remove("list");
console.log(elm);
console.log(elm.classList.contains("list"));

elm.classList.toggle("zzz");
console.log(elm);

classList.add()は指定要素に引数で与えるクラス名を指定要素に追加します。

classList.remove()は指定要素に存在するクラス名を引数で与えると除去します。

classList.contains()は引数で与えたクラス名と指定要素に付属しているクラス名が一致した場合 true を返し、不一致の場合は false を返ます。

classList.toggle()は指定要素に引数で与えたクラス名が付与されていればクラスを取り外し、付与されていなければ取り付ける。

JavaScript側からCSSを変更する

JavaScript

const list = document.querySelector(".list");
// list.style.backgroundColor = "black";
// ↓↑これでも良い
list.setAttribute(
  "style",
  "color:white; font-size:1.3rem; font-weight:bold; list-style:none; text-align:center; padding:1rem 0; margin:1rem 0; background-color:black"
);
console.log(list);

要素.style.〇〇 = ‘値’;の形式で JavaScript 側から CSS を設定することができます。CSS ではハイフン(‘-‘)で単語を区切っていたところは大文字にしてあげる必要があります。ex. background-color = backgroundColor。

一方で setAttribute()を使ってスタイルを設定することもできます。

最後まで読んでくれてありがとうございました。

追記を考えています。