TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptのElementオブジェクトについて現役エンジニアが解説【初心者向け】
icon
icon
JavaScript

JavaScriptのElementオブジェクトについて現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのElementオブジェクトについて現役エンジニアが解説しています。Elementオブジェクトとは、 HTML/XML要素を内包したオブジェクトのことで、属性の管理とスタイル属性を保有しています。ElementオブジェクトはIDやクラス名から取得することが出来ます。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

JavaScriptのElementオブジェクトについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

JavaScriptのElementオブジェクトについて詳しく説明していくね！

大石ゆかり

お願いします！

 

Elementオブジェクトとは

Elementオブジェクトとは、 HTML/XML要素を内包したオブジェクトになります。Elementでは属性の管理とスタイル属性を保有しています。

Elementオブジェクトの一例

主に下記の様なオブジェクトを内包しています。

  • Button
  • Checkbox
  • FileUpload
  • Hidden
  • Password
  • Radio
  • Reset
  • Text
  • Textarea
  • Submit
  • Select
  • Option

 

[PR] フロントエンドで副業する学習方法を動画で公開中

Elementオブジェクトのプロパティの一例

上記のオブジェクトにはそれぞれにプロパティが設定されていますが、共通なプロパティもあります。

プロパティ 説明
id 要素のID(id属性の値)
className 要素のクラス(class属性の値)
innerHTML 要素の内容
className 要素のクラス(class属性の値)
clientHeight 要素の表示されている部分の高さ
clientWidth 要素の表示されている部分の幅
style 要素のスタイル(style属性の値)
childNodes 要素の子ノード

上記は代表的なもので、もっとたくさんのプロパティがあります。

Elementオブジェクトの取得方法

Elementオブジェクトの取得方法にはいくつか方法があります。まずは、一般的な方法としてオブジェクトのIDやクラス名を指定して取る方法です。

<p id="element_id" class="element_class">test</p>

//IDを指定する場合
var id_elm = document.getElementById("element_id");

//クラス名を指定する場合
var class_elm = document.getElementByClassName("element_class");

このほかにも、「document.querySelector()」という関数もあります。これは、IDでもCLASSでも使えるのですが、IDの場合は”#element_id”、CLASSの場合は”.element_class”で指定する必要があります。

今回は、取得方法のみを紹介しましたが、新しいオブジェクトを作成する「createElement」や逆に子要素を削除する「removeChild」などもあります。これらを利用し、Elementオブジェクトの操作を行っていきます。

筆者プロフィール

小宮山晃史（こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

 

TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

JavaScriptでlocation.hostプロパティを使ってホスト名とポート番号を取得、設定する方法を現

JavaScriptでlocation.hostプロパティを使ってホスト名とポート番号を取得、設定する方法について、TechAcademyのメンター（現役エンジ...
JavaScript

JavaScriptで出力したHTMLコードを表示する方法を現役エンジニアが解説【初心者向け】

JavaScriptで出力したHTMLコードを表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説し...
JavaScript

JavaScriptのconfirmダイアログでOKが選択された時のみ処理を実行する方法を現役エンジニアが解説

JavaScriptのconfirmダイアログでOKが選択された時のみ処理を実行する方法について、TechAcademyのメンター（現役エンジニア）が実際のコー...
JavaScript

JavaScriptのreplace関数を利用して文字列の複数箇所を置換する方法を現役エンジニアが解説【初心者

JavaScriptのreplace関数を利用して文字列の複数箇所を置換する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用...
JavaScript

JavaScriptのおすすめGridライブラリ5選を現役エンジニアが紹介【初心者向け】

JavaScriptのおすすめGridライブラリ5選について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...
JavaScript

JavaScriptのmatchメソッドで後方参照する方法を現役エンジニアが解説【初心者向け】

JavaScriptのmatchメソッドで後方参照する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説し...
JavaScript

あわせてよく読まれている記事

jQueryでeachメソッドを使って繰り返し処理をする方法【初心者向け】

