Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 类数组和dom元素获取遍历
Blogger Information
Blog 19
fans 0
comment 0
visits 10131
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元素获取遍历
搬砖来学php
Original
377 people have browsed it

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=s, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       //1.数组
  12.       let colors = ["red", "green", "blue"];
  13.       console.log(colors);
  15.       // 2.类数组
  16.       // 类数组和数组不同的是prototype 的值一个是 Array(0),一个是：object!
  17.       let colour = {
  18.         0: "yellow",
  19.         1: "black",
  20.         2: "white",
  21.         length: 3,
  22.       };
  24.       console.log(colour);
  26.       // 数组和类数组的访问方法也是一样的
  27.       console.log(colors[0], colors[1], colors[2]);
  28.       console.log(colour[0], colour[1], colour[2]);



  1.       // 二,获取页面中的dom元素
  2.       // 1,获取一组:querySelectorA11(),类数组
  3.       // 2,获取一个：querSelector(),返回一个dom对象
  6.     <ul class="list">
  7.       <li class="item">item1</li>
  8.       <li class="item">item2</li>
  9.       <li class="item">item3</li>
  10.       <li class="item">item4</li>
  11.       <li class="item">item5</li>
  12.       <li class="item">item6</li>
  13.     </ul>
  14.     <script>
  15.       // 1.获取一组使用/querySelectorAll
  16.       const items = document.querySelectorAll(".list .item");
  17.       console.log(items);
  18.       items.forEach((v) => (v.style.backgroundColor = "red"));
  20.       // 2,获取一个：querSelector(),返回一个dom对象
  21.       const eles = document.querySelectorAll(".list .item:first-of-type");
  22.       console.log(eles);
  24.       console.log(eles[0]);
  25.       eles[0].style.backgroundColor = "yellow";
  27.       // 3. 快捷方式
  29.       console.log(document.querySelector("body"));
  30.       console.log(document.body);
  31.       console.log(document.querySelector("head"));
  32.       console.log(document.head);
  33.       console.log(document.querySelector("title").textContent);
  34.       console.log(document.title);
  36.       //   3.表单元素的获取
  37.     </script>
  38.     <form action="login.php" method="post" id="login">
  39.       <fieldset class="login">
  40.         <legend>用户登录</legend>
  41.         <label for="email">邮箱:</label>
  42.         <input
  43.           type="email"
  44.           name="email"
  45.           id="email"
  46.           value="admin@php.cn"
  47.           autofocus
  48.         />
  49.         <label for="password">密码:</label>
  50.         <input type="password" name="password" id="password" value="123456" />
  51.         <button>提交</button>
  52.       </fieldset>
  53.     </form>
  55.     <script>
  56.       // 表单：form.id
  57.       console.log(document.forms.login);
  58.       // 表单控件：input.name
  59.       console.log(document.forms.login.email);
  60.       // 表单控件的值：input.name.value
  61.       console.log(document.forms.login.email.value);
  62.     </script>
  1. <script>
  2. //遍历dom
  3.   let ul = document.querySelector(".list");
  4.   console.log(ul.children); //类数组
  5.   // 将类数组转成真数组来处理
  6.   console.log(Array.from(ul.children));
  7.   // 更优雅的方法；...rest
  8.   console.log([...ul.children]);
  9.   [...ul.children].forEach((li) => (li.style.color = "blue"));
  10.     //  遍历
  11.   [...ul.children][0].style.backgroundColor = "yellow";
  12.   ul.firstElementChild.style.backgroundColor = "green";
  13.   // 第二个
  14.   ul.firstElementChild.nextElementSibling.style.backgroundColor = "yellow";
  15.   // 最后一个
  16.   ul.lastElementChild.style.backgroundColor = "red";
  17.   // 最后一个的前一个
  18.   ul.lastElementChild.previousElementSibling.style.backgroundColor = "pink";
  19.   // 父节点
  20.   ul.lastElementChild.parentElement.style.border = "2px solid red";
  21. </script>

```

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