初心者、新人が来たらコレ見せて！多分一番わかりやすいJavaScriptDOM操作解説（JQueryは使いません）

0.はじめに

0-1.はじめに

Web開発をするならJavaScriptは触る。
これは避けられないことなんだよなぁ…
今回はモダンなJavaScriptでのDOM操作を可能な限り簡単に解説するよ。

「jQueryわからん」
「JavaScriptの基本を押さえたい」
「新人に１から教える時間がない」

そんな方向けの記事となってますよ。

0-2.効率よく学ぶためには？

使い方とまでは言わないけど
個人的にオススメしたい学習方法はこんな感じです。

・CodePenのサンプルを触る
・「大事な所だけ抽出すると」のコードを見て、ポイントを押さえる
---------------------ここまでを全チャプターおこなう---------------------
・CodePenサンプルをよく読む
・実際にコードを書いて動かす
・サンプルを改造する

この記事では「DOMを使えるレベルになる」がゴール。
記事で解説してないこともある。
「もっといい、やりかたがあるのに…」

そう思えた時がプログラマとして成長するきっかけになりますよ！

1.基本:HTMLの要素を取ってくる

1-1.idを指定して取ってくる

チェックボックスのON、OFFで「テスト」の色が変わる。

See the Pen textID by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事な所だけ抽出すると！

.html

<!--変更したい要素-->
<p id="pText">テスト</p>

.js

//idを指定して要素を取ってくる
let pText = document.getElementById('pText');
//色指定
pText.style.color = "red";
pText.style.color = "black";

input属性の解説やonイベントの解説は後々、出てくるよ
初心者は焦らず、「大事な所だけ抽出すると」をじっくり読んで
動作内容を確認してから進もうね

（どうしても…って方は、ココを見るといいですよ）

input属性のonイベント（クリックしたら、値が変更したら）の解説
→2-4
引数のthisってなに？って方は
→3-2

1-2.class、nameを指定して取ってくる

チェックボックスのON、OFFで
「テストAは赤,黒」「テストBは緑,黒」に色が変わる。

See the Pen textClass by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事な所だけ抽出すると！

.html

<!--変更したい要素(クラス)-->
<p class="pText">テストA</p>
<p class="pText">テストB</p>

.js

//classを指定して要素を取ってくる(配列)
let pText = document.getElementsByClassName("pText");

//色指定
pText[0].style.color = "red";
pText[1].style.color = "green";

/*.html
<input type="radio" name="testRadio" value="nomal">*/
//nameの指定ならこちら！これも配列の形になります。
let elements = document.getelementsbyname("testRadio");

1-3.要素の取得(親、兄弟、子要素の取得)

要素の取得、最後！

すべての要素にIDなりNameなり付けるのは、めんどくさい。
だけど、いじりたい…
そんな時に使えるよ。

サンプルは一か所だけidを付けてるよ。

要素ごとに背景色を変えています

See the Pen getNode by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事な所だけ抽出すると！

.js

//元
let me = document.getElementById("me");
//親
let parent = me.parentNode;
//自分の子(配列)
let children = me.children;
//兄(自分の一個上)
let previous = me.previousElementSibling;
//弟(自分の一個下)
let next = me.nextElementSibling;

/* 階層図
親
 L兄
 L自分
   L自分の子
 L弟
*/

//背景色を設定(例)
me.style.background = "#FFD5EC";

他にも要素の取得方法はあるけど
このレベルまでいけば取れない要素はないよ。

2.要素を操作しよう!

要素の取り方は大体わかったと前提でいきます。
（わからない方は1.を見返そう）
では、もっと要素をいじっていきましょう！

(「これ実務で使うだろ!!」ってヤツを中心に解説するね)

2-1.テキストの変更

チェックボックスのON,OFFを表示する

See the Pen changeText by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事な所だけ抽出すると！

.js

//<p id="pText">
let pText = document.getElementById('pText');
//テキスト変更
pText.innerHTML="チェックボックスはONです"

2-2.テキストの表示、非表示

チェックボックスで表示、非表示を操作する

See the Pen textDisplay by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事な所だけ抽出すると！

.js

//<p id="pText">
let pText = document.getElementById('pText');
//テキスト表示
pText.style.display ="block";
//再表示時にデザインが崩れる場合はこっち
pText.style.display = "";

//非表示
pText.style.display ="none";

2-3.活性、非活性（操作の有効化、無効化）

