Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 箭头函数、rest，sprend参数、获取dom元素、classlist与dataset对象
Blogger Information
Blog 47
fans 3
comment 0
visits 38232
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
箭头函数、rest，sprend参数、获取dom元素、classlist与dataset对象
吳
Original
1115 people have browsed it

1.箭头函数

箭头函数是用来简化匿名函数的语法糖
=> 胖箭头
-> 小箭头

  1.         // => 胖剪头
  2.         // -> 小箭头
  4.         let id = 'C888';
  5.         let name = '电脑';
  6.         let model = 'MacBook pro';
  8.         let demo7 = (id, name, model) => [id, name, model];
  9.         res = demo7(id, name, model);
  10.         res.forEach(item => console.log(item));

2.rest,sprend参数使用方法

在函数的参数中…rest是归并
在函数的调用的参数列表中就是…sprend展开

  • rest

    1.       function demo4(...arr) {
    2.           console.log(arr);
    3.           let res = 0;
    4.           for (let v of arr) {
    5.               res = res + v;
    6.           }
    7.           console.log(res);
    8.       }
    9.       demo4(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);

  • sprend

  1.         function demo4(...arr) {
  2.             console.log(arr);
  3.             let res = 0;
  4.             for (let v of arr) {
  5.                 res = res + v;
  6.             }
  7.             console.log(res);
  8.         }
  9.         let arr1 = [1, 2, 3, 4, 5, 6, 7, 8];
  10.         //spread
  11.         demo4(...arr1);

3.获取dom元素方式

  • 获取匹配的元素集合中第一个元素，返回一个

  1. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>获取dom元素</title>
  7.     <style>
  8.         .item:first-of-type {
  9.             color: red;
  10.         }
  11.     </style>
  12. </head>
  14. <body>
  15.     <ul id="list">
  16.         <li class="item">item1</li>
  17.         <li class="item">item2</li>
  18.         <li class="item">item3</li>
  19.         <li class="item">item4</li>
  20.         <li class="item">item5</li>
  21.         <li class="item">item6</li>
  22.     </ul>
  24.     <script>
  25.         const li = document.querySelector('.item')
  26.         console.log(li);
  27.     </script>
  • 返回匹配的元素集合所有成员
  1. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>获取dom元素</title>
  7.     <style>
  8.         .item:first-of-type {
  9.             color: red;
  10.         }
  11.     </style>
  12. </head>
  14. <body>
  15.     <ul id="list">
  16.         <li class="item">item1</li>
  17.         <li class="item">item2</li>
  18.         <li class="item">item3</li>
  19.         <li class="item">item4</li>
  20.         <li class="item">item5</li>
  21.         <li class="item">item6</li>
  22.     </ul>
  24.     <script>
  25.         const lis = document.querySelectorAll('.item');
  26.         // 将数组通过...sprend语法转为真正的数组
  27.         let list = [...lis];
  28.         console.log(list);
  29.     </script>
  30. </body>
  31. </html>

4.classlist对象与dataset对象

  • classList对象

    classlist 专门用来操作类class

  1. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>classlist对象</title>
  7.     <style>
  8.         .red {
  9.             color: red;
  10.         }
  12.         .blue {
  13.             color: blue;
  14.         }
  16.         .bg {
  17.             background-color: yellow;
  18.         }
  19.     </style>
  20. </head>
  22. <p class="red" id="hello">hello world</p>
  24. <body>
  25.     <script>
  26.         const p = document.querySelector('p');
  27.         // 给p标签添加背景色
  28.         p.classList.add('bg');
  29.         // 将p标签的颜色字体红色替换为蓝色
  30.         p.classList.replace('red', 'blue');
  31.     </script>
  32. </body>
  34. </html>
  • dataset对象

    dataset对象专用于访问自定义的标签属性

  1. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>dataset对象</title>
  7. </head>
  9. <body>
  10.     <div class="user" data-email='12138@admin.com' data-my-gender="女">个人简介</div>
  11.     <script>
  12.         const user = document.querySelector('.user');
  13.         user.id = '12138';
  14.         console.log(user.id);
  16.         console.log(user.dataset.email);
  17.         console.log(user.dataset.myGender);
  18.     </script>
  19. </body>
  21. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post