【エクササイズ】JavaScriptでDOMの文言・属性値を変更

課題
  • JavaScriptのDOMを使ってHTML要素の文言(テキスト)・属性値を変更する
  • GitHubに用意した課題の内容を確認して、課題クリアがこの記事でのゴール

課題内容は以下の課題レポジトリに記述しています。

課題レポジトリ

GitHub : js_excercise_for_frontend_2

課題解決するために参考になる資料

【JavaScript】DOMのテキスト内容を取得・変更する

https://tsuyopon.xyz/learning-contents/web-dev/javascript/frontend/how-to-manipulate-text-in-dom/

HTMLの特定要素のDOMを取得してテキスト内容を変更する方法は上記記事で解説しました。

具体的には次の3つの使い方を説明しました。

テキストを変更する方法
  1. 「innerHTML」を使う
  2. 「innerText」を使う
  3. 「textContent」を使う

上記3つの内2つを今回の課題で利用します。

DOMのテキスト内容を変更する方法がわからない場合は上記記事を参考にして頂けたらと思います。

【JavaScript】DOMに属性値をセットする

https://tsuyopon.xyz/learning-contents/web-dev/javascript/frontend/how-to-set-attribute-with-dom/

今回の課題ではimg要素のsrc属性値を変更するものと、class属性値を追加するものが用意されています。

DOMを使ってHTML要素の属性値を変更する方法や、class値を変更する方法はあ上記記事で解説しているので、わからない場合は上記記事を参考にして頂けたらと思います。

質問・答え合わせ受け付けてます

課題に関して質問や答えの確認をしたい方はお気軽にご連絡をいただけたらと思います。

お問い合わせ・TwitterのDM・LINE@で受けつけています。TwitterのDM、LINE@のほうが早く気づけるので早めに返信できるかと思います。

あわせて読みたい
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!プログラミングやWebで困っていることに対して何でも質問受け付けています。「こんなこと質問しても大丈夫かな」と思っている方のために過去にどんな質問があったのか一例で挙げているので参考にしていただけたらと思います。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

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

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

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

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

無料特典を受け取る