チェックボックスがチェック時に活性

See the Pen textDisabled by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事な所だけ抽出すると！

.js

//<input type="text" id="testText">
let testText = document.getElementById("testText");
//非活性
testText.disabled = true;
//活性
testText.disabled = false;

※タイプミスが多発するんだよなぁ…
disabled=無効化だからtrueで非活性になるよ

2-4.マウスオーバー（Onイベント処理）

onイベントの設定方法について。
onイベントって何？って方へ簡単に説明すると

その要素に変化があったら呼び出される処理だよ。
例えば「クリックされたら、値が変更されたら…など」

マウスポインタをpタグ,divタグに重ねると表示が変わります

See the Pen textMouseHover by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事な所だけ抽出すると！

.html

<!--直接イベントを書く-->
<p id="pText" onmouseover="over(this)" onmouseout="out(this)">pTest</p>
<!--JSでイベントを書く-->
<div id="divText">divTest</div>
<!--
onmouseover:マウスが要素の上にある
onmouseout:マウスが要素の上にあったが外れた
-->

.js

let divText = document.getElementById("divText");

/*イベントを書き込む(どっちのパターンでも動く！)*/
//パターン1
divText.addEventListener('mouseover',function(){over(this)});
divText.addEventListener('mouseout',function(){out(this)});

//パターン2
divText.onmouseover = function(){over(this);}
divText.onmouseout = function(){out(this);}

onイベント（今回だとonmouseover,onmouseout…他にもonclickなど）
コレを動かすには関数を呼び出す必要があるよ。
（pタグ,divタグ両方その形で書いてます）

また、引数にthisを渡す場合は
関数内で関数(this)を呼び出す必要があるよ。(.jsを参照)
※thisってナニ？って方は3-2で解説してるよ。
（めんどくさい。でも…仕方ないんだよ。英語の文法と同じ、考えたら負けです）

コレは好き嫌いになると思いますが、onイベント類を書く時。
私はサンプルのpタグと同じ形式であるHTML内で書く方が好き。
(要素を追加する場合は、JSで書かないとだけどねぇ… 4-2で解説)

最後にonmouseoverとonmouseout
こちら、両方の処理を書くこと。
onmouseoverのみだと変更した処理が残っちゃうから。
変更を元に戻すためにonmouseoutを呼び出してね。

3.ちょっと役立つコーディング技術

要素の追加とか、セレクトボックス、テーブルの解説に進む前に
ちょっと役立つコーディング技術を説明するね。

3-1.複数要素を一括で処理する

要素を選択して変更するのが基本だけど、例えば非活性。
1,2個なら楽だけど…コレが10個以上、非活性にする場合

.js

var element1 = document.getElementsById("element1");
var element2 = document.getElementsById("element2");
//この後もidを指定して変数に入れていく

element1.disabled = true;
element2.disabled = true;
//この後も非活性を書いていく

非常にめんどくさい
document.getElementsByName(name)で取ってくるのも手だけど
非活性の場合、いろんなinput属性をもつ要素を扱うので
それも厳しい…

そんなときに使えるのはコレ！「配列に入れて、一括処理する」

ではサンプルをどうぞ
チェックボックスで活性、非活性を変更する

See the Pen Untitled by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事な所だけ抽出すると！

.js

//一括で操作したいElementオブジェクトを入れる
let elements = [];
//一括で操作したいelementのid名
let elementsId = ["testText","testColor","testRange"];

//要素を取ってきて配列に入れ込む
for(let i=0; i<elementsId.length; i++){
  let element = document.getElementById(elementsId[i]);
  //末尾に追加
  elements.push(element);
}

//一括非活性
for(let i=0; i<elements.length; i++){
    elements[i].disabled = true;
}

同じElementオブジェクトなのでfor文で一括処理できるぞ。
今回は3つの要素を一括で操作したよ。
一括で操作したい要素が多くなったら、便利さが心で理解できるはず！

また今回はそれぞれの要素を配列だけに持たせたけど…
input属性はそれぞれ一個づつ変数に入れる。
その後に配列に格納することをオススメするよ。

「一か所のみ変更したいけど…要素番号どれだっけ？」
ってなるからね。

3-2.同じ関数を使いまわしたい！

例えばボタン
押したボタンは、どれか判定したいって時がありますよね。

他にもinput属性だったら
「変更したものの値を知りたい」って時あるよね。

