UnsplashのNEOMが撮影した写真

HTMLからの関数呼び出し

JavaScritpの関数を呼び出す方法は４つあります。（もし他にもあったら追記します！）

以下は要素がクリックされた時にJavaScriptを呼び出す例です。

方法	例　　　　※関数hoge()を呼び出す例
aタグを使う	<a href=”javascript:hoge();”>実行</a>
buttonタグを使う	<button onclick=”hoge()“>実行</button>
inputタグを使う	<input type=”button” value=”実行” onclick=”hoge()“>
JavaScritpのイベントリスナーを使う	長くなるので別記事で紹介します

「buttonタグ」「inputタグ」は「onclick」という属性を使っていますが、他にも以下のようなものがあります。

属性	タイミング
onclick	クリックされた時
ondblclick	ダブルクリックされた時
mouseover	カーソルが乗った時

HTML要素の取得①　基本

■idで取得

let element = document.getElementById("id名");
　例）let element = document.getElementById("hoge");

取得する値の型：Elementt

　

■classで取得

let elements = document.getElementsByClassName("class名");
　例）let elements = document.getElementsByClassName("hoge");

取得する値の型：HTML Collection（配列）

　

■タグで取得

let elements = document.getElementsByTagName("HTMLタグ");
　例）let elements = document.getElementsByTagName("h2");

取得する値の型：HTML Collection（配列）

　

■name属性で取得

let elements = document.getElementsByName("name属性値");
　例）let elements = document.getElementsByName("hoge");

取得する値の型：NodeList（配列）

　

■セレクタで取得（最初に合致した要素１つを取得）

let element = document.querySelector("セレクタ");
　例）let element = document.querySelector(".hoge");  ⇐class名で指定

取得する値の型：Element

※セレクタ：クラス、ID、属性など。

　

■セレクタで取得（合致する要素全て取得）

let elements = document.querySelectorAll("セレクタ");
　例）let elements = document.querySelectorAll(".hoge");  ⇐class名で指定

取得する値の型：NodeList（配列）

※セレクタ：クラス、ID、属性など。

HTML要素の取得②　親、子、兄弟要素を取得

取得したHTMLを起点に、親、子、兄弟要素を取得する方法（＝ノードウォーキング）です。

例）let element = document.getElementById("id名");
    element.parentNode;   ⇐親要素を取得

取得する要素	内容
親要素	element.parentNode;
最初の子要素	element.firstElementChild;
最後の子要素	element.lastElementChild;
全子要素	element.children;
１つ前の要素	element.previousElementSibling;
１つ後の要素	element.nextElementSibling;

属性の操作

汎用的なメソッド

ここで紹介するのは属性全般を操作できるメソッドです。

　

■属性の取得

取得した要素.getAttribute("属性");
　例）element.getAttribute("class");

　

■属性を設定

取得した要素.setAttribute("属性", "属性値");
　例）element.setAttribute("class", "active");
　例）element.setAttribute("style", "color:#fff; background-color: #000;");

　

■属性を削除

取得した要素.removeAttribute("属性");
　例）element.removeAttribute("class");

各属性に特化したメソッド

各属性に特化したメソッドもあり、その中でも最もよく使うクラスを操作するメソッドをご紹介します。

　

■クラスの追加

取得した要素.classList.add("クラス名");
　例）element.classList.add("active");

　

■クラスの削除

取得した要素.classList.remove("クラス名");
　例）element.classList.remove("active");

　

■クラスのつけ外し

取得した要素.classList.toggle("クラス名");
　例）element.classList.toggle("active");

※上の例の場合、activeクラスがついていないならつける。ついているなら削除する。

HTML要素の追加・削除・編集

■要素の追加

ま要素を追加したい箇所の親要素を取得し、新規作成した要素を追加します。

let 親要素 = document.getElementById("id名");    //親要素の取得

let 新要素 = document.createElement("HTMLタグ"); //新要素の作成
新要素.innerHTML = "追加する要素";               //新要素の内容設定
親要素.appendChild(新要素);                      //新要素を追加

appendChildを使うと、親要素の最後の子要素として要素が追加されます。
（appendChild以外にも要素を追加するメソッドがあります。）

例）

let parentElement = document.getElementById("list");

let newElement = document.createElement("li");
newElement.innerHTML = "東京！";
parentElement.appendChild(newElement);

　

■要素の削除

let 要素 = document.getElementById("id名");  //対象の要素を取得
要素.remove();                               //要素を削除

例）

let element = document.getElementById("list");
element.remove();

　

■要素の編集

let 要素 = document.getElementById("id名");  //対象の要素を取得
要素.innerHTML = "更新後の値";               //要素を編集する

例）

let element = document.getElementById("list");
element.innerHTML = "<li>イタリア！！</li>"

　

今回は以上です！