JavaScript

【課題】HTMLからDOMを取得する【JavaScript基本】

どうも、つよぽんです!

今回は演習課題の紹介記事となります。

今回の課題は、前回、前々回記事で学習した以下の知識を定着させることを目的としています。

今回の課題で定着させたい知識
  1. JavaScriptのDOMの理解
  2. JavaScriptを使ってHTMLからDOMを取得する方法

今回の課題では、5つの方法を使ってHTMLからDOMを取得していただきます。

以下の画像は今回の課題の完成形です。

今回の課題の完成形今回の課題の完成形

今すぐ課題に取り組みたい方は以下の記事から課題ページにアクセスして、早速取り組んでいただけたらと思います。

あわせて読みたい
【エクササイズ】JavaScriptでHTMLの要素を取得するJavaScriptでHTMLの特定の要素(DOM)を取得する課題を用意しました。この課題ではブラウザによって提供されているDOM取得メソッドの知識定着度を確認します。今回は前回学習した5つのDOM取得メソッドの復習をします。...

この記事の想定読者は次のとおりです。

想定読者
  • DOMの理解を深めたい方
  • JavaScriptを使ってHTMLからDOMを取得する方法を身に着けたい方

課題に取り組む際にはもちろんHTMLファイルとJavaScriptファイルを連携させる方法を知っている必要があります。

もし、HTMLファイルとJavaScriptファイルの連携方法を忘れてしまっている場合は、以下の記事を参考にしましょう。

あわせて読みたい
HTMLでJavaScriptの外部ファイルを読み込み、実行するHTMLでJavaScriptファイルを読み込むことでWebブラウザでJavaScriptを実行することができます。今回はJavaScriptファイルの作成方法から、HTMLで作成したJavaScriptを読み込み、実行するところまでを解説します。...

今回の課題をクリアするために参考になる記事は次のとおりです。忘れてしまっているものがあれば記事を読み返しふり返ってみましょう。

【入門】JavaScriptとDOMとは【HTMLを操作する】

今回の課題では「HTMLから指定した要素のDOMを取得する」ということをしていただきます。

ただ、まず「DOM」を取得する以前に「DOMとは何か?」を説明できますか?

DOMはWebフロントエンド開発の基本知識になるので、一番最初にDOMを理解しておくことで今後の学習内容の定着度も大きく変わってきます。

「DOMを説明する自身がないなー」という方は以下の記事でDOMについて解説しているので、そちらを参考にしていただけたらと思います。

あわせて読みたい
【入門】JavaScriptとDOMとは【HTMLを操作する】JavaScriptを使ってWebページ上の表示内容を変更したり、HTMLに後から要素を追加するには「DOM」というものを使います。今回は初心者向けに「DOM」の概要をサンプルコードや実際の表示内容を画像で見ながら説明していきます。...

JavaScriptでHTMLの要素(DOM)を取得する方法5選

今回の課題のメインテーマである「HTMLからDOMを取得する」を実現するためにはDOM取得用のメソッドを使います。

前回記事「JavaScriptでHTMLの要素(DOM)を取得する方法5選」では次の5つのメソッドの解説をしました。

今回の課題で使うDOM取得メソッド
  1. document.getElementById
  2. document.getElementsByClassName
  3. document.getElementsByTagName
  4. document.querySelector
  5. document.querySelectorAll

今回の課題でも上記5つのメソッドを全て使っていただきます。

それぞれのメソッドの使い方を忘れてしまった場合は、以下の記事で解説しているのでそちらを参考にしていただけたらと思います。

あわせて読みたい
JavaScriptでHTMLの要素(DOM)を取得する方法5選前回記事でJavaScriptのDOMの概要を説明して、今回からDOMを使ったプログラミングを学習します。今回はJavaScriptでHTMLの特定要素(DOM)を取得する方法を解説します。HTMLから要素を取得する方法はいくつかあり、今回はその中から5つを取り上げました。...

まとめ

あらためて、今回の課題をクリアするために必要な知識を解説した記事を以下にまとめておきます。

上にまとめた記事内容をふりかえり、今回の演習課題で取り組む知識の定着のためにも、ぜひチャレンジしましょう!^^

今回の課題で定着させたい知識
  1. JavaScriptのDOMの理解
  2. JavaScriptを使ってHTMLからDOMを取得する方法
あわせて読みたい
【エクササイズ】JavaScriptでHTMLの要素を取得するJavaScriptでHTMLの特定の要素(DOM)を取得する課題を用意しました。この課題ではブラウザによって提供されているDOM取得メソッドの知識定着度を確認します。今回は前回学習した5つのDOM取得メソッドの復習をします。...

頭では理解してても実際に手を動かしてみて手が進まないところがあれば、それは理解が不十分だということを意味します。

練習問題をやっててわからないところ、質問したいところがあればお気軽に以下からご連絡いただけたらと思います^^

あわせて読みたい
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!プログラミングやWebで困っていることに対して何でも質問受け付けています。「こんなこと質問しても大丈夫かな」と思っている方のために過去にどんな質問があったのか一例で挙げているので参考にしていただけたらと思います。...

それでは、課題頑張ってください!

【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

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