その時、呼び出す関数を1つ1つ書く？
また、その中で要素を指定して変更処理を書く？

.js

//<input type="button" id="buttonA" onclick="buttonClickA()">
//<input type="button" id="buttonB" onclick="buttonClickB()">
//<input type="button" id="buttonC" onclick="buttonClickC()">

function buttonClickA(){
 let buttonA = document.getElementById("buttonA");
 //要素を指定して変更処理を書く
}

function buttonClickB(){
  let buttonB = document.getElementById("buttonB");
  //要素を指定して変更処理を書く
}

function buttonClickC(){
  let buttonC = document.getElementById("buttonC");
  //要素を指定して変更処理を書く
}

非常にめんどくさい…

そんなときに使えるのが引数にthisを渡す
これで、どのボタンから関数を呼び出したかが分かるよ

サンプル：押したボタンの値とidを表示する
（IDは分かりやすいように名前に違和感を持たせてます）

See the Pen functionThis by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

HTMLを見れば分かると思うけど、onclickで呼び出されている関数
これは全てのボタンがclickButton(this) になってるね。
では気になるclickButton(this)の中身は？

.js

function clickButton(element){
  pTest.innerHTML = "押したボタン:"+element.value+"<br/>押したボタンのID:"+element.id;
}

呼び出した要素のvalueとidを取ってきて表示させてるだけね。
関数内でボタンの要素をgetElement~で取ってきてないね。

このthisをうまく使えば、もっと複雑な処理を自由に書けるよ。
例えば、条件に達した場合に非活性にするとかね。
（input属性の解説では当たり前のようにthisを使っていきます）

いっぱいコード書いて慣れよう！

4.要素を追加、削除

ユーザー操作によっては入力する場所が増える
なんなら可変で増える場合もあるし、削除するときもあるね。

そんな時、困らないように勉強していこう！

4-1.要素を追加する

まずは追加の基礎から
ボタンクリックでpタグを最大3個追加する

See the Pen addPtag by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事な所だけ抽出すると！

.js

//追加先divタグ
let setPTag = document.getElementById("setPTag");

//pタグを追加してある箇所
//pタグを生成
let pElement = document.createElement('p');
//追加先を指定して末尾にpタグを入れる
setPTag.appendChild(pElement);

//先頭に指定したい場合は
setPtag.prepend(pElement);

document.createElement()は要素を指定して生成してるね。
divとかtrなどを指定して使うから覚えておこう。
（他サンプルでも別の要素を指定して使ってます）

サンプルをよく読めば分かると思いますが、生成後
idやCSSを設定して末尾に追加してるんだよね。
余裕がある方は、ぜひサンプルコードを読んでね。

4-2.要素を追加(onイベントも設定する)

ボタンクリックでinput type="text"を最大3つ追加
追加したinput属性にoninputイベント追加(pタグで入力値とIDを表示)

See the Pen addInput by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事な所だけ抽出すると！

.js

//inputタグを生成
let inputElement = document.createElement('input');
//inputタグのタイプを指定
inputElement.type = "text";
//oninputイベントを追加
inputElement.oninput = function(){inputDraw(this);}

4-3.要素の追加、前後

要素の追加、ある程度理解できたと思うけど、コード読んでる方
こう思ってない？

「親を指定（divとか）して追加がルールなのか」っと
結論、親がなくても追加できるぞ。
ではサンプルを見ていこう！

ボタンクリックでpタグの前後に要素を追加します

See the Pen addBeforAfter by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事な所だけ抽出すると！

.js

//基準に使います
let testP = document.getElementById("testP");
//要素の追加
let pElement = document.createElement('p');
//基準の前に追加
testP.before(pElement);
//基準の後ろに追加
testP.after(pElement);

4-1,3まとめ. 要素の追加(4パターン)

項目を行ったり来たりするの大変だと思ったので
こっちに、まとめるよ

要素を追加する4パターン

See the Pen addElements by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

.js

/*.html
<div id=me>
  <div>children</div>
</div>
*/

//追加先の指定
let me = document.getElementById("me");

//生成
let divTag = document.createElement("div");

//meの前
me.before(divTag);
//meの後ろ
me.after(divTag);

//親を指定して先頭に追加
me.prepend(divTag);
//親を選択して末尾に追加
me.appendChild(divTag);

4-4.要素の削除(一か所だけ)

ボタンクリックで先頭のpタグ(pId0)を削除します

