NFTを始めるなら日本円で始められるHEXA

【毎日コツコツ】デイトラDay16 JavaScript「DOM操作」って何?意味や使い方を学ぼう!

上質な情報発信を続けてお役に立てるようサイト運営費用を賄うために、Googleアドセンス・アフィリエイト等を利用しており本記事はプロモーションを含みます。

デイトラ受講生のたくたくタックです。Webスキルを身に付けたく完全未経験から受講を始めています。

といっても、実はデイトラを開始したのは数年前….慣れないコードと向き合えなくなり挫折を繰り返しています。

こんな僕ですが、Webと関わるこの世の中では必須のスキルだと再認識して再起しました。

毎日コツコツ「必ず完走する」を目標に掲げ学んだ内容を記録に残します

過去に何度も挫折した私の記録はこちら→過去のブログ記事

タック
タック

ブログを書くことに時間をかけたり…計画性の無さを今では反省しています。

Web制作を学ぶ理由

僕がWeb制作を学ぶ理由は大きく分けて3つあります。

1,単純にWeb業界に興味がある

2,Web制作に関わる仕事で多くの人に喜んでもらいたい

3,現在中学受験を目指す息子が中学に上がった時にWeb制作の基本を教えたい

移り変わりの激しいWeb業界、変化をすることが当たり前であるという常識はサラリーマンではあまり常識ではありませんでした。ただ、Web制作を学ぶ中でプログラミングの常識を学ぶ事が出来ています。

もっと知識や実務経験を増やしたいと思っています。

ここで新しい言葉が出てきたのではじめに説明すると、

DOMは、「Webページの構造や内容をプログラムから操作するためのインターフェース」です。

インターフェースとは2つ以上の異なるシステムで情報や機能を交換するための共通の境界線や手段を指します。つまり、異なるもの同士が通信するための方法や手段を提供するものです。

DOMはJavaScriptとHTML文書の間で情報をやり取りするためのインターフェースとして機能します。JavaScriptからHTML文書の要素にアクセスし、変更する事が目的です。

Webページの検証ツールの「コンソール」内でcnsole.log(document)と入力することでそのWebページをjavascriptで操作することが可能になります。

【基本】JavaScriptからHTMLの要素を選択する

まず、HTMLの要素を出力するための基本文をVScodeのJavaScriptファイルの中で展開するにはどうしたらいいのでしょうか?

HTML内のIDタグ [ ja-title ] を呼び出す場合は以下の通りです

js
console.log(document.querySelector("#js-title").outerHTML);

こちらのコードの意味を詳しく解説しますね。

  • console.log () : コンソールに出力するメソッド
  • document : 現在のWeb全体を呼び出す
  • querySelector() : 要素を検索するためのメソッド
  • #ja-title : 呼び出したいID名
  • outerHTML : DOM要素のHTML表現全体を文字列として取得するためのプロパティです。

JavaScriptを勉強していくと「メソッド」というのが出てきます。

関数と何が違うか僕は混乱したので参考にさせてもらったサイトを掲載しておきます→コチラ

タック
タック

メソッドと関数には違いがありますよ。

「getElementById」を使った出力方法

先程の出力コードには。別の出力方法もあるので紹介しますと、

js
console.log(document.getElementById("js-title").outerHTML);

getElementByIdはID名を取得するためのメソッドとなります。

getElementByIdはID名の取得に限定されたものになるので、汎用性が高い「querySelector」を使うのがおすすめされています。

JavaScript HTMLのclass名を取得(単体と複数取得方法)

次にclass名の取得を行いますが、基本的に先程のIDと同じ方法です。

Baby panda
Baby panda

ID名は「#(シャープ)」、class名は「. (ドット)」でしたよね。ちなみにタグ名の場合は何もいらないよ♫

js
/ID名を指定する場合
console.log(document.getElementById(".クラス名").outerHTML);

/タグ名を指定する場合
console.log(document.getElementById("タグ名").outerHTML);

/属性を指定する場合
console.log(document.getElementById("[属性]").outerHTML);

次に繰り返し出力で指定したclass名すべてを出力する方法は以下の通りです。

for文を使用しているのでfor文が不安な方はコチラの記事を読んで確認してください。

js
// class名を複数取得する方法
const elements = document.querySelectorAll(".text");
for( let element of elements){
    console.log(element.outerHTML);
}
[querySelectorAll]は指定したClass名をすべてコンソールログに表示します。

HTMLのテキストをJavaScriptを使って変更する方法

JavaScriptを使って実際にHTMLのテキストなどを変更する方法を紹介します。

デイトラではテキストを指定する際に「.innerText」を使用していますが、「textContent」での出力も可能だと知ったので紹介します。

コチラの使用方法は微妙に違いがあるので覚えておいて損はないと思います。

「.innerText」を出力

出力は元のテキストから変更後のテキストに変更されます。

js
document.querySelector("ID名").innerText= "変更後のテキスト";

「.textContent」

出力は元のテキストから変更後のテキストに変更されます。

js
document.querySelector("ID名").textContent= "変更後のテキスト";

あれ?っと思った方はカンが鋭いです。

この場合だと出力されるテキストは同じなんですよね。

