类数组和纯数组区别，DOM的操作


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DOM操作</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style: none;
        text-decoration: none;
        font-size: 1.5rem;
        font-weight: bold;
      }
      html {
        font-size: 16px;
      }
      fieldset {
        width: 400px;
        height: 200px;
        /* position: absolute; */
        margin: 1rem auto;
        box-shadow: 0.1rem 0.2rem 0.6rem #888;
        border-radius: 1.8rem 0rem 1.8rem 0;
        background: linear-gradient(to bottom, lightgreen, white);
      }
      fieldset legend {
        border-radius: 1.8rem 0rem 1.8rem 0;
        text-align: center;
        border: 1px solid gray;
        padding: 0.8rem;
        background: linear-gradient(to top, red, white);
        color: white;
        font-style: italic;
      }
      .item {
        margin-left: 1rem;
        margin-top: 1rem;
      }
      .item input {
        margin-left: 2rem;
        width: 250px;
        border: none;
        background: none;
        border-bottom: 1px solid gray;
      }
      button {
        margin-top: 15px;
        margin-left: 150px;
      }
    </style>
  </head>
  <body>
    <!-- 1. 自定义类数组(伪数组),并说出与纯数组的区别与联系,哪些地方会用到类数组 
      2. 获取dom元素的API有几个,他们的使用场景是什么? 
      3. 如何优雅的获取form表单元素与控件的值? 
      4. dom元素的遍历与常用API有哪些, 实例演示 -->
    <script>
      //纯数组/真数组
      //1.每个值都对应一个键名，键名是从0开始递增且是正整数，如0,1,2,3...
      //2.有个length属性，表示数组长度
      //3.prototype是Array
      const colors = ["red", "orange", "blue", "green"];
      console.log(colors);
      //   console.log(colors instanceof Array); //true
      //   console.log(colors instanceof Object); //true
      //   console.log(colors.pop());
      //类数组/伪数组
      const animals = {
        0: "dog",
        1: "cat",
        2: "pig",
        length: 3,
      };
      console.log(animals);
      //   console.log(animals.pop());
      //类数组不具备数组的原型方法，不可以调用相关数组方法
    </script>
    <ul class="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>
      //dom元素的API有querySelector()和 querySelectorAll()
      //querySelector()获取的是单个元素
      const item = document.querySelector("ul li:nth-of-type(3)");
      console.log(item); //原型是HTMLElement
      item.style.color = "red";
      //querySelectorAll()获取的是一组无素，返回类数组
      const items = document.querySelectorAll("ul .item:nth-last-of-type(-n +2)");
      console.log(items);
      //forEach(回调函数)遍历
      //function(当前正在遍历的值，当前值对应的索引)
      //   items.forEach(function (v, k) {
      //     v.style.color = "blue";
      //   });
      //简写
      items.forEach((v, k) => (v.style.color = "blue"));
      //for of 遍历
      for (let v of items.values()) {
        console.log(v);
      }
    </script>
    <form action="" method="dialog">
      <fieldset>
        <legend>用户登录</legend>
        <div class="item">
          <div class="item1">
            <label for="email">邮箱:</label>
            <input type="email" name="email" id="email" value="jdd@22.cm" placeholder="填写邮箱" />
          </div>
          <div class="item2">
            <label for="password">密码:</label>
            <input type="password" name="password" id="password" value="222" placeholder="输入密码" />
          </div>
        </div>
        <button>提交</button>
      </fieldset>
    </form>
    <script>
      //获取form表单元素与控件值
      //获取当前页的所有表单数据
      //forms[0],获取第一个表单数据
      const value = document.forms[0];
      console.log(value);
      const form = document.querySelector("form");
      console.log(form);
      //获取email元素
      console.log(document.forms[0].email);
      //获取email元素的值
      let email = document.forms[0].email.value;
      //获取password元素
      console.log(document.forms[0].password);
      //获取password元素的值
      let password = document.forms[0].password.value;
      let userInfo = { email, password };
      console.log(JSON.stringify(userInfo));
    </script>
    <script>
      //4. dom元素的遍历与常用API有哪些, 实例演示
      // 节点类型
      // windows:全局对象
      // document:文档对象,就是当前的html文件
      // element:元素对象.
      // text:文件对象
      let ul = document.querySelector(".list");
      console.log(ul);
      //获取ul下的所有节点
      console.log(ul.childNodes);
      //获取ul下的标签节点
      ul.childNodes.forEach((node) => {
        if (node.nodeType == 1) {
          console.log(node);
        }
      });
      //只返回元素类型节点
      console.log(ul.children);
      //将类数组转为纯数组1
      console.log(Array.from(ul.children));
      //将类数组转为纯数组2
      console.log([...ul.children]);
      //ul下的第一个节点
      ul.firstElementChild.style.backgroundColor = "red";
      //ul下的第一个节点,的下一个节点
      ul.firstElementChild.nextElementSibling.style.backgroundColor = "orange";
      //ul下的最后一个节点，的前一个节点
      ul.lastElementChild.previousElementSibling.style.backgroundColor = "purple";
      //ul下的最后一个节点
      ul.lastElementChild.style.backgroundColor = "pink";
    </script>
  </body>
</html>
相关文章
