JavaScript

JavaScript

编程语言

1.1编程

编程：就是让计算机为解决某一个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程

计算机程序：计算机所执行的一系列的指令集合，而程序全部就是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出指令

1.2计算机语言

计算机语言:是只用于人与计算机之间的语言，它是人与计算机之间传递信息的媒介

计算机的语言的种类非常多，总的来说，分为机器语言、汇编语言、高级语言三大类

高级语言需要一个翻译器转换为计算机识别的机器语言

编程语言是主动的有很强的逻辑性

计算机基础

2.1计算机组成

2.2数据存储

1.计算机内部使用二进制0和1来表示数据

2.硬盘、内存都是存储的二进制

bit Ibit可以保存一个0或者1，最小的存储单位

Byte 1B=8bit

KB 1KB=1024B

MB 1MB=1024KB

GB 1GB=1024MB

TB 1TB=1024GB

2.3程序运行

1.先从硬盘中把程序的代码加载到内存中

2.CPU执行内存中的代码

注意：添加内存的一个重要原因：CPU的运行速度很快，如果只从硬盘中读取数据，会浪费CPU的性能，所以，才使用存取速度更快的内存来保存运行时的数据

JavaScript

1.javaScript是什么

是世界上最流行的语言之一，是一种运行在客户端的脚本语言

脚本语言：不需要编译，运行过程中由js解释器js引擎逐行来进行解释并执行

2.浏览器执行JS简介

浏览器分为两部分，渲染引擎、js引擎

渲染引擎：用来解析HTMLYU与css,俗称内核

js引擎：也称为js解释器，用来读取网页中的javaScript代码，对其处理后运行

3.JS组成

DOM;文档对象模型：对页面上的各种元素进行操作

BOM:浏览器对象模型。提供了独立于内容的可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口

js的写法的分类

1.行内式式的

2.内嵌式

3外部引用

<script src=""></scropt>

js的注释

//单行注释
/*
多行注释
*/

javaScripts输入输出语句

alert(msg) //浏览器弹出警示框
console.log(msg)  //浏览器控制台打印输出信息 
prompt(info)   //浏览器弹出驶入框，用户可以输入

4变量

1.变量

​ 变量是程序在内存中申请一块用来存放数据的空间

2.变量的使用

​ 1.声明变量

​ 2.赋值

//声明变量
var age;//声明一个名称为age的变量
age=10; //赋值
//声明一个变量并赋值，叫做变量的初始化
//var是一个js关键字，用来声明变量。计算机会自动为变量分配内存空间，

5数据类型

不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型

//javaScript是一种弱类型或者动态语言，不用提前声明变量的类型
var num;//num我们是不确定属于哪种数据类型的
var num1=10;//num 属于数字 型
//js的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的
var str='pink';//String 类型
//动态语言
var x=10;//数字
x='pink';//字符

5.1数据类型分类

isNaN();//判断是否是数字,返回true  false


//字符串String,可以是引号内的任意文本，其语法为双引号和单引号
//单引号嵌套双引号，或者双引号嵌套单引号
 var str1="我爱中国";
var str2='我是一个“高富帅” 的程序员'

字符产转义字符

字符串有关的方法

//检测字符串的长度 length
var str='my name is andy';
//str.length;
console.log(str.length);
//字符串拼接+， 拼接方式为字符串=任何类型=拼接后的新字符串
//数值相加，字符相连
//字符串+任意字符串
var str2='沙漠';
var str3='骆驼';
var str4=str2+str3;//沙漠骆驼

Boolean型

//true  1
//false 0

Undefined 和Null

//声明后没有被赋值的变量会有一个默认值undefined

var str;
console.log(str);//undefined
//undefined和数字相加最后的结果是NaN
//Null空值

 

获取检测变量的数据类型

//typeof   
var num=10;
console.log(typeof num );//number

数据类型的转换

把一种数据类型的变量转换为另一种数据类型

• 转换为字符串类类型

