最新！JavaScript入門講座 DOMで要素の操作をする方法を解説

JavaScript
2021.11.15
この記事は約18分で読めます。

前回は、DOMの中身を書き換えることを学びました。
DOMを扱うには、基本的にはHTMLから要素を取得し、中身を変更したりするのが基本です。しかし、それだけでは表現できることが限られます。
そこで、今回はDOMで要素の生成、追加、置換、削除といった基本操作についてわかりやすく解説していきます。

本記事のペルソナ
  • JavaScript初学者の方
  • DOMを学びたい方
  • DOMで要素の生成・置換・追加・削除を学びたい方

DOMの操作

要素の生成

最初に、要素の生成について解説していきます。
DOMを扱うには、予めHTMLファイルに記載さているHTML要素を取得することで操作を可能にしています。

しかし、HTMLファイルに存在しない要素をDOMでゼロから生成することが可能です。それが、DOM要素の生成です。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width = device-width ,initial-scale = 1" />
        <meta name="robots" content="noindex,nofollow" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>
            JavaScript入門講座
        </title>
        <script>

        </script>
    </head>
    <body>
        <h1>DOM入門</h1>
        <div id="js-elem1">
            <p id="elem2"></p>
            <p id="elem3"></p>
        </div>
        
        <script src="script.js"></script>
    </body>
</html>
let doc = document;
let elemMain = doc.createElement("main");

let elemfoo = doc.createElement("footer");

console.log(elemMain);
console.log(elemfoo);

HTMLファイルとJSファイルに上記のように記述して、ブラウザで開いてみてください。
HTMLファイルに記述していない要素が、コンソールに出力されているのが分かると思います。このように、取得するだけでなく、JavaScript側で要素を定義することも可能です。

要素を作ることも組み合わせることで、表現できる幅が広がりますね。

要素を追加する

続いては、要素を追加する方法を解説していきます。
先程のように、要素を生成しただけではブラウザには表示されません。そこで、要素を追加してあげることで表示されるようになります。

親要素の直下に追加

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width = device-width ,initial-scale = 1" />
        <meta name="robots" content="noindex,nofollow" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>
            JavaScript入門講座
        </title>
        <script>

        </script>
    </head>
    <body>
        <h1>DOM入門</h1>
        
        <script src="script.js"></script>
    </body>
</html>
let doc = document;
let elemMain = doc.createElement("main");
let elemH2 = doc.createElement("h2");
let elemParam = doc.createElement("p");
 
elemH2.textContent = "証券口座を作ろう";
elemParam.textContent = "証券口座は現代の富の魔法です.";

elemMain.appendChild(elemH2);
elemMain.appendChild(elemParam);
doc.body.appendChild(elemMain);

実行すると、ブラウザに文字が表示されます。
順番に説明していきます。

要素を追加するにはいくつか方法があります。この例では、appendChildを使っています。
DOMは階層構造になっていることを下記の記事で解説しています。

JavaScript入門講座ーDOMを初学者の方向けにわかりやすく解説
JavaScriptはウェブサイトの見た目を操作することができます。その時、DOMというものを使ってウェブサイトを作っていきます。JavaScript奥が深く、様々な学ぶべきものが多い言語ですが、DOMはJavaScriptを学ぶ上で最も...
www.s-gakuenblog.com

appendChildはある要素の子として要素を格納します。つまり階層構造で下に一つ増やす形になります。

追加する場所を指定する

先程は親要素の直下に追加しました。
もちろん、どこに要素を追加するを指定することが可能です。順番に見ていきましょう。

let doc = document;
let elemMain = doc.createElement("main");
let elemH2 = doc.createElement("h2");
let elemParam = doc.createElement("p");
let elemDiv = doc.createElement("div");
const nav = doc.getElementById("nav");
const navChild1 = doc.getElementById("nav1");
const navChild3 = doc.getElementById("nav3");
 
elemH2.textContent = "証券口座を作ろう";
elemParam.textContent = "証券口座は現代の富の魔法です.";

elemMain.appendChild(elemH2);
elemMain.appendChild(elemParam);

//クラス名とidを決定している
nav.setAttribute("class","navigation");
elemDiv.id = "nav4";
elemDiv.textContent = "About";
nav.insertBefore(elemDiv,navChild1);

この例では、同じ階層に要素を追加しています。
その中でも、一番上にある兄弟関係にある要素の前に追加しています。

それを行うには、insertBeforeというメソッドが使えます。これは親要素に対して、追加する要素とその親の子要素を引数にします。


また、さらに他の例も見ていきましょう。

let doc = document;
let elemMain = doc.createElement("main");
let elemH2 = doc.createElement("h2");
let elemParam = doc.createElement("p");
let elemDiv = doc.createElement("div");
let elemLink = doc.createElement("a");
const nav = doc.getElementById("nav");
const navChild1 = doc.getElementById("nav1");
const navChild3 = doc.getElementById("nav3");
 
elemH2.textContent = "証券口座を作ろう";
elemParam.textContent = "証券口座は現代の富の魔法です.";

elemMain.appendChild(elemH2);
elemMain.appendChild(elemParam);

//クラス名とidを決定している
nav.setAttribute("class","navigation");
elemDiv.id = "nav4";
elemDiv.textContent = "About";
nav.insertBefore(elemDiv,navChild1);

elemLink.href = "https://www.rakuten-bank.co.jp/";
elemLink.textContent = "リンク";

nav.after(elemMain);
navChild3.before(elemLink);

こちらは先程の内容も含まれています。順番に見ていきましょう。
afterメソッドは、ある要素に対してその直後に追加します。appendChildと違うところは、親子関係になるのではなく、同じ階層、兄弟関係になります。

