箭头函数、rest，sprend参数、获取dom元素、classlist与dataset对象

1.箭头函数

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

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

2.rest,sprend参数使用方法

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

rest

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

sprend

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

3.获取dom元素方式

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

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取dom元素</title>
    <style>
        .item:first-of-type {
            color: red;
        }
    </style>
</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>
        const li = document.querySelector('.item')
        console.log(li);
    </script>

返回匹配的元素集合所有成员

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取dom元素</title>
    <style>
        .item:first-of-type {
            color: red;
        }
    </style>
</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>
        const lis = document.querySelectorAll('.item');
        // 将数组通过...sprend语法转为真正的数组
        let list = [...lis];
        console.log(list);
    </script>
</body>
</html>

4.classlist对象与dataset对象

classList对象

classlist 专门用来操作类class

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>classlist对象</title>
    <style>
        .red {
            color: red;
        }
        .blue {
            color: blue;
        }
        .bg {
            background-color: yellow;
        }
    </style>
</head>
<p class="red" id="hello">hello world</p>
<body>
    <script>
        const p = document.querySelector('p');
        // 给p标签添加背景色
        p.classList.add('bg');
        // 将p标签的颜色字体红色替换为蓝色
        p.classList.replace('red', 'blue');
    </script>
</body>
</html>

dataset对象

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

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dataset对象</title>
</head>
<body>
    <div class="user" data-email='12138@admin.com' data-my-gender="女">个人简介</div>
    <script>
        const user = document.querySelector('.user');
        user.id = '12138';
        console.log(user.id);
        console.log(user.dataset.email);
        console.log(user.dataset.myGender);
    </script>
</body>
</html>

1.箭头函数

2.rest,sprend参数使用方法

3.获取dom元素方式

4.classlist对象与dataset对象

相关文章