//转换成字符串
//toString（）
var num=1;
alert(num.toString());
//String（变量） 强制转换
console.log(String(num))
//利用+拼接字符串，和字符串拼接的结果都是字符串，
console.log(num+''）;

• 转换为数字

var age='18';

parseInt(age);//把字符型转换为整型
//parseFloat(String);将字符串转换为浮点数数值型
var num=3.14;
parseFloat(num);

• 转换为布尔

//Boolean()函数；

//代表为空，否定的值会被转换为false,如''，0，NaN,null,undefined
//其余的值会被转换为true

数组

数组一组数据的集合，存储单个变量下的优雅方式

创建数字

//利用new创建数组
var arr= new Array();
//利用数组字面量创建数组
var arr1=[];
//通过数组下标获得

函数

函数中不确定有多少个参数传递的时候，可以用arguments来获取，在JavaScripts中，实际上是当前函数的一个内置对象，所有函数都内置了一个arguments对象，它存储了传递的所有实参

function fun(){
    console.log(arguments);存储了所有传递过来的实参
    //伪数组，具有数组的length
    //按照索引的方式进行存储
    //没有真正数组的一些方法 ，pop(),push()
    //可以按照数组的方法遍历arguments
    
}
fun(1,2,3)

//利用函数求任意个数的最大值
function getMax(){
    var max=arguments[0];
    for( var i=1;i<arguments.length;i++){
        if(arguments[i]>max){
            max=arguments[i]
        }
    }
    return max;
}

函数的声明方式

//函数的2种声明方式
//1利用函数关键字自定义函数（命名函数）
function  fn(){
    
}
fn();
//2.函数表达式
//var 变量名=function（）{}；
var fun2=function（）{
    comsole.log("我是函数表达式")
}
fun2()

作用域

//1.代码名字在某个范围内起作用和效果，目的是为了提高程序的可靠性，更重要的是减少命名冲突
//2;js的作用域：全局   局部
//3.全局作用域：整个scripts标签,或者一个单独得js文件
var num =10;//全局变量
//4.局部作用域：在函数内部中
function fun(){
    var num=1;//局部变量
}

javaScripts预解析

//js预解析
//js引擎在执行代码时，分为两步：预解析  代码执行
//预解析：js引擎会把js里面的所有的var,还有function 提升到当前的作用域的最前面
//代码执行：从上往下
//变量预解析 （变量提升） 函数预解析 （函数提升） 
//变量提升；提升变量声明，不提升赋值操作
//函数提升：把函数声明提升到当前作用域的最前面   ，不调用函数

对象

创建对象的三种方法

1.利用字面量创建对象

 //1.利用字面量创建对象
    var obj={
        uname:'张三丰',
        age:18,
        sex:'男',
        sayHi:function(){
            console.log('hi~');
        }
    }
    //调用对象的属性。我们采用对象名.属性名
    console.log(obj.uname)
    //调用属性的方法，对象名.方法名
    obj.sayHi()
    //调用属性还有一种方法，对象名['属性名']
    console.log(obj['age']);

2.利用new Object创建对象

//利用new Object创建对象
    var obj=new Object();  //创建一个空的对象
    obj.uname='张三丰';
    obj.age=18;
    obj.sex='男';
    obj.sayHi=function (){
        console.log("hi~~")
    }
//利用等号赋值的方法，添加对象的属性和方法
//每个属性和方法用分号结束

3.利用构造函数创建对象

//构造函数的语法格式
    /* function  构造函数名(){
        this.属性=值;
        this.方法=function (){
        }
    }
    new 构造函数名();*/
//构造函数名首字母大写
function  Star(uname,age,sex){
    this.name=uname;
    this.age=age;
    this.sex=sex;
    this.sing=function (){
        console.log('我会唱歌')
    }

}
var ldh = new Star('刘德华',18,'男');
//遍历对象
    //for ...in 用于对数组或者对象的属性进行循环操作

    for(var k in ldh){
        console.log(k);//k变量输出得到的是属性名
        console.log( obj[k]);//属性值
    }

new 在执行时会做四件事：
1.在内存中创建一个新的空对象

2.让this指向这个新的对象

3.执行构造函数里面的代码，给这个新对象添加属性和方法

4返回这个新对象（所以构造函数里不需要return）

变量、属性、函数、方法的区别

//变量和属性的相同点：他们都是用来存储数据的
var num =10;
var obj={
    age:10,
}
//变量单独声明并赋值，使用的时候直接写变量名，单独存在
//属性：在对像里面不需要声明的，使用的时候必须是对象.属性

//函数和方法的相同：都是实现某种功能，
//函数单独声明，单独存在，通过函数名（）调用
//方法：对象里面的函数称为方法，方法不需要声明，使用对像.方法名（）就可以调用

java内置对象

Math

Date

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hgAWtiy2-1641026048989)(C:\Users\WeiQiang\AppData\Roaming\Typora\typora-user-images\image-20211229155119164.png)]

