ボタンをクリックしたら要素を追加する方法。
①追加したい要素を生成。メソッドはcreateElement('要素')
//要素の部分はli、h1とかの要素
②生成した要素の中身のテキストを設定
textContent = '設定したい文字'
③親要素を取得して、定義
取得方法は「document.querySelector('親要素')」
④定義した親要素に対して、「appendChild」で末尾に追加
以下、コード例
ボタンをクリックしたら、リストに要素を１つ追加する
'use strict';
{
// function update(){
// document.querySelector('#target').textContent = 'Changed'
document.querySelector('button').addEventListener('click',() =>{
//要素を追加する方法
const item2 = document.createElement('li');
//まずitem2をこのドキュメントで<li>として生成
item2.textContent = 'item2'
//item2の文字は'item2'とする
const ulNode = document.querySelector('ul');
//親Nodeを取得して,「ulNode」として定義
ulNode.appendChild(item2);
//appendChildメソッドで親要素の末尾に追加
})
}
以下、要素の複製と挿入
'use strict';
{
//要素の複製
document.querySelector('button').addEventListener('click',() =>{
const item0 = document.querySelectorAll('li')[0];
//<li>要素を全て取得して、０番目の要素
const copy = item0.cloneNode(true);//item0と同じ要素を生成
//中のテキストもコピーするならtrue
const ul = document.querySelector('ul');//親要素の取得
const item2 = document.querySelectorAll('li')[2];
ul.insertBefore(copy,item2);//親要素のitem2の前にcopyを追加
});
}
//いろんなイベントリスナーたち
'use strict';
{
document.querySelector('form').addEventListener('submit', ()=>{
console.log('submit');
document.querySelector('form').addEventListener('submit', e=>{
e.preventDefault(); //送信した時のリロード禁止
console.log('submit');
//formタグの中にある場合はEnterキーでも送信できる！！
})
const text = document.querySelector('textarea')
text.addEventListener('focus', ()=>{
console.log('focus!!')
入力エリアをクリックしたら発動
})
text.addEventListener('blur', ()=>{
console.log('blur!!')
//入力エリアから外れたところをクリックしてしたら発動
})
const text = document.querySelector('textarea')
text.addEventListener('input', ()=>{
// console.log('input!!')//文字が入力されたら発動イベント
console.log(text.value.length)
//入力されている文字数を表示
})
text.addEventListener('change', ()=>{
console.log('change!!')
// //入力範囲から外れたときに発動するイベント
})
document.addEventListener('keydown', e=>{
if(e.key === 'Shift'){
console.log(e.key);
}
押したキーを表示
上はShiftを押した時だけShiftを表示
})
document.querySelector('button').addEventListener('dblclick', ()=>{
// //ダブルクリックリスナー
console.log('hello');
})
document.addEventListener('mousemove' ,e =>{
//マウス動かしたらリスナー
console.log(e.clientX,e.clientY);
// //マウスの位置の座標を取得
document.addEventListener('mousemove' ,e =>{
// //マウス動かしたらリスナー
console.log('moved');
})
document.querySelector('button').addEventListener('click', ()=>{
const colors = document.querySelectorAll('input');
const selectedColors = [];
//checkboxは複数選択が可能だから入力データは配列で扱う
colors.forEach(color=>{
if(color.checked === true){
selectedColors.push(color.value)
//配列に追加はpushメソッド
}
})
const li = document.createElement('li');
const ul = document.querySelector('ul');
li.textContent = selectedColors.join(',');
//li.textContent = selectedColors;
//上と下は同様の結果になる
ul.appendChild(li)
})
//ラジオボタンで要素を追加
document.querySelector('button').addEventListener('click', () =>{
const colors = document.querySelectorAll('input');
let selectedColor;
colors.forEach( color =>{
if(color.checked === true){
selectedColor = color.value;
//要素の値を取得したい時はvalueでアクセス
}
})
const li = document.createElement('li');
const ul = document.querySelector('ul');
li.textContent = selectedColor;
//要素のテキストに代入したい時はtextContentでアクセス
ul.appendChild(li);
})
//クリックしたら、セレクタで選んだ要素がリストに追加
document.querySelector('button').addEventListener('click', ()=>{
const li = document.createElement('li');
//li要素を生成
const color = document.querySelector('select');
//セレクトの要素を取得
li.textContent = `${color.value} - ${color.selectedIndex}`;
//値を得たい時はそのままvalue,何番目かはselectedIndexでOK
const ul = document.querySelector('ul');
ul.appendChild(li);
//この２行で親要素を取得→末尾に挿入
});
//テキストを入力し、ボタンを押したら下のリストに入力した文字が追加される
document.querySelector('button').addEventListener('click', () =>{
//button要素にclickしたときのイベントリスナーを実装。
const li = document.createElement('li');
//li要素を生成
const text = document.querySelector('input');
//input要素を取得
li.textContent = text.value;
//生成したli要素のテキストにinputから取得した文字列を代入
//値の取得はvalue
const ul = document.querySelector('ul');
//挿入したい場所の親要素を取得
ul.appendChild(li);
//親要素に対して、appendChildメソッドで要素を追加
text.value = "";
text.focus();
})
//要素の削除
document.querySelector('button').addEventListener('click',() =>{
const item1 = document.querySelectorAll('li')[1];
// item1.remove();
//新しいブラウザだと要素に対してremove()で削除可能。
const ul = document.querySelector('ul');
ul.removeChild(item1);
//上の方法が無理な場合は親Node.removeChild(削除するNode)で削除可能。
});
}
'use strict'
{
const ul = document.querySelector('ul');
ul.addEventListener('click', e=>{
//ul内にあるリストにクリックリスナーを追加したい時は親要素に追加してもOK
if(e.target.nodeName === 'LI'){
//リスナーを追加した要素の子要素が「li」だったら
e.target.classList.toggle('done');
//styleの'done'をつけたり外したり（toggle）
}
})
}