こんにちは。あがさんです！！
今回はJavaScriptを学習する中で、苦労したDOMメソッドについて書いていきます。
DOMって何ぞ！？
Document Object Model の略称。
Webページの構造やNode（要素）をJavaScriptで操作するための手段になります。
DOMを使うことでJavaScriptからHTMLにアクセスしてNode（要素）の作成、追加、変更、削除で行うことができます。
DOMの基本的な構造
DOMは下記のようにDocumentを元にした階層構造として表現できます。一般的なHTMLページを例にDOMツリーの構造を確認しましよう。
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1 class="main-text">Welcome to My Page</h1>
<p>This is a paragraph.</p>
</body>
</html>
Document （Document）
├── <html>
│ ├── <head>
│ │ └── <title> (Element)
│ │ └── "My Page" (Text)
│ └── <body>
│ ├── <h1>...＊階層構造に表示されまれませんがclass="main-text"は(Attribute)となります。
│ │ └── "Welcome to My Page" (Text)
│ └── <p>
│ └── "This is a paragraph." (Text)
-
Document(Node) : 表示されているページ全体を表すのNode(要素) です。他すべてのNodeにアクセスができます。
-
Element(Node) : 各HTMLタグ（例:
<div>,<h1>,<p>など）はElement Nodeとして表現されます。他のElement(Node)やText Nodeをchild node（子要素）として持つことができます -
Text(Node) : 各要素のテキストコンテンツはText(Node)として表現されます。Text(Node)は、ツリーの末端に位置し、child node（子要素）を持つことはありません。
-
Attribute(Node) : 要素に関連付けられた属性（例: class, id, src など）は、Attribute(Node)として表現されます。Element(Node)に属し、直接ツリーには表示されませんが、Element(Node)を通じてアクセスできます。
今回作ったもの
DOMメソッドを用いて簡単なアプリを作成しました。
下記の画面に配置されたボタンを押すと、その時の日時が取得されて下段にリスト形式で出力されるアプリケーションです。
下記がソースコードとなります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>日時取得について</title>
<style> /* 煩雑になるため今回はCSSを直書きします */
body {
display: flex;
justify-content: center;
margin: 100px auto;
}
#dateButton {
padding: 10px 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div>
<button id="dateButton">クリックして時刻を表示</button>
<ull id="dateDisplay">
<!-- ここに<li>タグとして現在時刻が表示される -->
</ul>
</div>
<script src="main.js"></script>
</body>
</html>
document.getElementById("dateButton").addEventListener("click", function(){
const now = new Date();
const formattedDate = now.getFullYear() + '-' +
String(now.getMonth() + 1).padStart(2, '0') + '-' +
String(now.getDate()).padStart(2, '0') + ' ' +
String(now.getHours()).padStart(2, '0') + ':' +
String(now.getMinutes()).padStart(2, '0');
const newListItem = document.createElement("li");
newListItem.textContent = formattedDate;
document.getElementById("dateDisplay").appendChild(newListItem);
})
今回使用したDOMメソッドの説明
getElementById()
getElementById() はDocument インターフェイスのメソッドで、 id プロパティが指定された文字列に一致する要素を表す Element オブジェクトを返します。
今回のアプリではdateButtonというidを引数にして<button>というElement オブジェクトを返しています。
addEventListener()
addEventListener() はEventTarget インターフェイスのメソッドで、ターゲットに特定のイベントが発生するたびに呼び出される関数を設定します。
addEventListener("click", function(){処理}）で説明すると
マウスでclickが行われると、その都度function(){処理}が呼び出されます。
createElement()
document.createElement() メソッドは tagName<div>,<h1>,<p>で指定された HTML 要素を生成します。
const newListItem = document.createElement("li")のようにリストを生成したい場合は、引数に（"li"）と入れると<li>タグがHTML内に生成されます！
appendChild
appendChild() は Node インターフェイスのメソッドで、指定されたparent node（親要素）のchild node（子要素）の末尾にノードを追加します。
document.getElementById("dateDisplay").appendChild(newListItem);
上記のコードだとid="dateDisplay"が設定されている <ul>がparent nodeとして指定されます。その<ul>タグ内にnewListItemとして定義した<li>が追加されることになります。
処理の流れ
改めて全体の流れをおさらいします。
①id="dateButton"を持つボタンをクリックするとaddEventListener("click", function(){...})でイベント処置が発火します。
②new Date();で現在の日時が取得されます。
③const newListItem = document.createElement("li")で 新しい<li>要素がnewListItemとして作成され、現在時刻がnewListItemのtextContentに代入されます。
④document.getElementById("dateDisplay").appendChild(newListItem);で<ul>タグ内に現在時刻が表示されます。
まとめ
いかがでしたでしょうか。
DOM操作ができるようになるとWeb上でいろんな表示や処理が行えるようになって
視覚的に楽しくなりますね。
他にもたくさんのDOMメソッドがあるので少しずつ触れていきたいと思います。
ここまで読んでいただき、どうもありがとうございました！！
~Qiitaの歴史がまた1ページ~
参考文献
・MDN Web Docs
・【世界で70万人が受講】Web Developer Bootcamp 2023（日本語版）