web笔记再整理

前四天笔记在此连接:

web前端笔记+表单练习题+五彩导航栏练习题-CSDN博客https://blog.csdn.net/simply_happy/article/details/136917265?spm=1001.2014.3001.5502

# 1.边框弧度    div {      width: 300px;      height: 50px;      background-color: aqua;      /* border-radius: 20px; */      /* 左上  右上+左下  右下 */      /* border-radius: 10px 20px 30px 40px; */      /* 胶囊形状：盒子高度的一半 */      border-radius: 25px;      border-top-right-radius: 70px;    }## 2.盒子阴影div {      width: 100px;      height: 100px;      background-color: pink;      /* x轴的偏移量 y轴的偏移量必须写 */      /* x轴的偏移量 y轴的偏移量 模糊的半径  扩散的半径 颜色  */      box-shadow: 5px 2px 10px 10px black inset;    }## 3.文字阴影p {      text-shadow: 5px 5px 3px pink;    }## 4.列表属性li {      width: 200px;      height: 200px;      background-color: aqua;      list-style: none;      list-style-type: none;}## 5.resize    textarea {      width: 500px;      height: 60px;      resize: none;    }**<textarea name="" id="" cols="30" rows="10"**>***rows 和* cols *属性，用于声明 <textarea> 的精确尺寸***## 6.浮动.box1 {      width: 200px;      height: 200px;      background-color: aqua;      float: left;    }    /*     顶部是对齐的    脱离标准流     */    .out {      width: 800px;      height: 400px;      background-color: brown;    }    .box2 {      width: 300px;      height: 300px;      background-color: pink;      float: right;    }**float *CSS 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动（文档流）中移除，但是仍然保持部分的流动性（与绝对定位相反）。***## 7.浮动的问题**元素高度塌陷、文字环绕不正常等。以下是一些解决浮动问题的方法：**    .father {      width: 700px;      /* 1.给父盒子高度 */      /* height: 400px; */      /* float: left; */      background-color: aqua;    }    .left {      width: 300px;      height: 300px;      background-color: blue;      float: left;    }    /* p {      /* 清除浮动的影响 */    /* clear: both; */(**清除两边浮动**)    /* } */    /* p::before {      display: block;      content: "";      clear: both;    } */    .father::after {      content: "";      display: block;      clear: both;    }## 8.flex布局\* {      padding: 0;      margin: 0;    }    ul {      /* 此时ul就会变成一个弹性容器 li就是弹性盒子   。子项会默认在一行排列      主轴：默认在水平方向      测轴：默认在垂直方向      子元素可以自动挤压和延伸            */      display: flex;      width: 600px;      height: 300px;      background-color: aqua;      margin: 0 auto;    }    li {      list-style: none;      width: 100px;      height: 200px;      background-color: aquamarine;    }## 9.主轴上的对齐方式\* {      margin: 0;      padding: 0;    }    ul {      display: flex;      width: 600px;      height: 300px;      background-color: aqua;      margin: 0 auto;      /*改变主轴对齐方式 */      justify-content: flex-end;      /* 两边贴边，其余平分 */      justify-content: space-between;      justify-content: space-around;      justify-content: space-evenly;      justify-content: center;    }    li {      list-style: none;      width: 100px;      height: 200px;      background-color: aquamarine;    }## 10.侧轴的对齐方式\* {      margin: 0;      padding: 0;    }    ul {      display: flex;      width: 600px;      height: 300px;      background-color: aqua;      margin: 0 auto;      /* 侧轴 */      align-items: center;      align-items: end;      align-items: start;    }    ul li:nth-child(3) {      align-self: center;    }    li {      list-style: none;      width: 100px;      height: 200px;      background-color: aquamarine;    }## 11.修改主轴方向\* {      margin: 0;      padding: 0;    }    ul {      display: flex;      width: 600px;      height: 300px;      background-color: aqua;      margin: 0 auto;      /* 主轴方向改为垂直方向，从上到下 */      flex-direction: column;      flex-direction: row-reverse;      flex-direction: column-reverse;    }    li {      list-style: none;      width: 100px;      height: 200px;      background-color: aquamarine;    }## 12.弹性伸缩比\* {      margin: 0;      padding: 0;    }    ul {      display: flex;      width: 700px;      height: 400px;      background-color: rgb(51, 59, 59);    }    li {      list-style: none;      height: 40px;      background-color: aqua;    }    ul li:first-child {      flex: 1;      /* 整数：占用父级剩余尺寸的分数 */    }    ul li:nth-child(2) {      flex: 1;    }    ul li:last-child {      flex: 1;    }## 13.换行    \* {      margin: 0;      padding: 0;    }    ul {      display: flex;      width: 800px;      height: 400px;      background-color: aqua;      /* flex-wrap: wrap; */      justify-content: space-between;      align-content: space-evenly;    }    li {      list-style: none;      width: 170px;      height: 100px;      background-color: pink;    }## 14.grid    .box {      display: grid;      width: 500px;      height: 900px;      grid-template-columns: 1fr 2fr 1fr;      grid-template-rows: repeat(4, 100px);      /* 单元格之间的间距 */      grid-gap: 20px;    }    .box div {      border: 1px solid pink;    }    .test {      grid-column-start: 1;      grid-column-end: 3;      /* grid-row-start: 2;      grid-row-end: 4; */      grid-row: 2/5;    }

