【JavaScript入門】DOMとHTML/CSSの操作

JavaScript
スポンサーリンク

初心者の独学でのプログラミング学習はとてもツライ…

プログラミングをマスターしたい!

今のIT業界はプログラミングエンジニアが不足していると言われています。
高収入の職業とも言われる分野もありますし、AI、機械学習、ディープラーニング、IOTといった注目される分野が目白押しです。

でも、いざ初心者がプログラミングをマスターしようとすると…

  • 本を読んだりネットの記事で自力で勉強しているけど限界を感じる
  • プログラミングスクールに定期的に通うのは面倒だ
  • 地方に住んでると家の近くにプログラミングスクールなんてない
  • どのプログラミング言語を学べばいいのか悩む
  • 実際の就職や転職にプログラミングが活かせるのか心配だ

など、プログラミングを自分で勉強しようとすると悩みが尽きません。

プログラミングに詳しい友人に教えてもらおうと思っても、そんな友人なんて滅多にいません。いたとしても細かく教えてくれるほど時間に余裕がある人はいないでしょう。

そんな独学でプログラミングをマスターするのに限界を感じてる方に、オンラインプログラミングスクールをがおすすめです。

おすすめのオンラインスクールはこちら

これまではJavaScriptの操作の結果をブラウザのJavaScriptコンソールに表示してきました。

ここではJavaScriptを使って、HTMLやCSSを操作してWebページの内容を変更する方法をみていきます。

この操作をするためにはDOMという仕組みとWebページのオブジェクトについて理解しておくことが必要です。

スポンサーリンク

Webページとオブジェクト

ここで扱うWebページとしてローカルファイルにhtmlファイルとJavaScriptファイルを用意します。htmlファイルはindex.htmlとして次のようなコードにしてみました。

script.jsファイルは現時点では何も中にはコードは書いていません。

これをブラウザで表示するとこうなります。

thisキーワードを扱った時に、windowオブジェクトというものが出てきましたが、このWebページとオブジェクトの関係は次のように表すことができます。

ブラウザ自体がwindowオブジェクトであり、コンソールの情報はcosoleオブジェクト、Webページの情報はdocumentオブジェクトにまとめられているということになります。

また、このdocumentオブジェクトは次のようなHTML構造になっていて、これを利用するための様々なメソッドが用意されています。

このHTMLの構造は、次のような要素オブジェクトをツリー状に繋げたものです。

このHTMLの構造化表現をDOM(Document Object Model)といい、このDOMをメソッドで操作することによって、HTML文書を変更することができるのです。

スポンサーリンク

HTML要素の変更

では、用意したindex.htmlについて変更を加えていこうと思います。

JavaScriptを使ってDOM操作をしてみましょう。

要素の内容の変更 – getElementById()とinnerHTML

index.htmlにはJavaScriptで操作できるように<div id=”textChange”>と要素にidをつけています。このidを使って、script.jsファイルに次のように書き込むことで、htmlの要素を変更していくことになります。

documentにドット(.)接続でメソッドgetElementById()を使って、特定の要素を取り出しています。このとき、HTML文書の中で使っている要素のidを指定して要素を取得しています。

取り出したHTML要素を変更するには、innerHTMLプロパティを使って、内容を変更して上書きすることになります。

ブラウザを更新してみます。

<p>Document Object Model(DOM)</p>で記述していた部分が、<h2>DOMの操作</h2>に書き換えらえているのが確認できます。このようにしてHTMLの要素を変更していくわけです。

要素のスタイルの変更 – styleプロパティ

さらに要素を変更してみましょう。script.jsファイルに追記してみます。

3行追加しています。ここではstyleプロパティを使ってスタイルを変更しています。

fontSizeを使って30pxに、colorを使って文字を黄色に、backgroundColorを使って背景を青色にしています。ここで注意が必要なのは、CSSでは「font-size」のようにハイフン(-)を使っているところをキャメルケースで書くという点です。

ファイルを保存してブラウザを更新します。

文字サイズ、文字色、背景色が変更されたのがわかります。

スポンサーリンク

HTML要素の追加と削除

ここまでは、すでにあるHTMLの要素を変更して書き換えるというDOM操作をしてきました。

JavaScriptを使って、今度は新たに要素を作って追加していくという操作をしてみます。

createElement(), setAttribute(), insertBefore()

これまでのスクリプトファイルに次のように追記してみます。

createElement()を使って新たにタグを指定します。ここではdivタグを作りました。これに属性を指定する為にsetAttribute()を使って、属性名と属性値を渡しています。ここではidとelement1としています。innerHTMLプロパティを使って、書き込む内容を指定します。すでにある構造の要素のどこに新たな要素を追加するかをここではinsertBefore()を使って決定します。ここでは単に追加するだけなのでnullとすることで要素の一番最後になります。

ブラウザを更新してみます。

要素が追加されているのがわかりました。

さらに要素を追加してみましょう。

やっていることは同じですが、insertBerore()で新しい要素を入れる位置を、先ほど追加した要素の前に指定しています。

