解构赋值、DOM操作以及dataset和classList对象的使用

作业内容：
1. 实例演示解构赋值,特别是函数参数中使用解构的方式; 
2. dom元素的增删改查基本操作,必须达到熟练层次(实例演示) 
3. dataset,classList对象的使用方式与场景,实例演示

解构赋值

数组解构

// 数组解构
const user = ["Tony", "male", 28];
let [name, sex, age] = user;
console.log(name);
// 参数不足的情况，需要给默认值
[name, sex, age, email = "a@qq.com"] = user;
console.log(email);
// 参数过多的情况下，需要用...语法将多余的数据压缩到一个数组中
[name, ...arr] = user;
console.log(arr);
// 经典案例：x, y值交换;
let x = 10,
    y = 20;
[x, y] = [y, x];
console.log("x=%d, y=%d", x, y);

对象解构

// 对象解构，变量必须与键名同名，当然为了解决命名冲突，可以用别名
let nums = { a: 33, b: 44, c: 55 };
let { a, b, c } = nums;
// 等号左边的数据不能是只读或者大括号，所以要在表达式两边加小圆括号
({ a: num1, b: num2, c: num3 } = nums);
console.log(a, b, c);
console.log(num1, num2, num3);
//参数不足以及参数过多的情况跟数组解构一样
({ a, b, c, d = 99 } = nums);
console.log(a, b, c, d);
({ a, ...arr } = nums);
console.log(a, arr);

解构在函数中的使用

// 解构用在函数参数
function getUser({ id, name, age }) {
    console.log(id, name, age);
}
let user = { id: 11, name: "sunny", age: 18 };
getUser(user);

DOM操作

<style>
    .red {
        color: red;
    }
    .blue {
        color: blue;
    }
    .yellowBg {
        background: yellow;
    }
    .greenBg {
        background-color: green;
    }
</style>
<div class="list">
    <div class="item"><a href="#">item1</a></div>
    <div class="item"><a href="#">item2</a></div>
    <div class="item"><a href="#">item3</a></div>
    <div class="item"><a href="#">item4</a></div>
    <div class="item"><a href="#">item5</a></div>
</div>
<script>
    // 获取集合，整个.list下面所有的a标签
    let a = document.querySelectorAll(".list>div>a");
    a.forEach((item) => (item.style.color = "green"));
    // 获取单个元素;（最后一个div下面的a标签）
    let b = document.querySelector(".list>div:last-of-type>a");
    b.style.color = "violet";
    // 常见的快捷，名称与html文档里的元素对应
    console.log(document.body);
    console.log(document.head);
    console.log(document.title);
    console.log(document.doctype);
    console.log(document.forms);
</script>

<div class="list">
    <div class="item"><a href="#">item1</a></div>
    <div class="item"><a href="#">item2</a></div>
    <div class="item"><a href="#">item3</a></div>
    <div class="item"><a href="#">item4</a></div>
    <div class="item"><a href="#">item5</a></div>
</div>
<script>
    // 获取节点
    let div = document.querySelector(".list");
    // 子节点
    console.log(div.children);
    // html集合 转换成真数组的二种方式
    console.log(Array.from(div.children));
    console.log([...div.children]);
    // 第一个子元素
    div.firstElementChild.style.background = "yellow";
    // 下一个元素
    div.firstElementChild.nextElementSibling.style.background = "#eee";
    // 最后一个元素
    div.lastElementChild.style.background = "#999";
    // 前一个元素
    div.lastElementChild.previousElementSibling.style.background = "#333";
</script>

// 利用append插入数据
let div = document.createElement("div");
let p = document.createElement("p");
p.textContent = "测试";
// 这两句代码，经测试谁先append都无所谓
//div.append(p);
document.body.append(div);
// 四个位置插入（图示）
// beforeBegin, afterBegin, beforeEnd, afterEnd
//           <div>__________________</div>;
div.insertAdjacentElement("beforebegin", p); //开始前
div.insertAdjacentElement("afterBegin", p); //开始后
div.insertAdjacentElement("beforeEnd", p); //结束前
div.insertAdjacentElement("afterEnd", p); //结束后

dataset,classList

dataset

<form id="myForm">
    <input id="user" type="" name="" value="" data-name="test" />
</form>
<script>
    let form = document.forms.myForm;
    console.log(form.user.dataset.name);
</script>

classList

普通样式可以用style.color这种写法，如果需要写style里面的类名，需要用className来写。

<style>
    .red {
        color: red;
    }
</style>
<h2>hello world</h2>
<script>
    document.querySelector("h2").className = "red";
</script>