Zenn
🦊

Javascript ”Learn DOM Manipulation”

2023/08/15に公開
JavaScript
#
dom
tech

🍎DOMとは？

WEBページ(HTML、XML)のコンテンツまた構造、スタイル要素を構造化させて表現そます。プログラミング言語が該当文書にアクセスして読み取り操作できるようAPIを提示するインターフェース(interface)です。
つまり、JavaScriptのようなスクリプト言語が簡単にWEBページにアクセスして操作できるように接続する役割をしています。

DOM は、HTML が持つ要素の親子関係を、ツリー構造で表現します。たとえば以下の HTML を読み込むと

<html>
  <head>
    <title>A学校サイト</title>
  </head>
  <body>
    <article>
      <h1>A学校</h1>
      <ul>
        <li>1－1組</li>
        <li>1－2組</li>
        <li>1－3組</li>
      </ul>
    </article>
  </body>
</html>


ブラウザ内部にこのような DOM データが構築されます。
画面に表示するまでの流れはこんな感じです。
ここからJavaScript を使うと、ブラウザ内部DOM にアクセスして、内容を書き換えることができます。
DOM が書き換えられると、自動的に画面の内容が新たな DOM に合わせて再描画される仕組みになっています。

🍎DOMを操作方法

要素探し

  • document.getElementById("id"): 要素IDで要素を探す
  • document.getElementByTagName("tag name"): tag nameで要素を探す
  • document.getElementByClassName("class name"): class nameで要素を探す
  • document.querySelectorAll("selector"): CSS selectorを全部探す
  • document.querySelector("selector"): CSS selectorの中から最初の一つだけ探す

要素照会

選択したDOM要素を照会できるプロパティが2つあります。

  • textContent : 選択した要素からHTML要素を削除した純粋なテキスト データの値
  • innerHTML : 選択した要素のHTMLタグをそのままの値、セキュリティに脆弱（ユーザーから配信されたコンテンツを追加する際は使用しない方法が良い）
const content = document.getElementsByTagName('p')[0];

content.textContent;  // Simple HTML Text
content.innerHTML;    // Simple <b>HTML</b> Text

要素修正

選択した要素を修正するときは、新しい値を照会したまま適用

content.textContent = "Happy HTML file";
content.innerHTML = "Happy <i>HTML</i> file";

要素作成、追加

createElementを使用して新しい要素を作成

// Create a Node
const p1 = document.createElement('p');
const p2 = document.createElement('p');

// Add new content to a node
p1.textContent = "foo";
p2.textContent = "bar";

作られた要素はメモリにのみ存在します。メソッドを生成してDOMに追加する必要があります。

// 要素を追加する親要素
const parent = document.getElementById("parent");

// 要素を親要素の子要素として追加
// 既に要素が存在する場合、最後の子要素として追加
parent.appendChild(p2);

// 親要素の第一子選択
const firstChild = parent.childNodes[0];

createTextNodeを使用してテキストノードを追加することもできる

let textToAdd = document.createTextNode("追加するテキスト");
let liToAdd = document.createElement("li");
listToAdd.appendChild(textToAdd);
let ulContainer = document.getElementsByTagName("ul")[0];
ulContainer.appendChild(listToAdd);

要素削除

let itemToRemove = document.getElementsByTagName("li")[1];
let ulContainer = document.getElementsByTagName("ul")[0];
ulContainer.removeChild(itemToRemove);

要素交代

// <div>
//  <span id="child_span">happy html</span>
// </div>

// 空の要素ノードを 1 つ作成（IDもプロパティもコンテンツもない）
let sp1 = document.createElement("span");

// 「newSpan」にid属性を付与
sp1.id = "newSpan";

// 新しい要素のためのコンテンツを作成
let span1_content = document.createTextNode("コンテンツ作成");

// コンテンツを作成した要素に貼り付け
sp1.appendChild(span1_content);

// DOMに存在していた、交換する必要があるnodeを探し
let sp2 = document.getElementById("child_span");
let parentDiv = sp2.parentNode;

// 既に存在していたsp2 nodeを新しいspan要素であるsp1に置き換え
parentDiv.replaceChild(sp1, sp2);

// 結果:
// <div>
//   <span id="newSpan">new replacement span element.</span>
// </div>

Discussion