表示するとこうなります。

前に追加した要素の上側に新たな要素が追加されているのがわかります。

parentElementとremoveChild()

ここまで新たに要素を追加してきましたが、今度は要素の削除をやっていきます。

これまでのコードに2行追記してみます。

削除する要素の親要素を探す為にparentElementを使います。これで指定の要素(子要素)の親要素のオブジェクトを取得することができます。この親要素からremoveChild()を使って削除する子要素指定することで、要素の削除ができます。

ブラウザで確認してみます。

指定した要素が削除できているのがわかります。

スポンサーリンク

CSSセレクタで要素を取得

これまではid属性を使って要素を取得していましたが、クラス名や特定のタグで取得する必要も出てきます。

ここではCSSで装飾する要素を、CSSセレクタを使って指定してみましょう。CSSセレクタで要素を一つ取得するにはquerySelectorメソッドを使います。

index.htmlの中の次の部分を利用します。

ここで指定してるクラス名を手がかかりに、要素を取得して行きます。

これまでのスクリプトファイルに次のように3行追記します。

querySelector()を使って、先ほどのクラス名をドットで指定し、スペースを開けてここでは<p>要素を指定して取得しています。CSSセレクタの記述ですね。

これで取得した要素をstyleで文字サイズと文字色を変更しています。

ブラウザで確認してみます。

id属性ではなく、クラス名と要素を手がかりに要素の変更をすることができました。

これ以外にも要素の取得には色々なメソッドがありますので、公式ドキュメントや書籍などでみておくといいでしょう。ここでは今後出てくる中で他のものは扱おうと思います。

スポンサーリンク

まとめ

ここではJavaScriptを使って、HTMLやCSSを操作してWebページの内容を変更する方法を扱いました。

この操作をするために、DOM(Document Object Model)という仕組みとWebページのオブジェクトの構造に触れました。

このDOM構造とid属性やクラス、タグ要素を手がかりに、要素の変更、追加、削除をする方法をみてきました。

自宅学習はオンラインプログラミングスクールを活用!

自宅学習にはオンラインプログラミングスクールがおすすめ!

オンラインプログラミングスクールは独学でプログラミングを学習する時のデメリットを解消する仕組みが備わっています。

気になるところは…

学習がオンラインで完結するのはもちろんですが、独学ではできない質問サポートがあるかどうか。わからないことを現役のエンジニアが質問に答えてくれるといいですよね。

受講者個人に担当のメンターがつき、マンツーマンで学習の相談に乗ってくれることも必要で、ITエンジニアの世界についても伺えたりもすると幅が広がります。

オンライン面談だけでなく、チャット機能を使って気軽に質問を投げかけることができることも大切です。

また、オリジナルプロダクトの開発とサポートがコースの中に組み込まれていて、独学ではなかなか難しい実践的なスキルの習得にもつなげたい。

プログラミングをマスターした後の実際の仕事につながる転職サポートでがあると、ITエンジニアの世界に飛び込むのに不安が解消されます。

そんな豊富なメニューが揃っているおすすめのオンラインプログラミングスクールがこちらにあります。

おすすめのオンラインプログラミングスクールはこちら

TechAcademyはおすすめのオンラインプログラミングスクール!

オンラインのプログラミングスクールでは、テックアカデミーの充実度が目を見張ります。

オンラインで受講が完結するので、自宅学習でプログラミングをマスターしたい人にはテックアカデミーがおすすめです。

メンター制度も現役のプロが対応してくれます。大学生などが対応しているスクールに比べて本気度と専門性が違います。メンター制度の無いスクールもありますし、担当では無いメンターが対応するスクールもあったりするので、相談の質が違いますね。

チャットサポートもあるので、それが無いスクールに比べて相談の気軽さの違いがあります。

プロダクト開発のサポートで実践力が養われるだけでなく、どの講座を利用しても転職サポートが受けられるのはありがたい。

用意されているコースも、初心者向けのプログラミングコースから、Python、Java、PHP、iPhoneアプリ、AndroidといったITエンジニアのベースとなる主要な言語だけでなく、AI、データサイエンス、ブロックチェーン、webアプリケーションと行った実践的なコースまで用意しています。

他にも、webデザインやUI/UXデザイン、動画編集、webディレクションやwebマーケティングといったプログラミング以外での役立つコースまであります。

このようなたくさんの選択肢から自分にあったコースを選ぶことがでるのがテックアカデミーです。

コースの期間も短期間でマスターしたり、長期の受講でじっくり取り組むコースを選ぶこともできます。

複数講座のセットコースを利用することで大幅な割引が受けらるので、お得に受講することもできます。

無料体験もありますので、プログラミング学習でオンラインスクールを考えている人はTechAcademyをぜひ利用してみてください。

テックアカデミーの公式サイトはこちら

JavaScript
スポンサーリンク
CodeGraffitiをフォローする

とにかく進め!Pythonプログラミング入門 〜 コードグラフィティ
タイトルとURLをコピーしました