Web Api

是浏览器提供的一套操作浏览器功能和页面元素的API

Dom

文档对象模型，是w3c组织推荐的处理可扩展的标记语言的标准编程接口，通过接口可以改变页面的内容、结构、样式

获取页面的元素

• 根据id获取

  //getElementByID()
  //返回的是一个元素对象
  <div id='time'>2021-12-30</div>
  
  <script>
  var timer=document.getElementByID('time')
  console.dir(timer)//打印我们返回的元素对象，更好的查看里面的属性和方法
  </script>
  

  ​

• 根据标签名获取

//getElementsByTagName()
//返回的是 获取过来的元素对像的集合，以伪数组的形式存储
<ul>
    <li>海内存知己，天涯若比邻1</li>
    <li>海内存知己，天涯若比邻2</li>
    <li>海内存知己，天涯若比邻3</li>
    <li>海内存知己，天涯若比邻4</li>
    <li>海内存知己，天涯若比邻5</li>
</ul>

var lis= document.getElementsByTagName('li');
console.log(lis)
//还可以获取某个元素内部所有指定标签名的子元素
//element.getElementsByTagName('标签名')，父元素必须是单个对象，获取的时候不包括父元素自己

• 根据html新增的方法获取

  //根据类名获得某些元素集合
  //getElementsByClassName()
  <div class="box">我是盒子1</div>
  <div class="box">我是盒子</div>
  
  
  var box = document.getElementsByClassName('box');
  console.log(box)
  //querySelector 返回指定选择器的第一个元素对象，里面的选择器需要加符号
  var firstbox = document.querySelector('.box');
  console.log(firstbox)//<div class="box">我是盒子1</div>
  
  //querySelectorAll  返回指定选择器的所有元素对像的集合
  
  var allbox=document.querySelectorAll('.box');
  console.log(allbox)
  

• 特殊元素获取

//获取body元素 
doucument.body //返回body元素对象
//获取html元素
doucument.documentElement //返回html元素对象

事件基础

//获取事件源
//注册事件
//添加事件处理程序
<button id="btn">唐伯虎</button>

var btn=document.getElementById('btn');
//事件类型  如何触发  什么事件  比如鼠标点击  还是鼠标经过、还是键盘按下
//事件处理程序 通过一个函数赋值的方式 完成
btn.onclick=function (){
    alert("点秋香")
}

操作元素

//改变元素内容
//innerText  innerHTMl
<button id="btn2">显示当前系统的时间</button>
<div id="showtime">某个时间</div>



var btn2=document.getElementById('btn2');
var showtime=document.getElementById('showtime');
btn2.onclick=function (){
    showtime.innerText=getDate()
}

function  getDate(){
    var date=new Date();
    var year=date.getFullYear();
    var month=date.getMonth()+1;
    var dates=date.getDate();
    var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
    var day=date.getDay()
    return '今天是'+year+'年'+month+'月'+dates+'日 '+arr[day]
}




// innerText   innerHTML的区别
//1.innerText 不识别html标签  
//2.innerHTML识别html标签   w3c标准
//3.这两个属性是可读写的，innerText去除html标签，同时空格和换行也会去掉，innerHtml识别html标签，保留空格和换行

该变元素属性

<button id="ldh">刘德华</button>
<button id="zxy">张学友</button> <br>
<img src="images/ldh.png" alt="">

//获取元素
var  ldh=document.getElementById("ldh");
var zxy=document.getElementById('zxy');
var img=document.querySelector('img');
//2.注册事件
zxy.onclick=function (){
    img.src='images/zxy.png'
}
ldh.onclick=function (){
    img.src='images/ldh.png'
}

改变表单元素属性

<button id="btn3">按钮</button>
<input type="text" value="输入内容">


//获取表单
var btn3=document.getElementById('btn3')
var input=document.querySelector('input');
//注册事件
btn3.onclick=function (){
    //表单内的值通过value进行修改
    input.value='好好学习'
    //如果想要某个表单被禁用，不能再点击 disabled 我们想要这个按钮禁用
    // btn3.disabled=true;
    //this指向的是事件函数的调用者
    this.disabled=true;
}

案例1：仿京东输入密码案例

<div class="box">
    <label>
        <img src="images/close.png" id="eye">

    </label>
    <input type="password" id="pwd">
</div>
<script>
    //1.获取元素
    var eye = document.getElementById('eye');
    var pwd = document.getElementById('pwd');
    //2.注册事件
    var flag = 0;
    //利用flag变量，
    eye.onclick = function () {
        if (flag == 0) {
            pwd.type = 'text';
            eye.src = 'images/openeye.png'
            flag = 1;
        } else {
            pwd.type = 'password';
            eye.src = "images/close.png"
            flag = 0;
        }

    }


</script>

案例2“关闭二维码

    <style>
        .box {
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid pink;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
        }

        .box img {
            width: 60px;
            margin-top: 5px;
        }

        .close-btn {
            position: absolute;
            top: -1px;
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;
            left: -15px;
        }
    </style>
</head>
<body>
<div class="box">
    淘宝二维码
    <img src="images/二维码.png">
    <i class="close-btn">x</i>
</div>
<script>
    //1获取元素
    var btn = document.querySelector('.close-btn');
    var box = document.querySelector('.box');
    //注册事件
    btn.onclick = function () {
        box.style.display = 'none';
    }
</script>

案例3：显示隐藏文本框内容

<input type="text" value="手机">

<script>
    var input = document.querySelector('input');
    //注册事件 获得焦点
    input.onfocus = function () {
        if (input.value === "手机") {
            input.value = '';
            console.log('获得焦点')
        }
        //更改文本框的颜色
        this.style.color="#333"
    }
    input.onblur = function () {
        if (input.value === "") {
            input.value = '手机';
            console.log('失去焦点')
            this.style.color="#999"
        }
    }

</script>

通过className改属性

//className会覆盖掉原先的类名属性
<style>
  div{
    width: 200px;
    height: 200px;
  }
  .change{
    margin-top: 100px;
    background-color: purple;
    color: #fff;
    font-size: 25px;
    margin-top: 100px;
  }
</style>
<body>
<div>文本</div>
<script>
  var div = document.querySelector('div');
  div.onclick=function (){
    this.className='change';
  }

案例4密码框提示信息

<style>
    div {
        width: 600px;
        margin: 100px auto;
    }

    .message {
        display: inline-block;
        font-size: 12px;
        color: #999;
        background: url("images/提示.png") no-repeat left center;
        padding-left: 20px;
    }

    .wrong {
        color: red;
        background-image: url("images/错误.png");
    }

    .right {
        color: green;
        background-image: url("images/成功.png");
    }

</style>
<body>
<div class="register">
    <input type="password" class="ipt">
    <p class="message">请输入6~16位密码</p>
