DOM

javascript DOM・・全部queryselectorでaddEventListenr

更新日:

 

2. htmlの文字が1秒後に変わる

①h1,h2などを操作

html

<h1>何が変わる?</h1>

js

function aaa(){
document.querySelector('h1').textContent = 'h1変わります';
}
setTimeout(aaa, 1000);

htmlのh1の文字が「h1変わります」が1秒後に表示される。

 

②idを振って操作

html

<h2 id="auau">何の言語を勉強してますか?</h2>

js

function bbb(){
document.querySelector('#auau').textContent = 'javascript勉強中';
}
setTimeout(bbb, 1000);

 

 

3. 特定のp要素だけ変える

2のようにp要素を指定するとp全部のテキストが変わってしまう。

idを振るのもいいが、何番目といった指定でテキスト等を変えたりするのは使い道が多い。

html

<p>あああああ</p>
<p>いいいいい</p>
<p>ううううう</p>

js

①特定のものだけ変える

document.querySelectorAll('p')[1].textContent = '2番目のpを変える';

→2番目のpである「いいいいい」が「2番目のpを変える」というテキストに変わる。

 

②番号を振ってくれる

function aaa(){
 document.querySelectorAll('p').forEach((p,index) =>{
 p.textContent = `${index}番目のpです`;
 });
}

setTimeout(aaa, 1000);

※indexでなくても何でもいい

こうすると、3つのpは
0番目のpです
1番目のpです
2番目のpです

と表示される。

 

 

4. 親・子の取得

html

<ul>
 <li>itme</li>
 <li>itme</li>
 <li>itme</li>
</ul>

js
①親ulから子liを取得

これを取得(指定)→ul.childNodes(空白・改行も含む)、テキスト部分のみul.children
最初を指定→ul.firstChild、テキスト部分のみul.firstElementChild
最後を指定→ul.lastChild、テキスト部分のみul.lastElementChild

②子liから親ulを取得

li.parentNode

③同じ系列を取得(子liから他のli)

1つ前:li.previousSibling、テキスト部分のみli.previousElementSibling
1つ後:li.nextSibling、テキスト部分のみli.nextElementSibling

 

 

5.ボタンクリックでjsが動く

html

<button>Run</button>
<h2 id="auau">何の言語を勉強してますか?</h2>

js

①functionを使う

function aaa(){
 document.getElementById('auau').textContent = 'javascript勉強中';
 document.querySelector('button').addEventListener('click' , aaa);
}

getElementByIdのときid名auauは#auauではなく単にauauとする。

getoelementbyIDはhtmlから取得
querysectorはボタンを~、addeventはクリックしたら

 

②アロー関数を使う

document.querySelector('button').addEventListener('click' , () =>{
 document.getElementById('auau').textContent = 'javascript勉強中';
});

 

 

6. クリックでテキスト以外を操作

html

<button>Run</button>
<h2 id="auau" title="項目">何の言語を勉強してますか?</h2>

js

これまでのは重複箇所があったので今度は定数を使って短く書く

document.querySelector('button').addEventListener('click' , () =>{

 const auauNode = document.getElementById('auau');

 auauNode.textContent = 'javascript勉強中';

 auauNode.title = 'マウスオーバーのテキスト部分が変わる';

htmlのtitleはマウスオーバーすることで表示されるテキスト
それをjsで変える
最初は「項目」だったのがマウスオーバーで「マウスオーバーのテキスト部分が変わる」になる。

 

2つのcssを操作する

javascriptで1つ目はテキストの色を変える、もう1つは背景を変える
→そうすると、後に書いた背景のみが反映してテキストが変更されないといった不具合が出る。

auauNode.style.color = 'red';

auauNode.style.backgroundColor = 'pink';

});

auauNode.style.background-color = 'pink';←ハイフンをつけてはダメでハイフンを消して大文字にする
そうしないと反映されない

 

 

7. CSS操作

html

<style>
.my-color{
 color: red;
 background-color:skyblue;
}
.my-border{
 border-bottom: 4px solid orange;
}
</style>

<button>Run</button>
<h2 id="auau" 何の言語を勉強してますか?</h2>

js

2つのCSSのクラスがある場合、後のみ適用されてしまう欠点がある。
この場合だと後にあるボーダー部分のみ適用され赤色、青色背景が消えてしまう。
↓2つのクラスを適用させる場合は下記のようにする。

document.querySelector('button').addEventListener('click',()=>{
const auauNode = document.getElementById('auau');
auauNode.className = 'my-color my-border';
});

 

 