## 1.透明度div{      width: 300px;      height: 200px;      background-color: black;      /**0-1  越靠近0越透明*/      opacity: 0;    }## 2.元素的显示与隐藏div{      /*opacity: 0*在页面仍存在*/      display: none;/*在页面中不在占有位置*/      visibility: hidden;/*在页面中仍然占有位置*/      visibility: visible;      width: 300px;      height: 300px;      background-color: black;    }## 3.光标的样式    a{      /* 工 */      cursor: text;      /* 手 */      cursor: pointer;      /* 十字 */      cursor: move;      /* 箭头 */      cursor: default;    }    p{      cursor: pointer;    }## 4.轮廓的样式input{      /* outline-width: 100px;      outline-color: aqua;      outline-style: solid; */      outline:  none;    }    /* 标签获取焦点的状态 */    input:focus{      outline: 1px solid blue;    }## 5.过渡    div{      width: 100px;      height: 100px;      background-color: aqua;      /* transition: all 2s; */      transition: width 2s,height 3s,background-color 4s;    }    div:hover{      width: 1000px;      height: 200px;      background-color: blanchedalmond;    }## 6.媒体查询    div{      width: 1000px;      height: 1000px;    }    /* 500-800px    800-1200px  */    @media screen  and(min-width: 500px) and (max-width:800px)     {      div{        background-color: aqua;      }    }    @media screen  and(min-width: 800px) and (max-width:1200px)     {      div{        background-color: rgb(255, 0, 153);      }    }## 7.字体@font-face {      font-family: myFont ;      src: url();    }    p{      font-family: myFont;      font-size: 30px;    }## 8.平移div{      width: 300px;      height: 200px;    }    .father{      position: relative;      border: 1px solid black;    }    .son{      transition: all 2s;      position: absolute;      top: 0;      left: 0;      background-color: blanchedalmond;      /* 百分比参照的是盒子自身的尺寸      正数---x方向      正数负数都可以 */      transform: translateX(150%);      transform: translateY(-100px);      transform: translateZ();      /* transform: translate(x轴的偏移量,y轴的偏移量); */      transform: translate(200px 400px);      transform: translateX(200px)translateY(400px);        }    .father:hover .son{      transform: translate(200px 400px);    }## 9.旋转div{      width: 300px;      height: 200px;    }    .father{      position: relative;      border: 1px solid black;    }    .son{      transition: all 2s;      position: absolute;      top: 0;      left: 0;      background-color: blanchedalmond;              }    .father:hover .son{      /* 旋转的单位是deg(度) */      transform: rotateZ(60deg);      transform: rotate(70deg);    }## 10.改变原点div{      width: 300px;      height: 200px;    }    .father{      margin: 0 auto;      position: relative;      border: 1px solid black;    }    .son{      transition: all 2s;      position: absolute;      top: 0;      left: 0;      background-color: blanchedalmond;    }    .father:hover .son{      /* 旋转的单位是deg(度) */      /* transform: rotateZ(60deg); */      transform: rotate(70deg) rotateY(45deg);      /* transform-origin: 水平方向原点的位置   垂直方向原点的位置; */      /* 方向名词 像素 */      transform-origin: top right;      transform-origin: 100px 200px;    }## 11.多重转换div{      width: 300px;      height: 200px;    }    .father{      margin: 0 auto;      position: relative;      border: 1px solid black;    }    .son{      transition: all 2s;      position: absolute;      top: 0;      left: 0;      background-color: blanchedalmond;    }    .father:hover .son{      transform: translate(100px,200px) rotateY(45deg);## 12.缩放div{      width: 300px;      height: 200px;    }    .father{      margin: 0 auto;      position: relative;      border: 1px solid black;      overflow: hidden;    }      .son{      transition: all 2s;      position: absolute;      top: 0;      left: 0;      background-color: blanchedalmond;    }    .father:hover .son{      /* transform: scale(x轴的缩放  y轴的缩放); */      transform: scale(1.5,2);      transform: scale(-1);      /* 大于1表示放大的倍数 ,小于1表示缩小的倍数 */    }## 13.倾斜div{      width: 300px;      height: 200px;    }    .father{      margin: 0 auto;      position: relative;      border: 1px solid black;    }    .son{      transition: all 2s;      position: absolute;      top: 0;      left: 0;      background-color: blanchedalmond;    }    .father:hover .son{      transform: skewX(45deg);    }## 14.空间转换    div{      width: 300px;      height: 200px;    }    .father{      margin: 0 auto;      position: relative;      border: 1px solid black;      /* 视距 */      perspective: 1000px;      transform: translate3d(100px 100px 200px);      transform-style:preserve-3d ;    }    .son{      transition: all 2s;      position: absolute;      top: 0;      left: 0;      background-color: blanchedalmond;    }    .father:hover .son{      transform: translateZ(100px);    }## 15.动画    /* 定义动画 */    @keyframes mymovie {      form{        width: 0;        height: 0;        background-color: rgb(249, 240, 255);      }      to{        width: 1200px;        height: 300px;        background-color: aqua;      }    }    @keyframes mymovie2{      0%{         width: 1200px;        height: 300px;        background-color: aqua;      }      25%{        width: 1200px;        height: 300px;        background-color: rgb(255, 0, 0);      }      50%{        width: 1200px;        height: 300px;        background-color: rgb(0, 255, 98);      }      /* .... */    }    /* animmation 复合属性:动画名称 动画花费时间 */    div{      animation: mymovie 3s;      animation-duration: 3s;      /*动画延迟  */      animation-delay: 3s;      /* 执行完毕时的状态  */      animation-fill-mode: forwards;      /* 速度曲线 */      animation-timing-function: steps(40);      /* 重复次数 */      animation-iteration-count: 3;      /* animation-iteration-count: infinite;无限循环 */      animation: mymovie 3s ease 2s 3 reverse forwards;    }    div:hover{      /* 暂停动画 */      animation-play-state: paused;    }

JavaScript:是一门弱数据类型的编程语言,实现的是人机交互的效果干嘛:1.做网页特效2,做表单验证3,是数据交互4,服务器编程5,ECMAScript(变量,数据类型,分支,循环,对象)	WebApi:Dom操作文档,Bom操作文档JavaScript的书写位置:内部JS:写在HTML里边,用<**script**>包住 写在<body**>**结束标签的前面2,外部JS代码写在.js结尾的文件中,通过变量:计算机用来存储数据的容器,盒子注意:变量指的是容器变量的基本使用:声明变量	let变量名变量赋值	变量名 = 变量值重新赋值let声明的变量,不允许重复声明let声明多个变量let age1=21,age2=12var和let区别:1,var可以重复声明变量2,let声明的变量,不能在声明前使用3,var不存在快起作用域的概念后面声明变量使用let变量的命名规范:1,只能用有效字符(数字,字母,下划线,$)组成,并且不以数字开头2,不能使用关键字,保留字,3,js严格区分字母的大小写4,起名最好是具有意义的5,遵循小驼峰命名法数据类型:基本数据类型:numberstring:通过"" '`'包起来,都是字符串	``包起来的字符串可以进行换行字符串的拼接:+	模板字符串可以拼接字符串和变量bool: true\falseundefined:未定义类型:变量声明了,但是未赋值null引用数据类型:objectfunctionarray判断数据类型:type of 变量js是数据类型语言,他的变量类型,只有在赋值之后,才能确定.也就是说,变量赋予的变量值是什么数据类型,变量就是什么数据类型数据类型转换:隐式和显示隐式转换:+两边存在一边是字符串,则另外一边会被转换成字符串除了+,其他的算数运算符会将转换成数字类型显示转换转换为数字:Number()如果参数中出现字符,最终结果会是NAN,NAN本身也是属于number类型,不是一个数字not a numberparseInt()尽可能的将参数转化为整型parseFloat()尽可能的将参数转化为浮点转换成字符串:String()变量.toString()运算符:算术运算符:+ - * / %赋值运算符:= 	+= 	-= 	/= 	%=a+=3 =====>> a=a+3自增自减运算符i++:赋值运算符的优先级大于后++,先进行赋值运算++i:前++的优先级高于赋值运算符,先进行前加加,再进行赋值运算i--比较运算符:**> 	<	 >=	<=	 ==	===	!== **==:只会判断值是否相同===:会判断值和数据类型NAN不等于任何值,包括它自身逻辑运算符:&&	两真才真||	一真则真!	取反

js:**<script> src="路径" ****</script>**prompt()let 变量名=变量值数据类型:基本数据类型	变量数据类型string().tostrong()运算符:算数运算符:
赋值运算符:= += -=一元运算符 ++ -- !a = 12 b = a++c = ++b关系运算符:> >= < <= == ===(值,数据类型都会进行比较) != !==逻辑运算符1:&& || !位移运算符:基于二进制的运算0 1原码:十进制对应的二进制反码:除了符号位之外,其余取反补码:反码+1|:两个0才为0

### 1.位运算    let a = 2    let b = 3    console.log(a|b)    // 0    // &   两个1才为1        console.log(a&b)    console.log(a^b)### 2.表达式和语句    // 表达式:是一组代码的集合    let x = 7    3+4    x++    // 语句:if  js的命令    // alert()### 3.if-else语句// 顺序,选择,循环    // 顺序:代码默认的自上到下,从左到右    // 选择(分支):面对不同的条件,执行不同的代码    // 条件只要最终返回的是布尔值就可以    // if(条件){    //   // 满足条件时执行的代码    // }    // else{}    // 条件不满足时,执行的代码    // let age = Number(prompt("请输入你的年纪:"))    // if (age>18){    //   console.log("成年了");    // }    // else{    //   console.log("一边玩去");    // }    // else if(条件2){    //   条件2满足时执行的代码    // }### 4.三元运算符    // 条件?   满足条件时执行的代码:不满足条件时执行的代码    // let age = 21    // age > 18 ? console.log("成年"):console.log("小孩")    // let a=2,b=3    // c=a>b ? a : b    // console.log(c)    let a = +prompt("输入一个数")    a=a < 10  ? "0"+a : a    console.log(a)### 5.switch语句// switch(数据){case 值1:代码  case 值2:代码  default:代码}    let day = prompt("请输入今天星期几:")    switch(day){      case "1":        alert("今天星期一")        break      case"2":        alert("今天星期二")        break      case"3":        alert("今天星期三")        break      case"4":        alert("今天星期四")        break      case"5":        alert("今天星期五")        break      case"6":      case"7":        alert("今天周末")        break      default:        alert("error")    }### 6.断点调试1.断点调试是指在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。进行分析从而找到这个Bug
2.断点调试是程序员必须掌握的技能。
3.断点调试也能帮助我们查看java底层源代码的执行过程，提高程序员的Java水平### 7.循环// 循环:某一段代码重复执行    // while    // *    // while(循环条件){循环体  }    // 变量的初始值    // let i = 1    // // 终止条件    // while(i<=10){    //   console.log(i)    //   // 初始值变化    //   document.write(i)    //   i++    // }    let i=1,n=1,sum1=0,sum2=0    while(i<=100){      sum1=sum1+i      i++    }    while(n<=100){      if(n%2 === 0 ){        sum2=sum2+n      }            n++    }    console.log(sum1)    console.log(sum2)### 8.break,continue    let i = 1    while(i<10){      if(i===4){        // break        //终止掉距离自己最近的一层循环        i++        continue        // 跳出本次循环      }      console.log(i)      i++    }

### 1.dowhile语句    let i = 1    do{      console.log("hello world")      i++      // 不管条件是否成立都会执行一次    }while(i<1)### 2.for循环    // for循环:    // for(声明临时变量;循环条件;变化值){循环体}    for(let i=1;i<=100;i++){      console.log(i)    }### 3.循环嵌套    for(let i=1;i<=7;i++){      console.log(`今天是第${i}天`)      for(let j=1;j<=7;j++){        console.log(`送了${j}朵花`)      }    }### 4.数组    // 数组:存储多条数据,数组中存放不同的数据类型    // 数组的声明方式    // 1.new    let arr1 = new Array()    console.log(arr1)    // 2.字面量    let arr2=[1,2,3,"zhangsan",true]    console.log(arr2)    // 3.数组的长度    console.log(arr2.length)    // 查看数组里边的元素  数组下标:从0开始    console.log(arr2[3])    console.log(arr2[7])    // 遍历数组    for(let i=0;i<arr2.length;i++){      console.log(arr2[i])    }    // [2,3,4,5,6,714]求所有元素的和以及平均值    let arr3=[2,3,4,5,6,714]    let sum=0    let ar=0    for(let i=0;i<arr3.length;i++){      sum+=arr3[i]    }    document.write(sum)    document.write(`<br>`)    document.write(sum/arr3.length)### 5.数组的操作    let arr1=[1,2,3,4]    // 查  数组名[下标]    // 改    arr1[0]="zhangsan"    console.log(arr1)    // 增    // 数值名.push():一次把一个或多个进行追加数组的前面    arr1.push("o((>ω< ))o")    arr1.push("对对对","对对对")    // unshift():一次把一个或多个进行追加到数组的后面    arr1.unshift("(⊙o⊙)？")    // 删除    // pop()从数组中删除最后一个元素,把元素    arr1.pop()    // shift()从数组中删除第一个元素    arr1.shift()    // splice(start/删除多个元素)删除指定元素    arr1.splice(2,3)    arr1.splice(2,3,"wwwwwd","assssssss","true")### 6.函数    // 函数:一段实现某一功能的代码的集合   本质:实现了代码的高度复用    // 函数在js中的定义方式    // function函数名([参数]){函数体}    function sayhi(say){      console.log(say)    }    // 函数调用 函数名()    // sayhi()    // sayhi()    // 函数只能return出去一条数据    sayhi("顶顶顶顶顶顶顶顶顶顶顶")    function getsum(num1,num2){      // console.log(num1+num2)      return num1+num2,num1-num2    }    let a=getsum(1,2)    console.log(a)    // getsum(1,2)### 7.函数作为参数传参    // function test1(){    //   console.log("test1~~~~")    // }    // function test2(){    //   test1()    //   console.log("test2~~~~")    // }    function test2(fn){      fn(1)      console.log("test2~~~~")    }    //es6 箭头函数    test2((x,y) => {      console.log("test1")    })    function getmax(arr){      let max =0      for(let i in arr){        if(arr[i]>max){                  }      }    }### 8.值传递和引用传递    function change(Array){      // console.log(a)      // console.log(b)      // a+=10      // b+=100      // return a,b      Array.push("zhansan")    }    x=2    y=3    // change(x,y)    // console.log(x)    // console.log(y)    let arr1=[1,2,3,4]    change(arr1)    console.log(arr1)### 9.默认值参数    function getarea(r,PI = 3.14){      return r*r*PI    }    let a=getarea(3)    console.log(a)### 10.可变参数    function getsum(num1,num2){      // return num1+num2      console.log(arguments)      let sum=0      for(let i in arguments){        sum +=arguments[i]      }      console.log(sum)      return sum    }    let a = getsum(1,3,4)    document.write(a)    console.log(a)### 11.作用域    // 作用域:名称在某一个范围内生效,这个范围为就是他的作用域    // 全局作用域  局部作用域  块级作用域    let a=1    function test01(){      console.log(a)    }     test01()    // console.log(b)    for(let i=0;i<=0;i++){      let zhangsan="zhangsan"      console.log(i)    }    console.log(zhangsan)### 12.对象    let name=[172,120,119]    // 对象    let zhangsan={      unname: "张三",      age:21,      sing: () =>{        console.log("你是会唱歌的")      }    }    // 对象:属性和方法    // 查看 对像名.属性        console.log(zhangsan,unname)    zhangsan.sing()    console.log(zhangsan["age"])

### 1.剩余参数//...  剩余参数,接到的是除了位置参数以外其余的参数,返回的是真数组    function test(a,b,...arr){      console.log(a+b)      console.log(arr)      console.log(arguments)          }    test(1,2,3,4)## 2.垃圾回收机制// 内存中的生命周期    // 1,内存分配    // 2,内存使用    // 3,内存回收,使用完毕之后    // 内存泄漏,该回收的,    // 栈    // 堆    //     // js:引用计数法   标记清除法    // 引用计数法:如果一个对象已经没有指向它的的引用了    // 内存消耗:循环引用的内存,    // 1.记录引用次数    // 2.++ --    // 3.引用次数为0时,释放内存     // let arr=[1,2,3,4]    let obj={      unname:"zhangsan"    }    let a = obj    a = null    // 标记清除 从根部查找内存中的对象,凡是能找到的,都是是我要进行使用的    let obj2={      a:obj3    }    let obj3={      b:obj2    }    obj2=null### 3.闭包// 内层函数+外层函数的变量  。内层函数使用了外层函数的变量    // function outer() {    //   let i = 10    //   function inner() {    //     console.log(i)    //   }    //   return inner    // }    // let a = outer()    // a()    // a()    // 闭包：外部访问函数内部的变量    // let num = 0    // function test1() {    //   num++    //   console.log(`这是函数调用的第${num}次`)    // }    // test1()    // test1()    // num = 300    // test1()    function outer() {      let num = 0      function inner() {        num++        console.log(`这是函数调用的第${num}次`)      }      return inner    }    let a = outer()    a()    a()    a()    num = 21    a()### 4.mathconsole.log(Math.E)    console.log(Math.PI)    let a = 4.999    let b = 3.11    // 向下进行取整    console.log(Math.floor(a))    // 向上取整    console.log(Math.ceil(b))    console.log(Math.abs(-111))    // 最大值最小值    console.log(Math.max(1, 21, 32, 12, 21))    console.log(Math.min(1, 21, 32, 12, 21))    // 随机数  只能取[0,1)    console.log(Math.floor(Math.random() * ((20 - 10) + 1)) + 10)    //     // function get_random(n, m) {    //   return Math.floor(Math.random() * ((m - n) + 1)) + n    // }    // console.log(get_random(100, 200))    // 四舍五入    console.log(Math.round(3.51))    // 开平方根    console.log(Math.sqrt(9))    // 幂次方    console.log(Math.pow(2, 3))### 5.date// 实例化时间对象    let date = new Date("2024-05-01 00:00:00")    console.log(date)    // 年    let year = date.getFullYear()    console.log(year)    // 月  0-11    let m = date.getMonth() + 1    console.log(m)    // 日    let day = date.getDate()    console.log(day)    // 时分秒    let hh = date.getHours()    let mm = date.getMinutes()    let ss = date.getSeconds()    console.log(hh)    console.log(mm)    console.log(ss)    // 星期    let w = date.getDay()    console.log(w)    // 获取毫秒数    // let mins = date.getMilliseconds()    // console.log(mins)    // 时间戳  此刻距离19700101 00:00:00 的毫秒数    let timechuo = date.getTime()    console.log(timechuo)    function get_time() {      let date = new Date()      let year = date.getFullYear()      let m = date.getMonth() + 1      let day = date.getDate()      let hh = date.getHours()      let mm = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()      let ss = date.getSeconds()      let w = date.getDay()      return `${year}-${m}-${day}  ${hh}:${mm}:${ss}  今天星期${w}`    }    let a = get_time()    console.log(a)### 6.获取元素对象// 1、通过css选择器获取    // document.querySelector("css选择器")    let div1 = document.querySelector(".box1")    console.dir(div1)    // document.querySelectorAll("ul li")  拿到的是伪数组，直接考虑for循环    let lis = document.querySelectorAll("ul li")    console.log(lis)    for (let i in lis) {      console.log(lis[i])    }    // 其他    console.log(document.getElementById("li4"))

