简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 类数组和纯数组区别，DOM的操作
Blogger Information
Blog 37
fans 0
comment 0
visits 13961
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
类数组和纯数组区别，DOM的操作
秋闲独醉
Original
290 people have browsed it
  3. <!DOCTYPE html>
  4. <html lang="en">
  5.   <head>
  6.     <meta charset="UTF-8" />
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  9.     <title>DOM操作</title>
  10.     <style>
  11.       * {
  12.         margin: 0;
  13.         padding: 0;
  14.         box-sizing: border-box;
  15.         list-style: none;
  16.         text-decoration: none;
  17.         font-size: 1.5rem;
  18.         font-weight: bold;
  19.       }
  20.       html {
  21.         font-size: 16px;
  22.       }
  23.       fieldset {
  24.         width: 400px;
  25.         height: 200px;
  26.         /* position: absolute; */
  27.         margin: 1rem auto;
  28.         box-shadow: 0.1rem 0.2rem 0.6rem #888;
  29.         border-radius: 1.8rem 0rem 1.8rem 0;
  30.         background: linear-gradient(to bottom, lightgreen, white);
  31.       }
  32.       fieldset legend {
  33.         border-radius: 1.8rem 0rem 1.8rem 0;
  34.         text-align: center;
  35.         border: 1px solid gray;
  36.         padding: 0.8rem;
  37.         background: linear-gradient(to top, red, white);
  38.         color: white;
  39.         font-style: italic;
  40.       }
  41.       .item {
  42.         margin-left: 1rem;
  43.         margin-top: 1rem;
  44.       }
  45.       .item input {
  46.         margin-left: 2rem;
  47.         width: 250px;
  48.         border: none;
  49.         background: none;
  50.         border-bottom: 1px solid gray;
  51.       }
  52.       button {
  53.         margin-top: 15px;
  54.         margin-left: 150px;
  55.       }
  56.     </style>
  57.   </head>
  58.   <body>
  59.     <!-- 1. 自定义类数组(伪数组),并说出与纯数组的区别与联系,哪些地方会用到类数组 
  60.       2. 获取dom元素的API有几个,他们的使用场景是什么? 
  61.       3. 如何优雅的获取form表单元素与控件的值? 
  62.       4. dom元素的遍历与常用API有哪些, 实例演示 -->
  63.     <script>
  64.       //纯数组/真数组
  65.       //1.每个值都对应一个键名，键名是从0开始递增且是正整数，如0,1,2,3...
  66.       //2.有个length属性，表示数组长度
  67.       //3.prototype是Array
  68.       const colors = ["red", "orange", "blue", "green"];
  69.       console.log(colors);
  70.       //   console.log(colors instanceof Array); //true
  71.       //   console.log(colors instanceof Object); //true
  72.       //   console.log(colors.pop());
  73.       //类数组/伪数组
  74.       const animals = {
  75.         0: "dog",
  76.         1: "cat",
  77.         2: "pig",
  78.         length: 3,
  79.       };
  80.       console.log(animals);
  81.       //   console.log(animals.pop());
  82.       //类数组不具备数组的原型方法，不可以调用相关数组方法
  83.     </script>
  84.     <ul class="list">
  85.       <li class="item">item1</li>
  86.       <li class="item">item2</li>
  87.       <li class="item">item3</li>
  88.       <li class="item">item4</li>
  89.       <li class="item">item5</li>
  90.       <li class="item">item6</li>
  91.     </ul>
  92.     <script>
  93.       //dom元素的API有querySelector()和 querySelectorAll()
  94.       //querySelector()获取的是单个元素
  95.       const item = document.querySelector("ul li:nth-of-type(3)");
  96.       console.log(item); //原型是HTMLElement
  97.       item.style.color = "red";
  98.       //querySelectorAll()获取的是一组无素，返回类数组
  99.       const items = document.querySelectorAll("ul .item:nth-last-of-type(-n +2)");
  100.       console.log(items);
  101.       //forEach(回调函数)遍历
  102.       //function(当前正在遍历的值，当前值对应的索引)
  104.       //   items.forEach(function (v, k) {
  105.       //     v.style.color = "blue";
  106.       //   });
  108.       //简写
  109.       items.forEach((v, k) => (v.style.color = "blue"));
  111.       //for of 遍历
  112.       for (let v of items.values()) {
  113.         console.log(v);
  114.       }
  115.     </script>
  116.     <form action="" method="dialog">
  117.       <fieldset>
  118.         <legend>用户登录</legend>
  119.         <div class="item">
  120.           <div class="item1">
  121.             <label for="email">邮箱:</label>
  122.             <input type="email" name="email" id="email" value="jdd@22.cm" placeholder="填写邮箱" />
  123.           </div>
  124.           <div class="item2">
  125.             <label for="password">密码:</label>
  126.             <input type="password" name="password" id="password" value="222" placeholder="输入密码" />
  127.           </div>
  128.         </div>
  129.         <button>提交</button>
  130.       </fieldset>
  131.     </form>
  132.     <script>
  133.       //获取form表单元素与控件值
  134.       //获取当前页的所有表单数据
  135.       //forms[0],获取第一个表单数据
  136.       const value = document.forms[0];
  137.       console.log(value);
  138.       const form = document.querySelector("form");
  139.       console.log(form);
  140.       //获取email元素
  141.       console.log(document.forms[0].email);
  142.       //获取email元素的值
  143.       let email = document.forms[0].email.value;
  144.       //获取password元素
  145.       console.log(document.forms[0].password);
  146.       //获取password元素的值
  147.       let password = document.forms[0].password.value;
  148.       let userInfo = { email, password };
  149.       console.log(JSON.stringify(userInfo));
  150.     </script>
  151.     <script>
  152.       //4. dom元素的遍历与常用API有哪些, 实例演示
  153.       // 节点类型
  154.       // windows:全局对象
  155.       // document:文档对象,就是当前的html文件
  156.       // element:元素对象.
  157.       // text:文件对象
  158.       let ul = document.querySelector(".list");
  159.       console.log(ul);
  160.       //获取ul下的所有节点
  161.       console.log(ul.childNodes);
  162.       //获取ul下的标签节点
  163.       ul.childNodes.forEach((node) => {
  164.         if (node.nodeType == 1) {
  165.           console.log(node);
  166.         }
  167.       });
  168.       //只返回元素类型节点
  169.       console.log(ul.children);
  171.       //将类数组转为纯数组1
  172.       console.log(Array.from(ul.children));
  173.       //将类数组转为纯数组2
  174.       console.log([...ul.children]);
  175.       //ul下的第一个节点
  176.       ul.firstElementChild.style.backgroundColor = "red";
  177.       //ul下的第一个节点,的下一个节点
  178.       ul.firstElementChild.nextElementSibling.style.backgroundColor = "orange";
  179.       //ul下的最后一个节点，的前一个节点
  180.       ul.lastElementChild.previousElementSibling.style.backgroundColor = "purple";
  181.       //ul下的最后一个节点
  182.       ul.lastElementChild.style.backgroundColor = "pink";
  183.     </script>
  184.   </body>
  185. </html>
Correcting teacher：PHPzPHPz

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！