Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 0406作业
Blogger Information
Blog 13
fans 0
comment 0
visits 5902
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
0406作业
　
Original
454 people have browsed it

Demo1-类数组

类数组是一个对象，类数组存储的单元内容和数组相似，但是因为其存在length与正整数递增索引，故使用频率更多

类数组也拥有键值对 调用时 对象[X]也可以进行直接元素定位 命名规范于对象一致 const 名称 {键:值,}

  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=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <ul class="list">
  11.       <li class="item">item1</li>
  12.       <li class="item">item2</li>
  13.       <li class="item">item3</li>
  14.       <li class="item">item4</li>
  15.       <li class="item">item5</li>
  16.     </ul>
  17.     <script>
  18.       console.log(document.querySelectorAll(".item"));
  19.      // 命名方法
  20.       const brand = {
  21.         0: "HUAWEI",
  22.         1: "APPLE",
  23.         2: "XIAOMI",
  24.         length: 90,
  25.       };
  26.       console.log(brand);
  27.       console.log(brand.length);
  28.       console.log(brand[length], brand[0], brand[2]);
  29.     </script>
  30.   </body>
  31. </html>

类数组转正数组

类数组创建后，如果需要进行类型转换为数组 可以使用Array.from方法进行操作

如 let shuzu=Aeeay.from(leishuzu); 即可将名为leishuzu的对象转换为名字是shuzu的数组

  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=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <ul class="list">
  11.       <li class="item">item1</li>
  12.       <li class="item">item2</li>
  13.       <li class="item">item3</li>
  14.       <li class="item">item4</li>
  15.       <li class="item">item5</li>
  16.     </ul>
  17.     <script>
  18.       console.log(document.querySelectorAll(".item"));
  19.       const brand = {
  20.         0: "HUAWEI",
  21.         1: "Apple",
  22.         2: "Xiaomi",
  23.       };
  24.       //   const shuzu = [1, 2, 3, 4, "4", "6"];
  25.       console.log(brand);
  26.       console.log(brand.length);
  27.       console.log(brand[2]);
  28.       //   类数组===类似数组或者说长得像数组
  29.       //   类数组有两个特征-1：有length属性    2：有递增的正整数索引
  30.       //   使用Array.from(类数组名)将类数组转换为正数组
  31.       let shuzu = Array.from(brand);
  32.       console.log(Array.isArray(shuzu));
  33.       shuzu.push("测试cccs");
  34.       console.log(shuzu);
  35.     </script>
  36.   </body>
  37. </html>

数组的追增方法

  1. shuzu.pushi('追增内容') //即可对数组完成一次内容追增

Demo3-树遍历

dom树中的所有内容都是节点 节点类型有元素，文本，文档，属性等

在树遍历中主要用到forEach方法 

  1. forEach方法为
  2. html元素组.forEach( (a,b,c) => {代码块  如conso.log(a,b,c)})
  3. //foreach内只有一个函数时，循环出这个元素绑定的html代码，有两个时循环出代码+索引序号，有三个时循环出代码+序号+所有的对象

Demo3.1 元素类型对象创建

  1. //类型：xxx.childNodes全类型节点
  2. //         xxx.children元素类型节点
  3. let jiedian=document.querySelector('li');  //将全局li标签选中并存储在名字为jiedian的对象中
  4. let yuansu = jiedian.children;  //将拿到所有li数据的jiedian对象置为元素类型数据，并把数据保存给yuansu对象

Demo3.2元素类型的对象内容的选择

  1. //将html元素封装为元素类型的对象后，可以进行快速选择和定位了
  2. //如果要选择第一个元素  用js原生方法的话可以这样
  3. let index = yuansu.length -1;  //把yuansu对象的长度拿到并且-1位并赋给index对象  此时index的类型就是number值
  4. let last_item = yuansu[index]  //把选中元素对象的第末位  也就是刚才的length-1的数字选中并赋给1last_item对象
  5. //此时last_ite对象就代表了该类数组的最末未元素
  6. //此时使用last_item.style.color="red"就可以给元素设定样式了
  8. //********快速选择*******
  9. 对象.firstElementChild  选中第一条
  10. 对象.lastElementChild   选中第末条
  11. 对象.nextElementSibling  选中当前的相邻
  12. 对象.lastElementChild.previousElementSibling选中最末位前一个  必须和lastElementChild放一起