See the Pen removeP by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事な所だけ抽出すると！

.js

//pタグを生成
let pTag = document.createElement('p');
//末尾に生成したpタグを追加(bodyの末尾)
document.body.appendChild(pTag);

//削除対象の要素を取ってくる
let child = document.getElementById("pId0");
//削除(bodyの中にある削除対象を削除)
document.body.removeChild(child);

今回はpタグをbodyの末尾に追加する形にしましたが、あまりオススメしないなぁ…
理由は次(4-5)で説明するね。

4-5.要素の一括削除

さっきは一か所のみを削除したけど
全部削除したい場合は、コレを使おう！

ボタンクリックでpタグを一括削除する

See the Pen removePtags by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事な所だけ抽出すると！

.js

//pタグが入ってるdiv
let setP = document.getElementById("setP");

//div削除(中のpタグも一緒に消える)
setP.remove();

もし4-4で削除処理をdocument.body.remove();にすると、どうなる？
ボタン含めて、すべての要素が消えるぞ（真っ白画面になる）

要素を削除する前提で作るならdivの中に書こう

divがなければ…
div生成→divの中に追加したいものを生成、追加→divを追加

5.CSS、スタイルの追加、切り替え

今までのサンプルにも記述内容を説明したけど、もっと知りたい方向け。
より詳しくCSS、スタイルの変更を見ていこう！

5-1.CSSを切り替える

ボタンクリックでクラスを切り替える(追加、変更)
赤文字→太字に、青文字→緑に、緑→デフォルトに戻す

See the Pen changeClassName by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事な所だけ抽出すると！

.js

//変更対象
let testP = document.getElementById("testP");
let testP2 = document.getElementById("testP2");
let testP3 = document.getElementById("testP3");

//CSSで指定したクラスを複数適応させる
testP.className = "red bold";
//クラスの変更
testP2.className = "green";
//クラスの削除
testP3.className = "";

5-2.べた書きでスタイルを変更する

ボタンクリックでCSSを変更する
赤文字→デフォルトに戻す、青文字→枠線を消す、緑→太くする

See the Pen changeStyle by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事な所だけ抽出すると！

.js

//変更対象
let testP = document.getElementById("testP");
let testP2 = document.getElementById("testP2");
let testP3 = document.getElementById("testP3");

//追加するスタイルの基本
let CssText = "margin-top:5px; margin-bottom: 5px; paddling:0px; border:solid;";

//スタイルを適応させる
testP.style.cssText = CssText + " color:red";

//スタイルを全削除
testP.style.cssText = "";
//スタイルの一部を削除する
testP2.style.border = "";
//スタイルの一部を変更する
testP3.style.fontWeight = "bold";

注意が必要なのは一部変更
.CSSならfont-weightがJS側ではfontWeightになるんだよね。
他にもmargin-topなども同様にmarginTopが正しい記述となってるぞ。

6.ラジオボタン

ここからは、ユーザー入力でよく使うものを解説していくね。
実務でよく使うだろうなというモノを中心に解説していくぞ。

input属性のbutton、text、checkboxは
今までのサンプルで取り上げているので今回はスルー。
（サンプルコードを読めば理解できるようにしてるから）

※サンプル内ではname属性を指定してないよ（書く量を減らすため）
バックエンドに値を渡す場合は、必ず記述してね。
書かないと、バックエンド担当の方から、ぶん殴られますよ。

6-1.値の取得

チェックしたラジオボタンの値を表示する

See the Pen testRadio by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事な所だけ抽出すると！

.js

/*.html
ラジオボタンにonchangeイベントを設定
<input type="radio" name="testRadio" onchange="radioChange(this)" value="nomal">
*/

//値を表示する箇所
let testP = document.getElementById("testP");

//onchangeイベントで呼び出す関数
function radioChange(element){
  //チェック中のものが対象
  if(element.checked){
    //element.value = ラジオボタンの値
    testP.innerHTML = "選択したのは：" + element.value;
  }
}

//--------------------------------------------------------
/*checkboxについて
対象にしたいcheckbox <input type="checkbox" id="testCheckbox">
checkboxもラジオボタンと同じで.checkedでチェック判定ができます*/
document.getElementById("testCheckbox").checked;
//(true or false)

6-2.選択肢の追加

ボタンクリックでラジオボタンを追加
チェックしたラジオボタンの値を表示する

See the Pen addRadio by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事な所だけ抽出すると！

