DOM（Document Object Model）は、HTMLやXML文書の構造を表現するためのプログラミングインタフェースであり、JavaScriptでウェブページの要素にアクセスしたり操作したりするために重要です。以下では、基本的なDOM操作の方法をわかりやすく説明します。
要素の取得
getElementById
const elementById = document.getElementById('elementId');指定したIDを持つ要素を取得します。IDは一つしか存在しないので、配列ではなく直接取得できるのでよく使います。
getElementsByClassName
const elementsByClassName = document.getElementsByClassName('className');指定したクラス名を持つ要素のコレクションを取得します。クラスは自分が一つしか書いていないつもりでも、複数ある前提で配列で取得されるので気をつけてください。
getElementsByTagName
const elementsByTagName = document.getElementsByTagName('tagname');指定したタグ名を持つ要素のコレクションを取得します。
querySelector
const element = document.querySelector('selector');指定したCSSセレクタに一致する最初の要素を取得します。あくまで、最初の要素なのでクラス名などが重複する場合などは気をつけましょう。
querySelectorAll
const elements = document.querySelectorAll('selector');指定したCSSセレクタに一致するすべての要素を取得します。すべての要素を取得するのでIdで取得するよりクラス名など複数あることが考えられるもので取得するのに便利です。
要素のプロパティの取得・設定
取得した要素のプロパティを取得したり設定したりすることができます。以下に詳しく解説していきます。
テキストコンテンツの取得・設定
// テキストコンテンツの取得
const textContent = element.textContent;
// テキストコンテンツの設定
element.textContent = '新しいテキスト';動的にテキストを変えたり、必要な時に取得できるので覚えておくとサイトでできることの幅が広がるので、ぜひ使ってみてください。
HTMLコンテンツの取得・設定
// HTMLコンテンツの取得
const innerHTML = element.innerHTML;
// HTMLコンテンツの設定
element.innerHTML = '<p>新しいHTML</p>';テキストを変えるだけではなく、HTMLコンテンツもコードから設定できます。ユーザーの操作に合わせて動的にHTMLコンテンツの設定ができるので、大変便利です。
属性の取得・設定
// 属性の取得
const attributeValue = element.getAttribute('attributeName');
// 属性の設定
element.setAttribute('attributeName', 'attributeValue');コードから属性も変えることもできます。属性も変えることができるようになると、かなり自由度が増してきますので、ぜひ使ってみてください。
まとめ
この記事はJavaScriptのDOM操作について解説しました。Web制作ではjQueryを触ることが多いので、JavaScriptでのDOM操作はあまり使用する機会がないかもしれませんが、できるようになるとかなりHTML等の理解力も上がると思うので、挑戦してみてください。最初は難しいと思いますが、継続して頑張れば必ずできるはずなので頑張ってください。
「読んだだけでは100%身に付きません」
必ず行動に移してください。
そう言っても、
行動する人は20%
それを継続する人は5%
行動し続けるだけで、
上位5％に入ることができます。
今すぐ行動して上位5％に入り、
Web制作で本気で人生変えたい
そんな人は今すぐ登録してください
今行動しなきゃ、人生変わらないですよ
こちらの公式LINEではTwitter開始して1週間で案件獲得した勉強法、仕事の取り方などweb制作での収益化の方法を発信しています！
是非登録してみて下さい！
コメント