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


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

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

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

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

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

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

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

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

# 1.基本:HTMLの要素を取ってくる
## 1-1.idを指定して取ってくる
**チェックボックスのON、OFFで「テスト」の色が変わる。**
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="qBYVxbO" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/qBYVxbO">
  textID</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
大事な所だけ抽出すると！

```.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は緑,黒」に色が変わる。**
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="YzLEeQV" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/YzLEeQV">
  textClass</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
大事な所だけ抽出すると！

```.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を付けてるよ。

**要素ごとに背景色を変えています**
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="YzLEMaP" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/YzLEMaP">
  getNode</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

大事な所だけ抽出すると！
```.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を表示する**
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="VwxrQMb" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/VwxrQMb">
  changeText</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
大事な所だけ抽出すると！

```.js
//<p id="pText">
let pText = document.getElementById('pText');
//テキスト変更
pText.innerHTML="チェックボックスはONです"
```
## 2-2.テキストの表示、非表示
**チェックボックスで表示、非表示を操作する**
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="poVdXvo" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/poVdXvo">
  textDisplay</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

大事な所だけ抽出すると！
```.js
//<p id="pText">
let pText = document.getElementById('pText');
//テキスト表示
pText.style.display ="block";
//再表示時にデザインが崩れる場合はこっち
pText.style.display = "";

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

## 2-3.活性、非活性（操作の有効化、無効化）
**チェックボックスがチェック時に活性**
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="jOxajaP" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/jOxajaP">
  textDisabled</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

大事な所だけ抽出すると！
```.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タグに重ねると表示が変わります**

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="KKRZzXr" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/KKRZzXr">
  textMouseHover</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

大事な所だけ抽出すると！
```.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属性をもつ要素を扱うので
それも厳しい…

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

ではサンプルをどうぞ
**チェックボックスで活性、非活性を変更する**
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="yLjpJXY" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/yLjpJXY">
  Untitled</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

大事な所だけ抽出すると！
```.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は分かりやすいように名前に違和感を持たせてます）

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="GRdydXp" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/GRdydXp">
  functionThis</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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個追加する**

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="abGEjvm" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/abGEjvm">
  addPtag</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

大事な所だけ抽出すると！
```.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を表示)**
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="bGMaxeE" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/bGMaxeE">
  addInput</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

大事な所だけ抽出すると！
```.js
//inputタグを生成
let inputElement = document.createElement('input');
//inputタグのタイプを指定
inputElement.type = "text";
//oninputイベントを追加
inputElement.oninput = function(){inputDraw(this);}

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

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

**ボタンクリックでpタグの前後に要素を追加します**
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="bGMLKJM" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/bGMLKJM">
  addBeforAfter</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

大事な所だけ抽出すると！
```.js
//基準に使います
let testP = document.getElementById("testP");
//要素の追加
let pElement = document.createElement('p');
//基準の前に追加
testP.before(pElement);
//基準の後ろに追加
testP.after(pElement);
```

### 4-1,3まとめ. 要素の追加(4パターン)
項目を行ったり来たりするの大変だと思ったので
こっちに、まとめるよ

**要素を追加する4パターン**
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="VwxxzqG" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/VwxxzqG">
  addElements</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

```.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)を削除します**

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="MWGrdxd" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/MWGrdxd">
  removeP</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

大事な所だけ抽出すると！
```.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タグを一括削除する**
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="zYjpVWN" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/zYjpVWN">
  removePtags</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

大事な所だけ抽出すると！
```.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を切り替える
**ボタンクリックでクラスを切り替える(追加、変更)
赤文字→太字に、青文字→緑に、緑→デフォルトに戻す**
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="zYjRLrG" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/zYjRLrG">
  changeClassName</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

大事な所だけ抽出すると！
```.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を変更する
赤文字→デフォルトに戻す、青文字→枠線を消す、緑→太くする**
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="MWGQBog" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/MWGQBog">
  changeStyle</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

大事な所だけ抽出すると！
```.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.値の取得
**チェックしたラジオボタンの値を表示する**
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="bGMvgjO" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/bGMvgjO">
  testRadio</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

大事な所だけ抽出すると！
```.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.選択肢の追加
**ボタンクリックでラジオボタンを追加
チェックしたラジオボタンの値を表示する**
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="wvjmJew" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/wvjmJew">
  addRadio</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

大事な所だけ抽出すると！
```.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.初期状態に戻す
**ボタンクリックで初期化（チェックを外す）**
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="QWrmvwp" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/QWrmvwp">
  initializeRadio</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

```.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.選択肢を減らす
**チェックボックスの状態によって下位が選べなくなる**
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="BaxrZNJ" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/BaxrZNJ">
  unselectedRadio</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

大事な所だけ抽出すると！
```.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、値、テキストを表示**
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="BaxxdZb" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/BaxxdZb">
  testSelect</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

大事な所だけ抽出すると！
```.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.選択項目を追加
**ボタンクリックで項目に「下位」を追加**
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="WNJJEXe" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/WNJJEXe">
  Untitled</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

大事な所だけ抽出すると！
```.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.初期化
**ボタンクイックでセレクトボックスを初期状態にします**
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="bGMMoqe" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/bGMMoqe">
  resetSelect</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

```.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.選択肢を減らす
**チェックボックスの状態によって下位が選べなくなる**
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="VwxxMXo" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/VwxxMXo">
  Untitled</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

```.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.表の行、セルを取得
**指定した行とセルの色を変更する**
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="XWqqZgq" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/XWqqZgq">
  testTable</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

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

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

## 8-2.セルにonイベントを指定
**マウスオーバーでセルのテキストを取得して表示**
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="bGMMLjg" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/bGMMLjg">
  tableOnmouseover</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

```.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.行の追加
**ボタンクリックで行を追加します**
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="rNvvJXQ" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/rNvvJXQ">
  addRow</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

```.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.行の削除
**ボタンクリックで行を削除**
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="MWGGVaq" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/MWGGVaq">
  deleteRow</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

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

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