8. toggle クラスがないならつける、あるなら外す

html

<style>
.my-color{
 color: red;
 background-color:skyblue;
}
</style>

<button>Run</button>
<h2 id="auau" 何の言語を勉強してますか?</h2>

js

クラスがついていたら外す
ついていなかったら付けるという処理をする

ifで作ってもいいが、下記のtoggleを使うと簡単にできるので必ず覚えておくこと。

document.querySelector('button').addEventListener('click',()=>{
 const auauNode = document.getElementById('auau');
 auauNode.classList.toggle('my-color');//超便利!!
});

 

 

9. htmlにdataを使う

html

<button>Run</button>
<h1 id="auau">ドットインストール </h1>
<h2 id="js" data-translation="javascript">ジャバスクリプト勉強してます</h2>

js

document.querySelector('button').addEventListener('click',()=>{
 ①const auauNode = document.getElementById('auau');
 ②const jsNode = document.getElementById('js');
↓ボタンを押すと英語が出る

auauNode.textContent ='Dotinstall';
jsNode.textContent =jsNode.dataset.translation;
});

①これまでのやり方

②今回のやり方はhtmlのデータのところに"javascript"を書いておき、これがボタンクリックで英語が出る。

 

 

10. ボタンクリックでliが追加される

html

<button>Run</button>
<ul>
 <li>item0</li>
 <li>item1</li>
</ul>

js

4つのステップが必要

1.li要素を作る

document.querySelector('button').addEventListener('click', ()=>{
 const item2 = document.createElement('li');

2.テキストを作る

item2.textContent = 'アイテム2のテキストの中身です';

3.親要素ulを取得

const aaa = document.querySelector('ul');

4.ulの子要素liの末尾に追加

aaa.appendChild(item2);
});

 

 

11. ボタンクリックでliの間に追加

html

<button>Run</button>
<ul>
 <li>item0</li>
 <li>item1</li>
 <li>item2</li>
</ul>

js

4つのステップが必要

document.querySelector('button').addEventListener('click', ()=>{

1.liであるitem0をコピー

const item0 = document.querySelectorAll('li')[0];

2.item0をコピー

クローンノードというメソッドを使う

const copy = item0.cloneNode(true);

3.親要素を取得

const ul = document.querySelector('ul');

4.item2の前に挿入

まずitem2を取得

const itme2 = document.querySelectorAll('li')[2];

前に挿入というインサートビフォワーを使う

ul.insertBefore(copy, itme2);
});

慣れれば簡単だが、それまでは何度もこの手順を読んで暗記すること。

 

 

12. liを削除

html

<button>Run</button>
<ul>
 <li>item0</li>
 <li>item1</li>
 <li>item2</li>
</ul>

js

4つのステップが必要

document.querySelector('button').addEventListener('click', ()=>{

1.item全部を取得し、そのうちの0番目(つまり最初)

const item1 = document.querySelectorAll('li')[0];

2.削除するのはリムーブを使う

document.querySelector('ul').removeChild(item1);
});

 

 

13. テキスト入力→ボタンクリックでその文字が表示

html

<input type="text">
<button>押す</button>

<ul>
</ul>

js

document.querySelector('button').addEventListener('click', ()=>{

1.リストに追加するli要素を作る

const li = document.createElement('li');

2.インプットに入力されたものを取得したい

const tex = document.querySelector('input');

3.liのテキストコンテントに値をセットする、入力された値はバリュー属性で

li.textContent = tex.value;

4.ulに対してアペンドチャイルド

document.querySelector('ul').appendChild(li);//要注意'li'ではない

5.入力後からにしてあげる

tex.value = '';

6.フォーカスさせるにはフォーカスメソッドを使う

tex.focus();
});

 

 

14. 選択(セレクションボックス)

赤、青、黄というセレクションボックスから色を選択し、その色がテキストで表示されるものを作る。

html

<select>
 <option value="red">赤 </option>
 <option value="blue">青</option>
 <option value="yellow">黄</option>
</select>
<button>押す</button>

<ul>
</ul>

js

document.querySelector('button').addEventListener('click', ()=>{

1.リストに追加するli要素を作る

const li = document.createElement('li');

2.選択されたものを取得

const color = document.querySelector('select'); ←selectは絶対

3.liのテキストコンテントに値をセット

li.textContent = `${color.value}${color.selectedIndex}`;

4.リストに追加

document.querySelector('ul').appendChild(li);
});

 

 

15. ラジオボタン(1つのみ選択可)