</div>
<script>
    //首先判断表单是否是失去焦点
    //如果输入正确则提示正确的信息为绿色小图标
    //如果输入不是6到16位，则则提示错误信息颜色为红色
    //1.获取元素
    var ipt = document.querySelector('.ipt')
    var message = document.querySelector('.message')
    //注册事件  失去焦点
    
    ipt.onblur = function () {
        if (this.value === '') {
            message.className = 'message'
            message.innerHTML = '请输入6~16位密码'
        } else if (this.value.length < 6 || this.value.length > 16) {

            console.log('错误');
            message.className = 'message wrong'
            message.innerHTML = '您输入的位数不对要求6~16位'
        } else {
            console.log("正确")
            message.className = 'message right'
            message.innerHTML = '您输入的正确'

        }


    }
</script>

操作Dom核心总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OnooOuPL-1641026048990)(C:\Users\WeiQiang\AppData\Roaming\Typora\typora-user-images\image-20211231152834692.png)]

循环排他思想

<div>
    <button>按钮1</button>
    <button>按纽2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
</div>
<script>
    //获取所有按钮元素
    var btn = document.getElementsByTagName('button');
    console.log(btn)
    for (var i = 0; i < btn.length; i++) {
        btn[i].onclick = function () {
            //1.把所有按钮的颜色去掉
            for (var i = 0; i < btn.length; i++) {
                btn[i].style.backgroundColor = '';
            }
            this.style.backgroundColor = 'pink';
        }
    }
</script>

案例5百度换肤

<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        background: url("images/img1.png") no-repeat center top;
    }

    li {
        list-style: none;
    }

    .baidu {
        overflow: hidden;
        background-color: #fff;
        margin: 100px auto;
        padding-top: 3px;
        width: 410px;
    }

    .baidu li {
        float: left;
        margin: 0 1px;
        cursor: pointer;
    }

    .baidu img {
        width: 100px;
    }


</style>
<body>
<ul class="baidu">
    <li><img src="images/img1.png" alt=""></li>
    <li><img src="images/img2.png" alt=""></li>
    <li><img src="images/img3.png" alt=""></li>
    <li><img src="images/img4.png" alt=""></li>
</ul>

<script>
    var imgs = document.querySelector('.baidu').querySelectorAll('img');
    var body = document.body;

    //循环注册事件
    for (var i = 0; i < imgs.length; i++) {
        imgs[i].onclick = function () {
            body.style.backgroundImage = 'url('+this.src+')';
        }
    }
</script>

案例6表格鼠标经过行变色

  <style>
    table{
      margin: 100px auto;
    }
    thead{
      background-color:#b3d8ff;
      font-size: 18px;
    }
    td{
      padding-left: 15px;
    }

  </style>
</head>
<body>
<table>
  <thead>
  <tr>
    <td>代码</td>
    <td>名称</td>
    <td>最新公布净值</td>
    <td>累计净值</td>
    <td>前单位净值</td>
    <td>净值增长率</td>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>003526</td>
    <td>农银金穗3个月定期开放债卷</td>
    <td>1.075</td>
    <td>1.079</td>
    <td>1.074</td>
    <td>+0.047%</td>
  </tr>
  <tr>
    <td>003526</td>
    <td>农银金穗3个月定期开放债卷</td>
    <td>1.075</td>
    <td>1.079</td>
    <td>1.074</td>
    <td>+0.047%</td>
  </tr>
  <tr>
    <td>003526</td>
    <td>农银金穗3个月定期开放债卷</td>
    <td>1.075</td>
    <td>1.079</td>
    <td>1.074</td>
    <td>+0.047%</td>
  </tr>
  <tr>
    <td>003526</td>
    <td>农银金穗3个月定期开放债卷</td>
    <td>1.075</td>
    <td>1.079</td>
    <td>1.074</td>
    <td>+0.047%</td>
  </tr>
  </tbody>
</table>

<script>
  var trs=document.querySelector('tbody').querySelectorAll('tr');
  console.log(trs)
  for (var i=0;i<trs.length;i++){
    //鼠标经过
    trs[i].onmouseover=function (){
      this.style.background='pink';
    }
    //鼠标离开
    trs[i].onmouseout=function (){
      for (var i=0;i<trs.length;i++){
        trs[i].style.background=''

      }
    }
  }