逆にbeforeは直前に追加します。

要素の置換

続いては要素の置換について解説していきます。
置換はとてもわかり易く、要素同士を交換します。

let doc = document;
let elemMain = doc.createElement("main");
let elemH2 = doc.createElement("h2");
let elemParam = doc.createElement("p");
let elemDiv = doc.createElement("div");
let elemLink = doc.createElement("a");
const nav = doc.getElementById("nav");
const navChild1 = doc.getElementById("nav1");
const navChild2 = doc.getElementById("nav2");
const navChild3 = doc.getElementById("nav3");
const elemChenge = doc.createElement("p");

elemH2.textContent = "証券口座を作ろう";
elemParam.textContent = "証券口座は現代の富の魔法です.";

elemMain.appendChild(elemH2);
elemMain.appendChild(elemParam);

//クラス名とidを決定している
nav.setAttribute("class","navigation");
elemDiv.id = "nav4";

elemDiv.textContent = "About";
nav.insertBefore(elemDiv,navChild1);

elemLink.href = "https://www.rakuten-bank.co.jp/";
elemLink.textContent = "リンク";
elemChenge.textContent = "楽天銀行・楽天証券";

nav.after(elemMain);
navChild3.before(elemLink);

//置換
elemParam.replaceWith(elemChenge);

最後の行に追加したものが、置換をするメソッドになります。
replaceWithは置き換える対象のメソッドを引数にとります。

また、親の要素から子ノードを置換するreplaceChildもあります。こちらは、置き換える要素と置き換える先のメソッドの２つを引数にします。

要素の削除

最後に、要素の削除について解説していきます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width = device-width ,initial-scale = 1" />
        <meta name="robots" content="noindex,nofollow" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>
            JavaScript入門講座
        </title>
        <script>

        </script>
    </head>
    <body>
        <h1>DOM入門</h1>
        <nav id="nav">
            <div id="nav1">TOP</div>
            <div id="nav2">menu</div>
            <div id="nav3">Survices</div>
        </nav>

        
        <footer id="ftr">
            <p id="foo1">@ copyright</p>
            <p id="foo2">フッター</p>
        </footer>
        <script src="script.js"></script>
    </body>
</html>
let doc = document;
let elemMain = doc.createElement("main");
let elemH2 = doc.createElement("h2");
let elemParam = doc.createElement("p");
let elemDiv = doc.createElement("div");
let elemLink = doc.createElement("a");
const nav = doc.getElementById("nav");
const navChild1 = doc.getElementById("nav1");
const navChild2 = doc.getElementById("nav2");
const navChild3 = doc.getElementById("nav3");
const elemChenge = doc.createElement("p");
const footer = doc.getElementById("ftr");
const foo2 = doc.getElementById("foo2");

elemH2.textContent = "証券口座を作ろう";
elemParam.textContent = "証券口座は現代の富の魔法です.";

elemMain.appendChild(elemH2);
elemMain.appendChild(elemParam);

//クラス名とidを決定している
nav.setAttribute("class","navigation");
elemDiv.id = "nav4";

elemDiv.textContent = "About";
nav.insertBefore(elemDiv,navChild1);

elemLink.href = "https://www.rakuten-bank.co.jp/";
elemLink.textContent = "リンク";
elemChenge.textContent = "楽天銀行・楽天証券";
elemChenge.re
nav.after(elemMain);
navChild3.before(elemLink);

elemParam.replaceWith(elemChenge);

foo2.remove();

要素の削除にはremoveメソッドを使います。このメソッドは、自身の要素を削除します。
その他に、子要素を削除するremoveChildメソッドもあります。このメソッドは、引数として子要素を指定することで、削除をすることができます。

let doc = document;
let elemMain = doc.createElement("main");
let elemH2 = doc.createElement("h2");
let elemParam = doc.createElement("p");
let elemDiv = doc.createElement("div");
let elemLink = doc.createElement("a");
const nav = doc.getElementById("nav");
const navChild1 = doc.getElementById("nav1");
const navChild2 = doc.getElementById("nav2");
const navChild3 = doc.getElementById("nav3");
const elemChenge = doc.createElement("p");
const footer = doc.getElementById("ftr");
const foo2 = doc.getElementById("foo2");

//略

footer.removeChild(foo1);

まとめ

では、まとめに入ります。
今回は下記のようなことを学びました。

まとめ
  • DOMの基本操作
  • 生成 createElement
  • 追加 appendChild, insertBefore, after, before
  • 置換 replaceWith, replaceChild
  • 削除 remove, removeChild

では今回は個々までとなります。

お疲れさまでした。

参考文献

JavaScriptによるDOM操作 - Qiita
インターフェース(単数ノード) Node └ Element │ └ HTMLElement │ ├ HTMLAnchorElement │ ├ HTMLAreaElement │ ├ HTMLAu…
qiita.com
【DOM基礎】要素内容の取得・設定／ノードの作成・挿入・削除 - Qiita
前回の続きです。要素内容の取得・設定innerHTML要素内のHTMLを取得・設定できます。// 取得const html = element.innerHTML;// 設定eleme…
qiita.com
Node - Web API | MDN
DOM の Node インターフェイスは、他の多くの DOM API オブジェクトのベースとなる抽象的な基底クラスです。したがって、これらのオブジェクト型と類似しており、しばしば交換して使用することができます。抽象クラスであるため、単なる Node オブジェクトというものは存在しません。 Node の機能を実装している...
developer.mozilla.org
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/
www.freecodecamp.org
タイトルとURLをコピーしました