タック
タック

違いについて詳しく説明していくね

[ innerText ]と[ textContent ]の違いは?

innerTexttextContentは似ていますが、微妙な違いがあります。

[ innerText ]

  • innerTextは、要素のテキストコンテンツを取得または設定するためのプロパティです。
  • テキストコンテンツとして表示されるテキストのみが含まれ、スタイルや非表示の要素は無視されます。
  • このため、ブラウザが要素を描画する際の実際の表示されるテキストを取得します。

[ textContent ]

  • textContentも、要素のテキストコンテンツを取得または設定するためのプロパティです。
  • innerTextとは異なり、すべてのテキストコンテンツが含まれます。つまり、スタイルや非表示の要素もテキストとして含まれます。
  • このため、textContentはHTML要素内のすべてのテキストコンテンツを取得し、そのままの状態で返します。

例えば、次のようなHTMLがあるとします。

js
htmlCopy code<div id="myDiv">
    <span style="display: none;">Hidden Text</span>
    Visible Text
</div>

この場合、document.querySelector("#myDiv").innerTextVisible Textを返しますが、document.querySelector("#myDiv").textContentHidden TextVisible Textを返します。

したがって、innerTexttextContentは似ていますが、要素の内容を取得する際に微妙な違いがあります。そのため、特定の使用ケースに応じて適切なプロパティを選択する必要があります。

HTMLのテキストをJavaScriptを使って追加する方法

次はJavaScript内の記述でHTMLに追加する方法に付いて解説します。

まずは以下のコードを書いたので一つづつ新しいメソッドについて詳しく見ていきましょう。

js
// 新しいdiv要素を作成する
var newDiv = document.createElement("div");

// 新しい属性を追加する
newDiv.setAttribute("id", "myDiv");
newDiv.setAttribute("class", "container");

// 既存の属性の値を変更する
newDiv.setAttribute("title", "This is a container");

// 要素をDOMに追加する
document.body.appendChild(newDiv);

createElementの意味

createElementは、JavaScriptのDOM操作で使用されるメソッドの一つです。このメソッドは、新しいHTML要素を作成するために使用されます。

setAttributeの意味

**setAttribute**は、JavaScriptのDOM操作で使用されるメソッドの一つです。このメソッドは、要素に新しい属性を追加するか、既存の属性の値を変更するために使用されます。

具体的には、指定された属性名と値を持つ新しい属性を要素に追加します。また、既に存在する属性の場合は、その属性の値を指定した値に変更します。

appendChildの意味

**appendChild**は、JavaScriptのDOM操作で使用されるメソッドの一つです。このメソッドは、指定された要素を他の要素の子要素として追加するために使用されます。

具体的には、指定された要素を、ある要素の最後の子要素として追加します。このメソッドは、新しい要素をDOMツリーに追加するために使用されます。

JavaScriptのイベント監視方法

イベント監視方法は、Webページでクリックされた時などにアラームを出すことができます。

以下に監視するコードを記入しました。

js
window.onload = function () {
  alert("表示したいテキスト");
};

このコードは、ページが完全に読み込まれたときに特定の処理を実行するための方法を示しいます。

window.onloadは、ページのロードが完了したときに実行される。ということは画像やスタイルシートなどのすべてのリソースが完全に読み込まれてレンダリングが完了した後にアラームが表示されます。

クリックイベント

先程はロードした時にアラームを表示する方法でしたが、イベントが発生した時に表示させる方法を解説します。

js
document.querySelector(" IDやClass名 ").addEventListener("click", function () {
  alert("表示したいテキスト");
});

addEventListenerは指定された要素(この場合、IDやClass名要素)にイベントが実行されたらアラートが表示する文となります。

ここではclickイベントが使わているのでクリックされた時にアラートが表示されるようになります。

この他にも様々なイベントがあるので少し紹介しておくと、

  • mouseover : マウスがホバー(要素に当たる)されたとき
  • keydown : キーボードのキーが押されたとき

ここで紹介したクリックイベントはこれからもたくさん出てくるとのことなのでしっかり僕も覚えておきたいと思います。

【デイトラWeb制作】JavaScript「DOM操作」まとめ

今回の講義も基本的な内容ではあったものの、僕からしてみれば知らない世界へ飛び込んだ感覚で楽しかったです。

こうやって勉強して気づくのは、普段見ているWebページって「しっかり作られているんだな」ということです。

タック
タック

半年後や1年後に自分がそんなサイトを作れるようになった姿が今は想像出来ませんが憧れです。

今回学んだことをおさらいしておくと、

  • JavaScriptのDOM操作の基本
  • HTMLをJavaScriptで呼び出す方法
  • JavaScriptでHTMLに要素を追加・変更
  • JavaScriptの監視方法について

DOM操作の基本を学ぶ事ができました。

今回の内容がこれからの実践をこなしていく中で大切なところだと思うので、しっかり覚えて活かしたいです。

さて、次の講義はjQueryといってjavaScriptの記入コードをさらに短くしたものでコーディング作業には欠かせない講義だと思います。

1つの講義を習得するだけで大変だと思いますが一緒にこれからも学んでいきましょう!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA