Demo1-类数组

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

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

<!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>Document</title>
  </head>
  <body>
    <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>
    </ul>
    <script>
      console.log(document.querySelectorAll(".item"));
     // 命名方法
      const brand = {
        0: "HUAWEI",
        1: "APPLE",
        2: "XIAOMI",
        length: 90,
      };
      console.log(brand);
      console.log(brand.length);
      console.log(brand[length], brand[0], brand[2]);
    </script>
  </body>
</html>

类数组转正数组

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

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

<!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>Document</title>
  </head>
  <body>
    <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>
    </ul>
    <script>
      console.log(document.querySelectorAll(".item"));
      const brand = {
        0: "HUAWEI",
        1: "Apple",
        2: "Xiaomi",
      };
      //   const shuzu = [1, 2, 3, 4, "4", "6"];
      console.log(brand);
      console.log(brand.length);
      console.log(brand[2]);
      //   类数组===类似数组或者说长得像数组
      //   类数组有两个特征-1：有length属性    2：有递增的正整数索引
      //   使用Array.from(类数组名)将类数组转换为正数组
      let shuzu = Array.from(brand);
      console.log(Array.isArray(shuzu));
      shuzu.push("测试cccs");
      console.log(shuzu);
    </script>
  </body>
</html>

数组的追增方法

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

Demo3-树遍历

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

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

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

Demo3.1 元素类型对象创建

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

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

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

Demo3.3 元素的选择 querySelector/All

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

Demo4 获取dom元素内容

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

Demo5-自定义数据属性

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

Demo6-DOM增伤改查

const ulx = document.createElement("ul");
      for (i = 0; i <= 10; i++) {
        let li = document.createElement("li");
        li.textContent = `liwww${i}`;
        li.style.color = "red";
        ulx.append(li);
      }
      document.body.append(ulx);
      lix = document.createElement("li");
      lix.textContent = "first iii";
      lix.style.color = "green";
      ulx.prepend(lix);
      // 基准节点;
      const refer = document.querySelector("li:nth-of-type(4)");
      refer.style.background = "cyan";
      li_ahead = document.createElement("li");
      li_ahead.textContent = "ahead插入";
      li_ahead.style.color = "blue";
      refer.before(li_ahead);
      refer.after(li_ahead);
      let lastItem = document.querySelector("ul li:last-of-type"); //获取到最后一个li元素
      let a = document.createElement("a"); //创建a标签
      a.textContent = "a标签文字"; //给a标签添加文字
      a.style.color = "red"; //给a标签变红
      a.href = "http://baidu.com"; //给a标签指定网站
      lastItem.replaceWith(a); //用a替换掉最后一个li
      let li_4 = document.querySelector("ul li:nth-of-type(4)");
      li_4.style.background = "green";
      li_4.remove();

Demo7-CSS

<!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>Document</title>
    <style>
      .bgc-cyan {
        background-color: cyan;
      }
      .bgc-yellow {
        background-color: #ff0;
      }
      .border {
        border: 3px solod #000;
      }
      .bolder {
        font-weight: bolder;
        font-size: 50px;
      }
    </style>
  </head>
  <body>
    <p>hEasd大萨达多LLO</p>
    <script>
      const p = document.querySelector("p");
      p.style.color = "red";
      console.log(p);
      p.classList.add("bgc-cyan", "border", "bolder", "bgc-yellow");
    </script>
  </body>
</html>