![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：
Collection
Collection
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>//restfunction fun(...arr) {console.log(arr);}arr = [5, 7, 5, 2, 1, 9];//spredadfun(...arr);</script></body></html>
箭头函数应用场景
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>箭头函数</title></head><body><script>let name = "小米11";let price = 3999;let num = 500;// let fun = function (name, price, num) {// return [name, price, num];// };//1. 当参数只有一个的时候：()可以省略，如果没有参数反而不能省//2. 当有多个参数时，()圆括号必须要写let fun = (name, price) => ["苹果12", name, price];let res = fun(name, price);res.forEach((item) => console.log(item));//3. 当有多条语句时，函数体的{}大括号不能省//4. 如果函数体只有一条语句时可以省略大括号let fun1 = (name, price) => {console.log(name);return ["苹果12", name, price];};let res1 = fun1(name, price);res1.forEach((item) => console.log(item));//返回对象时要用（）包住let obj = name => ({ 型号: name, 价格: 3999 });let res2 = obj(name);for (let key in res2) console.log(res2[key]);</script></body></html>
//标签获取document.getElementsByTagName("li");//id获取document.getElementById("list");//class获取document.getElementsByClassName("item");
返回匹配元素集合的第一个值document.querySelector()
返回匹配元素集合document.querySelectorAll()
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><ul id="list"><li class="item">item1</li><li class="item">item2</li><li class="item">item3</li><li class="item">item4</li><li class="item">item5</li><li class="item">item6</li></ul><script>//1. 返回匹配的元素集合中的第一个元素，（返回第一个）let li = document.querySelector(".itme");//2. 返回匹配的元素集合let list = document.querySelectorAll(".item");//返回nodelist,并不是数组list.forEach((item) => (item.style.color = "red"));//可使用伪类选择器let first = document.querySelectorAll(".item:last-of-type");first[0].style.color = "blue";//标签获取document.getElementsByTagName("li");//id获取document.getElementById("list");//class获取document.getElementsByClassName("item");</script></body></html>
p.classList.add('red');p.classList.remove('red');p.classList.replace('red','blue')动态切换样式，如果已有则删除，没有则添加
p.classList.toggle('red');
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.red {color: red;}.blue {background-color: blue;}.violet {background-color: violet;}.pink {color: lightpink;}</style></head><body><p class="red">我是p标签</p><!-- <p>我是p标签</p> --><script>let p = document.querySelector("p");//添加蓝色背景//p.classList.add("blue");//移除红色字体//p.classList.remove("red");//替换背景颜色//p.classList.replace("blue", "violet");//动态切换样式p.classList.toggle("red");</script></body></html>dataset
- 访问自定义属性
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><divclass="user"data-email="php@php.cn"data-myid="q110"data-my-id="a1001"></div><script>let user = document.querySelector(".user");//dataset专门用来访问自定义的标签属性// alert(user.dataset.email);//如果自定属性名中像data-my-id访问时需要将id首字母大写//如果访问采用驼峰写法访问名为data-myid的也是访问不到的//要么不加横杠全小写，要么加了访问横杠后第一个字母大写alert(user.dataset.myId);alert(user.dataset.myid);</script></body></html>