Demo3.3 元素的选择 querySelector/All

  1. //选中匹配元素  只能选一个
  2. document.querySelector('匹配字符 可以是标签 css name等等');
  3. //选全部中匹配元素  
  4. document.querySelectorAll('匹配字符 可以是标签 css name等等');
  6. //****选中后的html是个对象****

Demo4 获取dom元素内容

  1.              const box = document.querySelector("box");
  2.       const p = document.querySelector("p");
  3.       p.textContent = '<em style="color: red">pppppp</em>'; //添加纯字符，不解析html  textContent属性
  4.       p.innerHTML = '<em style="color: red">pppppp</em>'; //添加纯字符，不解析html  innerHtml属性
  5.       p.outerHTML = "去问问企鹅"; //替换当前绑定标签并原封不动还原引号内字符串，  outerHTML

Demo5-自定义数据属性

  1.          const p = document.querySelector("p");
  2.       console.log(p.id); //id是系统封装的  能查到标签内的id属性 但是没有email这种方法  除非自己做封装
  4.       //对于自定义属性  需要在html定义中这个属性名前加入data-  然后js使用标签.dataset.属性名  就能获取到
  5.       console.log(p.dataset.email);
  6.       //如果html的属性名为-连接符  那么获取时候需要驼峰命名获取，不能在js使用-  比如my-age就是myAge
  7.       console.log(p.dataset.myAge);
  8.       console.log(typeof document.querySelector("p"));

Demo6-DOM增伤改查

  1. const ulx = document.createElement("ul");
  2.       for (i = 0; i <= 10; i++) {
  3.         let li = document.createElement("li");
  4.         li.textContent = `liwww${i}`;
  5.         li.style.color = "red";
  6.         ulx.append(li);
  7.       }
  8.       document.body.append(ulx);
  9.       lix = document.createElement("li");
  10.       lix.textContent = "first iii";
  11.       lix.style.color = "green";
  12.       ulx.prepend(lix);
  14.       // 基准节点;
  15.       const refer = document.querySelector("li:nth-of-type(4)");
  16.       refer.style.background = "cyan";
  17.       li_ahead = document.createElement("li");
  18.       li_ahead.textContent = "ahead插入";
  19.       li_ahead.style.color = "blue";
  20.       refer.before(li_ahead);
  21.       refer.after(li_ahead);
  23.       let lastItem = document.querySelector("ul li:last-of-type"); //获取到最后一个li元素
  25.       let a = document.createElement("a"); //创建a标签
  26.       a.textContent = "a标签文字"; //给a标签添加文字
  27.       a.style.color = "red"; //给a标签变红
  28.       a.href = "http://baidu.com"; //给a标签指定网站
  30.       lastItem.replaceWith(a); //用a替换掉最后一个li
  32.       let li_4 = document.querySelector("ul li:nth-of-type(4)");
  33.       li_4.style.background = "green";
  34.       li_4.remove();

Demo7-CSS

  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=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       .bgc-cyan {
  10.         background-color: cyan;
  11.       }
  12.       .bgc-yellow {
  13.         background-color: #ff0;
  14.       }
  15.       .border {
  16.         border: 3px solod #000;
  17.       }
  18.       .bolder {
  19.         font-weight: bolder;
  20.         font-size: 50px;
  21.       }
  22.     </style>
  23.   </head>
  24.   <body>
  25.     <p>hEasd大萨达多LLO</p>
  26.     <script>
  27.       const p = document.querySelector("p");
  28.       p.style.color = "red";
  29.       console.log(p);
  30.       p.classList.add("bgc-cyan", "border", "bolder", "bgc-yellow");
  31.     </script>
  32.   </body>
  33. </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