どのプログラミング言語にも繰り返し処理を実装するためのメソッドは必ず存在しています。jQueryにももちろん存在し、eachというメソッドで実装することができます。 今回は、JavaScriptのライブラリであるjQueryのeachメソッドについて解説していきたいと思います。 jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。   なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。   なお、今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   目次 eachメソッドとは eachメソッドの構文 実際に書いてみよう まとめ eachメソッドとは eachメソッドは、jQueryに実装された便利メソッドです。 jQueryは、HTML要素（DOM)をJavaScript側で操作することに特化したライブラリであり、eachメソッドを使うことで、プルダウン選択肢などの複数のHTML要素をfor文のように一括で処理することができます。 また、eachメソッドはDOMだけでなく、配列やオブジェクトが持つ複数のデータを一括処理することができる汎用メソッドです。 jQuery.each()を適切に使いこなすことで、for文などのJavaScript標準の関数ではできなかった複数要素に関する処理が容易に実現できます。 [PR] フロントエンドで副業する学習方法を動画で公開中eachメソッドの構文 1.DOMを操作する場合専用の構文 $(セレクタ).each( function( index, element ){ // DOMに関する処理 }; まずはこの構文だけ覚えて使いこなせるようになりましょう。 2.汎用的構文 $.each( 対象オブジェクト, function( key, value ){ // 各データに関する処理 }); 「対象オブジェクト」の部分に、配列やオブジェクトを格納した変数を記述することで、中身のデータを一括して処理することができます。 各構文について それぞれの構文のfunctionが持つ引数は、仮引数です。ラムダ式をご存知の方は、ラムダ式と考えてください。eachメソッドは操作対象が持つ特定構造の全複数要素に対して個別処理することが前提のため、自動的に仮引数に値がセットされる仕組みです。function( x , y ){ }の部分は、以下のような書き換えも可能です。 ラムダ式でfunction部分を記述する場合 ( index, element ) => { // 各データに関する処理 } 1.DOMを操作する場合専用の構文について DOMを操作する場合専用の構文 jQueryでは、$(セレクタ)と記述するだけでHTML要素（DOM)が取得できますが、eachメソッドは「複数要素が取得された状態」を前提としていることに注意してください。 例えば、以下のようなHTMLがあった場合 HTML <div id="divArea"> <p>段落１の文章です</p> <p>段落２の文章です</p> <div> 複数のpタグをeachメソッドにより一括処理することができます。この場合、$(セレクタ) 部分の指定方法は $(“#div > p”) または $(“#div”).children() となります。 jQueryにより複数のpタグ要素を取得して、以下のような操作が可能です。 JavaScript $("#divArea >
JavaScript

JavaScriptでclass属性値を変更する方法を現役エンジニアが解説【初心者向け】

JavaScriptでclass属性値を変更する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでclass属性値を変更する方法について詳しく説明していくね！ 大石ゆかり お願いします！   class属性値とは class属性値とは、HTMLの要素に対して任意の文字列などで分類名を名付けた値のことです。 例えば、class属性値を指定することでスタイルシート(CSS)に定義されたスタイルなどを適用することができます。 加えて、複数の要素を合わせることも可能です。 <p class="bold">This id bold</p> p.bold { font-weight:bold; } JavaScriptでclass属性値を取得する方法 JavaScriptでclass属性値を取得する場合は、querySelectorメソッドやgetElementByIdメソッドなどでinput要素を取得後に、classNameやclassListを使います。   実行例 // <p class="class1 class2 class3"> がターゲット let element = document.querySelector('p'); console.log(element.className); // => 'class1 class2 class3' console.log(element.classList); // => ['class1', 'class2', 'class3', value: 'class1 class2 class3'] // ※DOMTokenList   jQueryの場合にはattrメソッドやpropメソッドを使います。  実行例 // <p class="class1 class2 class3"> がターゲット let element = $('p'); console.log(element.attr('class')); // => 'class1 class2 class3'   [PR] フロントエンドで副業する学習方法を動画で公開中JavaScriptでclass属性値を変更する方法 JavaScriptでclass属性値を変更する場合は、querySelectorやgetElementByIdなどでinput要素を取得後に、classNameやclassListを使って変更できます。 classNameを使う場合は、値の書き換えであって追加ではないことに注意しましょう。   以下、コード例となります。 // <p class="class1 class2 class3"> がターゲット let element = document.querySelector('p'); element.className = 'class4'; // ↑ <p class="class4"> となる element.className
JavaScript

JavaScriptのinnerHTMLへの処理が動かない場合の解決方法を現役エンジニアが解説【初心者向け】

JavaScriptのinnerHTMLへの処理が動かない場合の解決方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 JavaScriptのinnerHTMLを利用することで、HTML要素の中身を変更することができます。 実務でも、JavaScriptのinnerHTMLを利用して表示コンテンツの変化処理を行いますので、ぜひ学習してみてください。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのinnerHTMLへの処理が動かない場合の解決方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 innerHTMLとは JavaScriptによってinnerHTMLを操作する方法 JavaScriptのinnerHTMLへの処理が動かない主な原因と対応方法 まとめ   innerHTMLとは innerHTMLは、Elementオブジェクトのプロパティです。 Elementオブジェクトは、HTML要素のオブジェクトなどを含む要素を表すオブジェクトです。 そのプロパティであるinnerHTMLは、HTML要素の中身が格納されています。 innerHTMLを参照すればHTMLの中身が取得でき、代入すればHTMLを書き換えることもできます。   [PR] フロントエンドで副業する学習方法を動画で公開中JavaScriptによってinnerHTMLを操作する方法 Elementオブジェクトのプロパティなので、まずはElementを取得する必要があります。 Elementを取得したら、.innerHTMLと記述すれば中身の参照ができ、.innerHTMLに代入すれば中身の置き換えができます。   innerHTMLを操作する例 それでは具体的に見てみましょう。 下記のHTMLのdiv要素をinnerHTMLで操作する例を紹介します。 <div id="target"><span>あいうえお</span></div> まずはElementの取得です。 JavaScriptでElement（今回はdiv要素）の取得用にidにtargetという名前をつけてあります。 この名前を要素を取得するメソッドのgetElementByIdの引数に指定することで取得ができます。 let element = document.getElementById('target'); これでelementという変数にElementであるdiv要素が取得できました。 次はinnerHTMLを使ってdiv要素の中を参照します。 element.innerHTML これで下記のようなdiv要素の中の値が参照できます。 <span>あいうえお</span> 表示結果 See the Pen Untitled by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen.   innerHTMLで置き換えする例 置き換えのケースを2つ紹介します。 １．空文字で置き換えることでdiv要素の中を全てなくす（消す）ことができます。 let element = document.getElementById('target'); element.innerHTML = ""; ２．HTMLの要素と一緒に記述することで、div要素の中を自由に書き換えることができます。 let element2 = document.getElementById('target2'); element2.innerHTML = "<span>タグ付きで置き換え</span>";  表示結果   See the Pen innerHTMLで置き換え by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen.   JavaScriptのinnerHTMLへの処理が動かない主な原因と対応方法 参照で動かない場合は、Elementの取得ができていない可能性があります。 取得したElementが空になっていないか確認してください。 置き換えで動かない場合は、HTMLの内容を確認してください。 置き換えをする場合に、正しくない形のHTMLを代入しようとすると構文エラーを表すSyntaxErrorになります。 HTMLの< >のようなカッコの閉じ忘れがないか、全角の文字が入っていないかなどを確認してください。   まとめ HTMLの操作でも使用するinnerHTMLを紹介しました。 JavaScriptのinnerHTMLを利用することで、HTML要素の中身を変更できました。 要素の中身を変更する事ができるということは、表示上コンテンツを消すことも可能でした。 動作しない場合は、Elementの状態や、エラー状態を確認していただくと良いですよ。   この記事を監修してくれた方 中本賢吾（なかもとけんご） アジマッチ有限会社 代表取締役社長 開発実績：金融・小売・製造業種の基幹システムから人工知能研究支援まで20年以上の開発実績。経営者目線で、開発言語にとらわれない横断的なマネジメントを行うCTO業務や、新規事業開発を行う前段階のプロトタイプ開発、事業会社非IT社員向けDXプログラミング思考研修を得意とする。 ボランティア活動：小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースする岡山市クラブ講座活動を行っている。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

JavaScriptでDOMを操作する方法【初心者向け】

今回は、JavaScriptでDOMを操作する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発できます。 目次ElementオブジェクトとはElementオブジェクトの一例Elementオブジェクトのプロパティの一例Elementオブジェクトの取得方法筆者プロフィール そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。 （動画は2つに分かれています） テキストと動画で、解説に少し違う部分があります。 テキストは、JavaScriptの「ES6(ES2015)」というバージョンに基づいて解説しています。 動画は、その1つ前の「ES5」というバージョンに基づいて解説しています。   DOMとは JavaScriptでは、表示されたWebサイトを動的に書き換えることができるというのが大きな特徴です。 そして、その特徴を支えているのがDOM（Document Object Model）です。   大石ゆかり 田島メンター！DOMというのは何でしょうか？ 田島悠介 簡単に言うと、HTMLのタグなどにアクセスして、CSSを追加したり、あるいはタグを追加したり・削除したりする仕組みのことなんだ。 大石ゆかり HTMLをJavaScriptで操作できるってことですか？ 田島悠介 その通り！実際にDOMがどんなものなのか詳しく解説していくね。   Windowオブジェクト DOMを理解するには、まずWindowオブジェクトを知る必要があります。 Windowオブジェクトは、ブラウザが持っている情報をそのまま持っています。 ブラウザのコンソールに以下のように記述すると、Windowオブジェクトの中身が見られます。 console.log(window); Windowオブジェクトが持っている、プロパティやメソッドがずらりと出てきます。 開発でよく使われるWindowオブジェクトのプロパティ / メソッドには、以下のようなものがあります。 location : 現在開いているページのURLに関する情報が格納されるプロパティです。 innerWidth / innerHeight : ブラウザ画面の幅や高さの情報が格納されるプロパティです。 alert : アラートを表示するためのメソッドです。 setTimeout / setInterval : 一定時間後や一定時間おきに処理を行うためのメソッドです。 また、Windowオブジェクトのプロパティ / メソッドのアクセスの際には、windowの記述を省略できるという特性があります。 console.log(window.location); console.log(location); //どちらも現在のURLの情報が入ったオブジェクトが表示される！ まとめると、今開いているタブが持っている情報をすべて格納しているのがWindowオブジェクトということです。   Documentオブジェクト DocumentオブジェクトはWindowオブジェクトのプロパティの1つで、こちらも現在のサイトに関する情報を保持しています。 Windowオブジェクトがブラウザそのものに関する情報だったのに対し、Documentオブジェクトはブラウザで表示しているHTMLに関する情報と言えるでしょう。 中身をみていくと、いろいろプロパティがありますね。 たとえば、bodyはHTMLのbodyタグの中身をあらわしています。   本題のDOMに戻ります。 名前の通り、DOM（Document Object Model）ではDocumentオブジェクトを通して、個々の要素を取得・操作できるのです。 次の章からは、DOMの仕組みやDOMの操作方法を具体的に見ていきましょう。   DOMのツリー構造 それでは、DOMの操作の仕方について見ていきましょう。 個別の操作方法の前に、「ツリー構造」と言われるDOMの構造について見ていきます。 ツリー構造は簡単に言えば、1つの親要素の下に子要素があって、さらにその子要素がそれぞれ親になり、またその下に子要素を持つ……というぶら下がり構造を意味します。   実際のHTMLのコードも、ツリー構造として捉えられます。 <html lang = "ja"> <head> <meta charset = "utf-8"> <title>JavaScriptの練習</title> </head> <body> <h1>見出し</h1> <div> <p>テキスト1</p>
JavaScript

JavaScriptでselectオブジェクトの値（value）を取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptでselectオブジェクトの値（value）を取得する方法についてテックアカデミーのメンター（現役エンジニア）が解説します。 実際のコードをもとに解説するので、理解できるまで読んで「分からない」を解決しましょう。 また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。   目次 セレクトボックスとは JavaScriptでセレクトボックスの値を取得する方法 実際に書いてみよう selectオブジェクトで様々な値を取ってみよう まとめ   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでselectオブジェクトの値（value）を取得する方法について詳しく説明していくね！ 大石ゆかり お願いします！   セレクトボックスとは セレクトボックスとは、選択肢から値を選びデータを入力するフォーム属性の部品です。 会員登録画面などでよく見る下記の画像です。   [PR] フロントエンドで副業する学習方法を動画で公開中JavaScriptでセレクトボックスの値を取得する方法 下記の2つを行えばセレクトボックスの選択した値を取得できます。 JavaScriptでHTMLのselectを取得する 取得したselectの値を参照する（選択した値になっている表示状態にする）   実際に書いてみよう 選択した誕生月をアラート表示（画面上にメッセージ表示）してみましょう。   まず、HTMLで誕生月のセレクトボックスを記述します。 そして、JavaScriptで選択した値の取得とアラートの表示処理を行います。 HTMLのソース <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body> <span>誕生月</span> <select name="month" id="selectMonth"> <option value="">-</option> <option value="1">1月</option> <option value="2">2月</option> <option value="3">3月</option>
JavaScript

JavaScriptでDOM操作で要素を削除する方法を現役エンジニアが解説【初心者向け】

JavaScriptのDOM操作で要素を削除する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次ElementオブジェクトとはElementオブジェクトの一例Elementオブジェクトのプロパティの一例Elementオブジェクトの取得方法筆者プロフィール そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのDOM操作で要素を削除する方法について詳しく説明していくね！ 大石ゆかり お願いします！   ※DOMとはHTMLを操作する仕組みのことで、木の枝のような階層構造になっています。DOMの操作について、詳しくは解説記事「JavaScriptでDOMを操作する方法【初心者向け】」をご覧ください。   要素自身を削除する 呼び出した要素自身を削除するときは、removeメソッドを使います。 書式 削除する要素.remove(); 削除する要素自身から、removeメソッドを呼び出します。 removeメソッドで要素を削除すると、削除した要素内の他の子要素も含めてすべて削除されます。 クリックされた時の処理など、イベントを発生させた要素そのものを削除する場合は、受け取ったEventオブジェクトのtargetからremoveメソッドを呼び出せます。 他の要素を削除したいのであれば、「document.getElementById」などで取得します。 ※イベントとは、マウスのクリックやページの読み込みが完了したときなどの動作を指します。JavaScriptではイベントが発生したときに実行する関数を指定するために、各要素のonclick属性などに処理する関数を指定できます。onclick属性については解説記事「クリック時の処理！JavaScriptでonclickを使う方法【初心者向け】」をご覧ください。 ※Eventオブジェクトとは、イベントが発生したときの情報が収められているものです。イベントの発生源である要素などが取得できます。JavaScriptの関数にEventオブジェクトを渡すには、HTMLのonclick属性に「event」を引数として渡します。   サンプルコード クリックしたボタンそのものと、「パープル」の要素自身を削除するサンプルコードです。 ソースコード // 「このボタンを削除」 がクリックされた時の処理 function del_this(event) { //イベントの発生源の要素を削除 event.target.remove(); } // 「パープルを削除」 がクリックされた時の処理 function del_purple(){ //「パープル」の要素をIDから取得 const elem_purple = document.getElementById('purple'); //elem_purple（idがpurple）の要素自身を削除 elem_purple.remove(); } <p>レッド</p> <p id="purple">パープル</p> <p>グリーン</p> <p>ブルー</p> <button onclick="del_this(event)">このボタンを削除</button> <button onclick="del_purple()">パープルを削除</button> 実行結果 See the Pen js_remove_this by mentor-inoue-y (@mentor-inoue-y) on CodePen. 解説 クリックされた要素自身を削除 function del_this(event) { ～ } 「このボタンを削除」ボタンがクリックされたときに呼び出される関数を定義しています。 HTMLの「このボタンを削除」ボタン（button要素）にあるonclick属性に、「del_this(event)」と指定して関数が呼び出されるようにしています。 HTMLのonclick属性でeventを引数で渡すことにより、イベントを発生させた要素の情報を関数に送れます。 イベントを処理する関数 del_this(event)でeventを受け取って、クリックされた要素をevent.targetで取得できます。 event.target.remove(); event.targetはイベント（今回はクリック動作）の発生源の要素である「このボタンを削除」ボタンを指していて、removeメソッドにより要素自身を削除できます。   取得した要素自身を削除 function del_purple(){ ～ } 「パープルを削除」ボタンがクリックされたら呼び出される関数を定義しています。 HTMLの「パープルを削除」ボタン（button要素）にあるonclick属性に、「del_purple()」と指定して関数が呼び出されるようにしています。 const elem_purple =
JavaScript

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptのElementオブジェクトについて現役エンジニアが解説【初心者向け】