HTMLの要素を操作する方法を現役デザイナーが解説【初心者向け】
初心者向けにHTMLの要素を操作する方法について解説しています。最初に、HTMLの要素とは何かについておさらいします。次に、JavaScriptでHTMLの要素を取得し操作する方法をサンプルコードで見ていきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日 調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名 調査手法:インターネット調査
HTMLの要素を操作する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。
そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。
![](https://techacademy-magazine-cdn.techacademy.jp/magazine/wp-content/uploads/2018/02/20163020-2-400x400-e1517449291396.png)
今回は、HTMLに関する内容だね!
![](https://techacademy-magazine-cdn.techacademy.jp/magazine/wp-content/uploads/2018/02/20160620-400x400-e1517449269611.png)
どういう内容でしょうか?
![](https://techacademy-magazine-cdn.techacademy.jp/magazine/wp-content/uploads/2018/02/20163020-2-400x400-e1517449291396.png)
HTMLの要素を操作する方法について詳しく説明していくね!
![](https://techacademy-magazine-cdn.techacademy.jp/magazine/wp-content/uploads/2018/02/20160620-400x400-e1517449269611.png)
お願いします!
HTMLの要素とは
HTMLの要素を操作する主な方法
サンプルコードなど
span要素を呼び出し操作するサンプルコードです。
<body> <p>今日の時刻:<span id="result"></span></p> <div id="DateTimeDisp"></div> <script type="text/javascript"> var now = new Date(); var target = document.getElementById("result"); var Year = now.getFullYear(); var Month = now.getMonth()+1; var Date = now.getDate(); target.innerHTML = Year + "年" + Month + "月" + Date + "日"; </script> </body>
画面のように表記されれば成功です。
監修してくれたメンター
木村勇土
TechAcademyの現役メンター。 現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。WordPressを中心とした自社のWebサイトの修正などを行なっている。 |
![](https://techacademy-magazine-cdn.techacademy.jp/magazine/wp-content/uploads/2018/02/20160620-400x400-e1517449269611.png)
内容分かりやすくて良かったです!
![](https://techacademy-magazine-cdn.techacademy.jp/magazine/wp-content/uploads/2018/02/20163020-2-400x400-e1517449291396.png)
ゆかりちゃんも分からないことがあったら質問してね!
![](https://techacademy-magazine-cdn.techacademy.jp/magazine/wp-content/uploads/2018/02/20160620-400x400-e1517449269611.png)
分かりました。ありがとうございます!
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。