赤、青、黄から色を選択し、その色がテキストで表示されるものを作る。

html

<input type="radio" name="color" value="red"> 赤
<input type="radio" name="color" value="blue"> 青
<input type="radio" name="color" value="yellow"> 黄
<button>押す</button>

<ul>
</ul>

js

document.querySelector('button').addEventListener('click', ()=>{

1.リストに追加するli要素を作る

セレクションと違って1つにまとまっていないのでallを使う

const colors = document.querySelectorAll('input');

2.選択された値を保持

let selectedColor;
colors.forEach(color =>{

3.チェックはチェックドプロパティで

if(color.checked === true){
 selectedColor = color.value; ←バリュープロパティを代入
 }
});

4.liを作る

const li = document.createElement('li');

5.選択された色を代入

li.textContent = selectedColor;
document.querySelector('ul').appendChild(li);

});

 

 

16. チェックボックス(複数選択可)

赤、青、黄から複数の色を選択し、その色がテキストで表示されるものを作る。

html

<input type="checkbox" name="color" value="red"> 赤
<input type="checkbox" name="color" value="blue"> 青
<input type="checkbox" name="color" value="yellow"> 黄
<button>押す</button>

<ul>
</ul>

js

document.querySelector('button').addEventListener('click', ()=>{
 const colors = document.querySelectorAll('input');

1.チェックボックスは複数選択可なので配列を保持

const selectedColor = [];
colors.forEach(color =>{

3.チェックはチェックドプロパティで

if(color.checked === true){
 selectedColor.push(color.value);←複数選択されたものをあとから追加するからpushなのか
 }
});

4.liを作る(前回と全く同じ)

const li = document.createElement('li');

5.選択された色を代入(前回と全く同じ)

li.textContent = selectedColor;
document.querySelector('ul').appendChild(li);

});

 

 

17. マウスとダブルクリック

html

<button>押す</button>

js

1.ダブルクリックでイベント反応

ダブルクリックをすると「ダブルクリックだ」とログ表示

document.querySelector('button').addEventListener('dblclick', ()=>{
console.log('ダブルクリックだ');
});

2.マウス

マウスを動かすと・・
①マウスを動かしたとログ表示
②動かした回数が表示

document.addEventListener('mousemove', ()=>{ ←マウスムーブは決まっている文言
console.log('マウス動かしたね');
})

 

 

18. キーボードの文字をログ表示

js

document.addEventListener('keydown', e=>{ ←キーダウンは決まった文言
 console.log(e.key);
});

 

 

 

19. フォーカス

html

<textarea></textarea>

js

1-1.フォーカスした時

const tex = document.querySelector('textarea');

tex.addEventListener('focus' ,()=>{
 console.log('フォーカスしましたね');
});

1-2.フォーカス外した時

tex.addEventListener('blur', ()=>{
 console.log('フォーカス外した');
});

 

2.インプットとチェンジを使って上記同様の処理をする

const tex = document.querySelector('textarea');

2-1 要素にフォーカスしたとき

tex.addEventListener('input' ,()=>{
// console.log('inputしましたね');←これでもいいが文字数を取得
console.log(tex.value.length);
});

2-2 フォーカスが外れた時

tex.addEventListener('change', ()=>{
console.log('changeした');
});

 

 

20. テキストエリアと送信ボタン

html

<form>
 <input type="text">

 <button>送信</button>
</form>

フォームの中に入れることで、クリックだけではなくエンターでも同様の処理がされるので使い勝手がいい。

js

1.ページ遷移してしまう

document.querySelector('form').addEventListener('submit' , ()=>{
 console.log('送信します');
});

2.ページ遷移しない

document.querySelector('form').addEventListener('submit' , e=>{
 e.preventDefault();
 console.log('送信します');
});

 

 

21. クリックで取り消し線

html

<ul>
 <li>おはよう</li>
 <li>こんにちは</li>
 <li>こんばんは</li>
</ul>

js

イベントの伝播

AAA ←③クリック
 BBB
 BBB ←②クリック e.currenttarget
  ccc
  ccc
  ccc ←①クリック e.target
  ccc
こういったツリーがあるとする
①をクリックすることで②③にどんどん広がっていく、伝播していく

document.querySelector('ul').addEventListener('click',e=>{
 if(e.target.nodeName === 'LI'){
 e.target.classList.toggle('done');
}
});

※上記文言でないとダメ

 

 

 

 

 

 

-DOM

Copyright© プログラミング , 2020 All Rights Reserved.