</script>

案例7表格全选与取消全选

<style>
    table {
        margin: 100px auto;
    }

    thead {
        background-color: #b3d8ff;
        font-size: 18px;
    }

    td {
        padding-left: 15px;
    }
</style>
<body>
<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="j_cball"/>
            </th>
            <th>商品</th>
            <th>价钱</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>iphone8</td>
            <td>8000</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>ipad pro</td>
            <td>5000</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>ipad Air</td>
            <td>4000</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>iphone12</td>
            <td>7000</td>
        </tr>
        </tbody>
    </table>

</div>
<script>
    var j_cball = document.getElementById('j_cball');
    var j_tb = document.getElementById('j_tb').getElementsByTagName('input');
    //1.注册事件
    j_cball.onclick = function () {
        for (var i = 0; i < j_tb.length; i++) {
            j_tb[i].checked = this.checked;
        }
    }
    for(var i=0;i<j_tb.length;i++){
        j_tb[i].onclick=function (){
            //flag控制全选按钮是否选中
            var flag=true
            for(var i=0;i<j_tb.length;i++){
                if(!j_tb[i].checked){
                    flag=false;
                    break;
                }
            }
            j_cball.checked=flag;

        }

    }
</script>

获取元素属性值

• getAttribute
• setAttribute
• removeAttribute

<div id="demo" index="1" >

//element.属性 获取属性值

//element.getAttribute(‘属性’）

 //获取属性值
    var div = document.getElementById('demo');
 //获取内置属性值
    console.log(div.id)
//获取程序员自定义的属性，程序员自己添加的属性我们称为自定义属性
    console.log(div.getAttribute('id'))

    div.id='test';
    //设置自定义属性element.setAttribute()
    div.setAttribute('index','2')
    div.setAttribute('class','footer')//设置自定义属性
    //移除属性removeAttribute
    div.removeAttribute('index');

案例8:tab栏切换

<style>
    .tab {
        width: 1500px;
        height: 500px;
        margin: 100px auto;
    }

    .tab_list {
        height: 50px;

        box-shadow: #FFFFFF;
    }

    .tab_list li {
        float: left;
        height: 39px;
        width: 200px;
        text-align: center;
        line-height: 39px;
        list-style: none;
        border:1px solid blue;
        box-shadow: #CCC;
        
        cursor: pointer;
    }
.tab_con{
    width: 600px;
    height: 500px;


}
    .tab_list .current {
        background-color: #c81623;
        color: #fff;
    }

    .item-info {
        padding: 30px 0 0 40px;
    }

    .item {
        display: none;

    }
</style>

<body>

<div class="tab">
    <div class="tab_list">
        <ul>
            <li class="current">商品介绍</li>
            <li>规格包装</li>
            <li>售后保障</li>
            <li>商品评价</li>
            <li>手机社区</li>
        </ul>
    </div>

    <div class="tab_con">
        <div class="item item-info" style="display: block">
            商品介绍模块内容
        </div>
        <div class="item item-info">
            规格与包装模块内容
        </div>
        <div class="item item-info">
            售后保障模块内容
        </div>
        <div class="item item-info">
            商品评价（50000）模块内容
        </div>
        <div class="item item-info">
            手机社区
        </div>
    </div>

</div>
<script>
    var tab_list = document.querySelector('.tab_list');
    var lis = tab_list.querySelectorAll('li');
    var items = document.querySelectorAll('.item');
    for (var i = 0; i < lis.length; i++) {
        //开始给5个li标签设置索引号
        lis[i].setAttribute('index', i)
        lis[i].onclick = function () {
            //干掉所有人，其余的li清楚class
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = '';

            }
            this.className = 'current';
            //2.显示内容模块
            var index = this.getAttribute('index');
            //排他思想
            for (var i = 0; i < items.length; i++) {
                items[i].style.display = 'none'
            }
            items[index].style.display = 'block'
        }

    }

</script>

节点操作

子节点、父节点

childNodes

parentNode