欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

箭头函数,rest,sprend,dom元素, classList,dataset各种应用场景的使用方法

程序员文章站 2022-04-08 18:28:57
...

1.1 箭头函数

  1. 当参数只有一个时,圆括号可以省略,如果没有参数,反而不能省
  2. 当有多个参数时, 圆括号必须要写
  3. 当有多条语句时,函数体的大括号不能省
  4. 如果函数体只有一条语句时,可以不写return和”花括号{}”

标准函数写法

  1. <script>
  2. function phone() {
  3. return ['小米11', '黑色', '12GB+256GB', 4699];
  4. }
  5. res = phone();
  6. console.log(res);
  7. res.forEach(item => console.log(item));
  8. </script>

箭头函数简写方法

  1. <script>
  2. let id = '小米11';
  3. let color = '黑色';
  4. let dispose = '12GB+256GB';
  5. let price = 4699;
  6. let = phone = () => [id, color, dispose, price];
  7. res = phone();
  8. res.forEach(item => console.log(item));
  9. </script>

箭头函数,rest,sprend,dom元素, classList,dataset各种应用场景的使用方法

1.2 rest,sprend参数的使用方法

1.在函数的参数中就是…rest 归并
2.在函数的调用的参数列表中就是…spread 展开

  1. <script>
  2. //...arr rest 归并
  3. function demo(...arr) {
  4. let res = arr.reduce(function(prev, curr) {
  5. return prev + curr;
  6. });
  7. console.log(res)
  8. }
  9. let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
  10. //...arr1 spread 展开
  11. demo(...arr1);
  12. </script>

箭头函数,rest,sprend,dom元素, classList,dataset各种应用场景的使用方法

2. 获取dom元素的方式;

html代码

  1. <ul id="list">
  2. <li class="item">item1</li>
  3. <li class="item">item2</li>
  4. <li class="item">item3</li>
  5. </ul>

//标签获取
document.getElementsByTagName("li");

  1. <script>
  2. const li = document.getElementsByTagName("li");
  3. console.log(li);
  4. </script>

箭头函数,rest,sprend,dom元素, classList,dataset各种应用场景的使用方法

//id获取
document.getElementById("list");

  1. <script>
  2. const li = document.getElementById("list");
  3. console.log(li);
  4. </script>

箭头函数,rest,sprend,dom元素, classList,dataset各种应用场景的使用方法

//class获取
document.getElementsByClassName("item");

  1. <script>
  2. const li = document.getElementsByClassName("item");
  3. console.log(li);
  4. </script>

箭头函数,rest,sprend,dom元素, classList,dataset各种应用场景的使用方法

2.CSS选择器方式
返回匹配元素集合的第一个值
document.querySelector();

  1. <script>
  2. const li = document.querySelector("li");
  3. console.log(li);
  4. </script>

箭头函数,rest,sprend,dom元素, classList,dataset各种应用场景的使用方法

返回匹配元素集合
document.querySelectorAll()

  1. <script>
  2. const li = document.querySelectorAll("li");
  3. console.log(li);
  4. </script>

箭头函数,rest,sprend,dom元素, classList,dataset各种应用场景的使用方法

3. classList对象与dataset对象的应该场景

classlist对象用来操作元素的类,增加、修改、移除、判断

dataset对象用来操作自定义属性

classlist

添加
p.classList.add('red');

移除
p.classList.remove('red');

替换
p.classList.replace('red','blue')

动态切换样式,如果已有则删除,没有则添加
p.classList.toggle('red');

dataset

html代码

  1. <div class="user" data-email='admin@china.cn' data-my-gender="男">个人简介</div>

js代码

  1. <script>
  2. const user = document.querySelector('.user');
  3. user.id = 'A001';
  4. console.log(user.id);
  5. // dataset对象专用于访问自定义的标签属性
  6. console.log(user.dataset.email);
  7. console.log(user.dataset.myGender); //my-gender有-用,大写字母替换myGender
  8. </script>

箭头函数,rest,sprend,dom元素, classList,dataset各种应用场景的使用方法