DOM操作フォーム配列API拡張

DOM操作フォーム

フォーム要素

入力ボックス、パスワードボックス、ドロップダウンボックス、複数選択ボックス、ラジオボックス

フォーム操作

入力入力ボックス

設定値の値を取得する

var inp = document.querySelector('input')
console.log(inp.value);
inp.value = '123'

入力イベント

入力

入力要素の内容が変更されたときにイベントを発生させます
1. var inp = document.querySelector('input')
2. inp.addEventListener('input',function(){
3. console.log(inp.value);
4. })
- 変化
入力要素の内容が変更されてフォーカスを失ったときに発生するイベント
1. var inp = document.querySelector('input')
2. inp.addEventListener('change',function(){
3. console.log(inp.value);
4. })
ぼかし

タブがフォーカスを失ったときに発生するイベント
集中

タブがフォーカスを取得したときに発生するイベント
1. var inp = document.querySelector('input')
2. inp.addEventListener('blur',function(){
3. console.log(111111111);
4. })
5. inp.addEventListener('focus',function(){
6. console.log(22222222222);
7. })

ドロップダウンボックスを選択

設定値の取得：値

var osel = document.querySelector('#sel')
console.log(osel.value);
osel.value = 3

変更イベント

オプションが変更されたときにイベントを発生させます

var osel = document.querySelector('#sel')
osel.addEventListener('change',function(){
console.log(osel.value);
})

ラジオチェックボックス

ページ上のラジオボックスまたは複数選択ボックスがわかりません。イベントを設定するには、各ラジオボックスまたは複数選択ボックスを移動する必要があります。イベントの半分は、選択された結果を取得するためにクリックイベントまたは変更イベントを使用します。

選択された状態

選択状態

ラジオボックスと複数選択ボックスを判定する場合、現在のラベルが選択されているかどうかをjsを使用して判定する必要があり、それを使用して判定することができcheckedます

var check = document.querySelectorAll('[name=aaa]')
console.log(check);
var checkeds = []
for(var i = 0;i<check.length;i++){
check[i].addEventListener('click',function(){
console.log(this.checked);
if(this.checked){
checkeds.push(this.value)
console.log(checkeds);
}
})
}

配列API

参考URL：JavaScript配列オブジェクト | 初心者チュートリアル

フィルター（）

配列を走査し、条件を満たすデータの新しい配列を返します。

var arr = [1, 2, 3, 4, 5, 6, 7, 8]
//赛选数字大于3的所有元素
// var filArr = arr.filter(function(item,index,array){
// console.log('item:',item);
// console.log('index:',index);
// console.log(array);
// return item > 3
// })
// console.log(filArr);
var filArr2 = arr.filter(item => item > 4)
console.log(filArr2);

該当するケース

1. 価格が 30 を超える製品を除外する

2. ショッピングカートは選択したアイテムをすべて削除します。選択されていないアイテムを返し、元の配列に割り当てることができます。

いくつかの（）

配列要素内のいずれかの要素が指定された条件を満たすかどうかを確認します。

var users = [
{name:'admin',pwd:'123456'},
{name:'admin2',pwd:'123456'},
{name:'admin3',pwd:'123456'}
]
var inArr = users.some(item => item.name=='admin2'&&item.pwd == '123456')
console.log(inArr);

選別（）

配列の要素を並べ替えます。

var arr = [{id:1,price:30},{id:2,price:40},{id:3,price:70},{id:4,price:10}]
var sortArr = arr.sort((a,b)=>a.price-b.price)
console.log(sortArr);

地図（）

指定された関数で配列の各要素を処理し、処理された配列を返します。

var arr = [{ id: 1, price: 30 }, { id: 2, price: 40 }, { id: 3, price: 70 }, { id: 4, price: 10 }]
var mapArr = arr.map(item => {
item.price *= 0.8
return item
})
console.log(mapArr);

forEach()

for ループの代わりに配列の排他的トラバーサル

数组.forEach((item,index,array)=>{
// item：数组中每次循环取出来的数据
//index：遍历的下标
//array：原数组
})

ケース

function render(){
let dom = ''
goodsList.forEach(item =>{
dom += `
<a onclick="del(this)" href="javascript:;">
<dl>
<dt>

<img src="${item.img}"/>

</dt>
<dd>${item.title}</dd>
<dd>￥${item.price}.00</dd>
</dl>
</a>
`
})
// for (var i = 0; i < goodsList.length; i++) {
// dom += `
// <a onclick="del(this)" href="javascript:;">
// <dl>
// <dt>
// 
// <img src="${goodsList[i].img}"/>
// 
// </dt>
// <dd>${goodsList[i].title}</dd>
// <dd>￥${goodsList[i].price}.00</dd>
// </dl>
// </a>
// `
// }
goodsBox.innerHTML = dom
}

三項演算子（拡張）

三項演算子とも呼ばれ、条件に基づいて異なるコードを実行するかどうかを決定するために使用されます。

条件？满足条件返回值 : 不满足条件返回值
var num = prompt('请输入一个数字')
console.log(num>10 ? '大于10' : '小于10');

該当するケース

選択状態を判断する

<label class="fl" >

</label>