.js

/*.html
ボタンにonclickイベントを設定
<input type="button" onclick="clickButton(this)" value="ラジオボタン追加" style="margin-bottom:10px">
*/

//ラジオボタン要素がすべて入ってる配列
let testRadio  = document.getElementsByName("testRadio");

//ボタンのonclickで呼び出される関数
function clickButton(element){
  //今回生成する要素 <label><input type="radio">text</label>
  //まずはラベルを生成、設定
  let labelTag = document.createElement("label");
  labelTag.innerHTML = "下位";
  
  //ラジオボタンの生成、設定  
  let inputTag = document.createElement("input");
  inputTag.type = "radio";
  inputTag.name = "testRadio";
  inputTag.value = "subordinate";
  //onchangeイベントを設定
  inputTag.onchange = function(){radioChange(this);}

  //ラベルの先頭にラジオボタンを入れる(子要素)  
  labelTag.prepend(inputTag);
  
  /*ラジオボタン（一般）の前に追加
  <label><input type="radio"></label>
  正しく追加するために
　testRadio[0]の親要素(<label>)の前に追加する必要がある
  */
  let setLabel = testRadio[0].parentNode;
  //生成したラベル+ラジオボタンをラベルの先頭に追加
  setLabel.before(labelTag);
}

ちなみにラジオボタンを追加した後testRadioは更新されてるぞ！
詳しく見た方はサンプルコードでconsole.logを出してるから
そちらで確認してね。

6-3.初期状態に戻す

ボタンクリックで初期化（チェックを外す）

See the Pen initializeRadio by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

.js

/*.html
ボタンにonclickイベントを設定
<input type="button" onclick="clickButton(this)" value="ラジオボタン追加" style="margin-bottom:10px">
*/

//ラジオボタン要素がすべて入ってる配列
let testRadio  = document.getElementsByName("testRadio");

//ボタンのonclickで呼び出される関数
function clickButton(element){
  //すべてのラジオボタンのチェックを外す
  for(let i=0; i<testRadio.length; i++){
    testRadio[i].checked = false;
  }
}

6-4.選択肢を減らす

チェックボックスの状態によって下位が選べなくなる

See the Pen unselectedRadio by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事な所だけ抽出すると！

.js

/*.html
チェックボックスにonchangeイベントを設定
<input type="checkbox" onchange="changeCheckBox(this)">
*/

//ラジオボタン要素がすべて入ってる配列
let testRadio  = document.getElementsByName("testRadio");
//画面表示用
let testP = document.getElementById("testP");

//チェックボックスのonchangeで呼び出される関数
function changeCheckBox(element){
  //※ラベル要素を取ってくる
  let parent = testRadio[0].parentNode;
  if(element.checked){
    //選択不可に
    testRadio[0].disabled = true;
    //非表示対象だったら表示を初期化する
    if(testRadio[0].checked){
       testP.innerHTML = "選択したのは：";
    }
    //チェック状態を切る
    testRadio[0].checked = false;
    //非表示
    parent.style.display ="none";
  }else{
    //初期状態に戻す
    testRadio[0].disabled = false;
    parent.style.display ="";
  }
}

/*※対象となるindexを求める(べた書きしないパターン)
let parent = testRadio[disabledIndex].parentNode;*/

let disabledIndex;
for(let i=0; i<testRadio.length; i++){
  if(testRadio[i].value == "subordinate"){
    //対象となるindex
    disabledIndex = i;
    break;
  }
}

7.セレクトボックス

こちらもよく使うと思うから解説。
慣れておくと出来ることが広がるのでぜひ、頑張って学習しようね。

7-1.値の取得

セレクトボックスで選択中のindex、値、テキストを表示

See the Pen testSelect by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事な所だけ抽出すると！

.js

/*.html
onchangイベントを設定
<select onchange="changeSelect(this)"></select>
*/

//onchangeイベントで呼び出される関数
function changeSelect(element){
  //index(0からカウント)
  let index = element.selectedIndex;
  //表示テキスト
  let selectOption = element.options[index].text;
  //値
  let value = element.value;
}

テキスト表示は
選択中のセレクトボックスの要素番号を取得
→要素番号を使って表示中のテキストを取得
この流れになってますね。

注意してね。

7-2.選択項目を追加

ボタンクリックで項目に「下位」を追加

See the Pen Untitled by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事な所だけ抽出すると！

.js