### 1.元素内容// 1.获取元素对象    const box1=document.querySelector("div")    console.log(box1)    // innerText()  不识别标签    console.log(box1.innerText)    box1.innerText="新内容"    console.log(box1.innerText)    // innerHTMl    console.log(box1.innerHTML)    box1.innerHTML=`<h1>xxxx</h1>`    console.log(box1.innerHTML)    // textContent  不识别标签    box1.textContent=`<h1>5555</h1>`### 2.改属性const ipt = document.querySelector()    //  对象.属性=值    ipt.type="passwd"### 3.改style样式// 1. 获取元素    const box =document.querySelector("div")    // 更改style样式    // 1.对象.style.样式=""    box.style.width="100px"        // 碰见带-的复合属性,采用小驼峰的方式    box.style.backgroundColor="brown"    // className    box.className="box_style"    // classList       // box.classList.add("box_style")追加新的类名到元素对象上    box.classList.add("box_style")    // box.classList.remove("box_style")移除元素对象的类名    // 如果类名存在则移除,如果不存在则添加    box.classList.toggle("box1")### 4.补充// 像是checked这样的属性名=属性值的属性,js在进行赋值时,通过true/false去控制属性值    document.querySelector("input[value='nv']").checked="true"    console.log(document.querySelector("input[value='nv']").checked)### 5.查找结点console.log(document.querySelector(".son").parentNode)    console.log(document.querySelector(".father").childNodes)    console.log(document.querySelector(".father").children)    // 查找兄弟节点    console.log(document.querySelector(".father").nextElementSibling)    console.log(document.querySelector(".father").previousElementSibling)    // console.log(document.querySelector(".father").nextSibling)### 6.事件监听// 事件:事件源  事件类型   处理函数    // l0   on事件类型    const button = document.querySelector("button")    const box = document.querySelector("div")    // 事件源.on事件类型=function(){}      // 同一个事件源，后面注册的事件会对前面注册的事件进行覆盖    // button.onclick = function () {    //   box.style.display = "none"    // }    // button.onclick = null    // button.onclick = function () {    //   console.log("666")    // }    function text() {      alert("666")      box.style.display = "none"    }    // l1  事件监听   不会覆盖    button.addEventListener("click", text, true)    button.removeEventListener("click", text, true)    // button.addEventListener("click", function () {    //   // alert("666")    //   console.log("444")    // }, true)