JavaScript 增删改查、结构赋值

Dom元素的增删改查基本操作

<button onclick="deldom(event)">删除自身</button>
<button onclick="update()">修改</button>
<div class="home">
<ul class="list">
    <div class="home">
            <li class="item">可颂面包</li>
</div>
<script>
// 新增操作
    let tag_item = document.createElement('item');
tag_item.textContent = '蜂蜜面包';
document.body.append(tag_item);
// 删除操作
function deldom(ev) {
    ev.target.remove();
}
// 更改操作
function update() {
    let default_item = document.querySelector('item');
    default_item.style.backgroundColor= 'blue' ;
    default_item.textContent = '酸奶面包';
}
// 查询操作
const tag_uls = document.querySelector('.item');
const tag_lis = document.querySelectorAll('.item');
console.log(tag_uls, tag_lis);
</script>
</script>

dataset,classList对象的使用方式

  <button onclick="update()">更新</button>
    <ul class="list">
        <li data-index="20" class="item">面包</li>
        <li class="item">吐司面包</li>
        <li class="item">奶酪面包</li>
        <li data-index="10" class="item">蛋糕</li>
        <li class="item">千层蛋糕</li>
        <li class="item">海绵蛋糕</li>
    </ul>
    <ul class="list">
        <style>
            .active {
                color: #191970;
                background-color: #8f91c8;
            }
            </style>
            <script>
                // dataset自定义属性
                let tag_lis = document.querySelectorAll('.item');
let tatget_tag = document.querySelector('[data-index="10"]').dataset.index;
[...tag_lis].filter((v) => v.dataset.index === tatget_tag)[0].style.backgroundColor = '#00dd00';
// classList对象添加元素节点样式类名
let cls_tag = document.querySelector('[data-index="20"]').dataset.index;
[...tag_lis].filter((v) => v.dataset.index === cls_tag)[0].classList.add('active');
function update() {
    [...tag_lis].map(v=>{
        if(!v.dataset.index) {
            v.dataset.index = 20
        }
        return v;
    });
    console.log(tag_lis);
    [...tag_lis].filter((v) => v.dataset.index === tatget_tag)[0].style.backgroundColor = '#f4a460';
    [...tag_lis].filter((v) => v.dataset.index === cls_tag).map((item)=>item.classList.add('active'));
}
</script>

解构赋值

const [arr, obj] = [[100,200,300], {name: '面包'}];
console.log(arr, obj); 
const { classify } = { name: '面包', classify: '奶油面包,蜂蜜面包'};
console.log(classify); 
function person({name, flour, quality}) {
    console.log(name, flour, quality);
    }
    person({name: '面包', flour: '荞麦', quality: '200g'});`