/*ボタンにonclicイベントを設定
<input type="button" onclick="clickButton(this)" value="項目追加" style="margin-bottom:10px">
*/

//いじりたい要素
let testSelect = document.getElementById("testSelect");

//ボタンのonclickイベントで呼び出される関数
function clickButton(element){
  //生成
  let option = document.createElement("option");
  //値を設定
  option.value="subordinate";
  //テキストを設定
  option.text="下位";
  //「ランクを選んでください」の下に追加
  testSelect.options[0].after(option);
}

7-3.初期化

ボタンクイックでセレクトボックスを初期状態にします

See the Pen resetSelect by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事な所だけ抽出すると！

.js

/*ボタンにonclicイベントを設定
<input type="button" onclick="clickButton(this)" value="項目追加" style="margin-bottom:10px">
*/

//いじりたい要素
let testSelect = document.getElementById("testSelect");

function clickButton(element){
  //先頭を選択状態に
  testSelect.selectedIndex = 0;
  //先頭から入力値として設計しているなら(セレクトボックスが「一般」から始まる場合)
  testSelect.selectedIndex = -1;
}

ちなみに
selectedIndex = -1にすると
セレクトボックスが空白状態になるぞ。

7-4.選択肢を減らす

チェックボックスの状態によって下位が選べなくなる

See the Pen Untitled by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事な所だけ抽出すると！

.js

/*.html
チェックボックスにonchangeイベントを設定
<input type="checkbox" onchange="changeCheckBox(this)">
*/
//いじりたい要素
let testSelect = document.getElementById("testSelect");

function changeCheckBox(element){
  if(element.checked){
    //現在、選択中のindex
    let index = testSelect.selectedIndex;
    
    //※pタグの表示を初期化するか？
    if(index == 1){
      testP.innerHTML = "index:<br/>値:<br/>テキスト:";
      testSelect.selectedIndex = 0;
    }
    //非表示、非活性
    testSelect.options[1].disabled = true;
    testSelect.options[1].style.display = "none";
  }else{
    //もとに戻す
    testSelect.options[1].disabled = false;
    testSelect.options[1].style.display = "";
  }
}

//※非表示にするindexを値から取得する
//pタグの表示初期化判定を変数のみで扱える if(index == disabledIndex)
let disabledIndex;
for(let i=0; i<testSelect.length; i++){
    if(testSelect.options[i].value == "subordinate"){
        //対象のindex
        disabledIndex = i;
        break;
    }
}

8.表

表もよく使うから、ここも気を抜かずに勉強しようね。

8-1.表の行、セルを取得

指定した行とセルの色を変更する

See the Pen testTable by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事な所だけ抽出すると！

.js

//要素を取得
let testTable = document.getElementById("testTable");

//行を指定して背景色変更
testTable.rows[1].style.background = "#f56565";
//セルを指定して背景色変更
testTable.rows[0].cells[0].style.background = "#85ed85";

8-2.セルにonイベントを指定

マウスオーバーでセルのテキストを取得して表示

See the Pen tableOnmouseover by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事な所だけ抽出すると！

.js

//要素を取得
let testTable = document.getElementById("testTable");

//for文で回してonイベントを指定していく
//表の行数を取得 testTable.rows.length
for(let i=0; i < testTable.rows.length; i++){
  //行を指定して列数を取得　testTable.rows[i].cells.length
  for(let j=0; j < testTable.rows[i].cells.length; j++){
    testTable.rows[i].cells[j].onmouseover = function(){over(this);}
    testTable.rows[i].cells[j].onmouseout = function(){out(this);}
  }
}

8-3.行の追加

ボタンクリックで行を追加します

See the Pen addRow by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事な所だけ抽出すると！

.js

//要素を取得
let testTable = document.getElementById("testTable");

//末尾に行を追加
let tr = testTable.insertRow(-1);
//末尾にセルを追加
let cell = tr.insertCell(-1);

//場所を指定して行を追加（0からスタート）
tr = testTable.insertRow(0);
//場所を指定してセルを追加(0からスタート)
cell = tr.insertCell(-1);

8-4.行の削除

ボタンクリックで行を削除

See the Pen deleteRow by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.

大事な所だけ抽出すると！

.js

//要素を取得
let testTable = document.getElementById("testTable");

//行を指定して削除
testTable.deleteRow(0);
//行の末尾を非表示
testTable.rows[testTable.rows.length - 1].style.display = "none";