javascript（六）数组排序,正则对象

最新推荐文章于 2023-04-10 17:17:38 发布

‬‬‫‍‍‭‪‏‏‪2‌6——‫‏‬‏

最新推荐文章于 2023-04-10 17:17:38 发布

阅读量234

点赞数

文章标签： javascript 排序算法开发语言

本文链接：https://blog.csdn.net/weixin_68531139/article/details/126820579

版权

1.数组对象

1.1数组排序

冒泡排序

冒泡排序思路
- 相邻的两个元素进行比较如果后面的元素比前面的元素小就交换位置

for(var i = 0;i<arr.length-1;i++){
  for(var j = 0;j<arr.length-1-i;j++)}{
   	if(arr[j]>arr[j+1]){
      var temp = arr[j];
      arr[j] = arr[j+1];
      arr[j+1] = temp;
    } 
  }
}

选择排序

选择排序思路
- 当前这个元素和后面所有的元素依次比较如果后面的值比钱前面的值小就交换位置

 <script>
        var arr = [6, 3, 9, 2, 7, 1,10,0,12];
        for (var i = 0; i < arr.length; i++) {
            for (var j = i + 1; j < arr.length; j++) {
                if (arr[i] > arr[j]) {
                    var temp = arr[i];
                    arr[i] = arr[j];
                    arr[j] = temp;
                }
            }
        }
        console.log(arr);
    </script>

sort排序

注意：如果是相同排序就根据原有数组的结构顺序显示

基础使用

  // 1.sort() 是数组自带的方法   数组.sort()
        // 基础使用   不带参数  默认排序是根据ASCII码进行排序的  "0"---48
        var arr = [6, 3, 9, 2, 7, 1,10,0,12];
        console.log(arr);
        // arr.sort(); 
        // console.log(arr);

        //  带参数  按照number类型比较      sort(function(a,b){ }) // a和b是相邻的两个数据
        arr.sort(function(a,b){
            console.log(a,b);// a是后一个数  b是一个数
            // return a - b //从小到大
            return b - a //从大到和
        })
        console.log(arr);

对象排序

 // 2.对象排序  根据对象的age排序 l y g d
        var arr1 = [
            {
                "name":"李三","age":15,"date":"2006-4-1"
            },
            {
                "name":"杨思","age":12,"date":"2009-4-1"
            },
            {
                "name":"郭郭","age":17,"date":"2010-4-1"
            },
            {
                "name":"迪丽热巴","age":19,"date":"2003-4-1"
            }
        ] 

        arr1.sort(function(a,b){
            // 获取对象中的属性值  对象名.属性名
            return a.age - b.age  //根据age 从小到大
          
        })

日期排序

 // 3.日期排序  
        console.log( Date.parse("2022-10-1") );//1664553600000 创建字符串未来时间并且转换时间戳(毫秒单位 1970年1月1日到2022年10月1日的毫秒单位)
        console.log( new Date("2022-10-1") - new Date("2020-10-1")  );// 隐式转换

        arr1.sort(function(a,b){
            // return  Date.parse( a.date ) - Date.parse( b.date )
            return new Date(a.date) - new Date(b.date);
        })
        console.log(arr1);

中文排序

// 4.根据中文排序  a-z
        // 李三 l    杨思 y   郭郭 g  迪丽热巴 d   迪丽热巴 郭郭 李三 杨思
        arr1.sort(function(a,b){
            // localeCompare 
            // return a.name.localeCompare(b.name);//将中文转换拼音 根据拼音首字母按照a-z排序
            return b.name.localeCompare(a.name);//将中文转换拼音  根据拼音首字符按照z-a排序
        })
        console.log(arr1)

随机排序

// 5.随机排序
        var arr2 = [1,2,3,4,5,6];
        arr2.sort(function(a,b){
            return Math.random() - 0.5;//通过随机产生0-1的数  然后判断是否大于0.5
        })
        console.log(arr2);

1.2数组的迭代方法

IE低版本不支持迭代方法

以前学的数组方法
- 循环 for while do-while
- 遍历 for-in
- 迭代 every some forEach map filter

every

语法：arr.every(function(数组元素,下标,当前数组){ })
作用：对数组元素进行判断所有的判断都为true的之后结果返回true

 // 1.every
        var arr = [80,60,100,45,99,10]; // true true true false true false
        // 判断所有成绩是否都大于60分
        var res =  arr.every(function(item,index){ // item数组元素(80 60 100 45 99 10)  index下标(0,1,2,3,4,5)
            console.log(item,index)
            return item >=60
        })
        console.log(res);

some

语法：arr.some(function(数组元素,下标,当前数组){})
作用：对数组元素进行判断只要有一个判断条件为true 结果就为true

// 2.some  只要有一个判断条件为true  结果就为true
        // 考试成绩中有没有考到100分的
        var arr1 =  [80,60,100,45,99,10];// false false true false false false
        var res =  arr1.some(function(item,index){ // item数组元素  index下标
            return item==100
        })

filter

语法：arr.filter(function(数组元素,下标,当前数组){})
作用：对数组元素进行判断将满足条件的元素组成一个新的数组返回

 // 3.filter 对数组元素进行判断  将满足条件的元素组成一个新的数组返回
        // 将成绩大于60的全部筛选出来
        var arr2 = [80,60,100,45,99,10];
        var res =  arr2.filter(function(item,index){
            return item>=60
        })
        console.log(res);

forEach

语法：arr.forEach(function(数组元素,下标,当前数组){})
作用：遍历数组没有返回值

 // 4.forEach 遍历数组  没有返回值
        // 将所有的成绩-5
        var arr3 = [80,60,100,45,99,10];
        var res =  arr3.forEach(function(item,index){//item数组元素  index下标
            console.log(item,index);
            arr3[index] = item-5
        })
        console.log(arr3)

map

语法：arr.map(function(数组元素,下标,当前数组){})
作用：遍历数组有返回值

       // 5.map  遍历数组  有返回值
        var arr4 = [80,60,100,45,99,10];
        var res =  arr4.map(function(item,index){
            // + 5
            return item+5
        })
        console.log(res,arr4);

2.正则对象

正则对象：RegExp对象
概念：提前定义好的，用于检测字符串的逻辑表达公式，这个逻辑表达式就叫正则表达式
作用：验证码字符串是否满足条件

2.1创建正则对象

字面量创建

  // 1.使用字面量创建  /检测公式/修饰符
        var reg = /1[3-9][0-9]{9}/gi

使用new关键字创建

 // 2.使用new关键字创建 new RegExp(检索公式,修饰符)
        var reg1 = new RegExp("1[3-9][0-9]{9}", "gi")

区别

 // 2.两者有什么区别

        var w = "web";
        var reg2 = /w/;//字面量创建的正则 没有变量的概念
        console.log(reg2)

        var w = "java"
        var reg3 = new RegExp(w);//new关键字创建  可以使用变量
        console.log(reg3)

2.2修饰符

g global 执行一个全局的匹配

        // g  全局匹配  0-9的数字用*代替
        var str = "web0711web0711";
        var reg1 = /\d/g; // "\d" 匹配0-9的数字
        // replce
        var newSatr =  str.replace(reg1,"*");// 将str字符串中的数字都替换成*
        console.log(newStr);

i ignore case 执行一个不区分大小写的匹配

        // i  不区分大小写  将web替换成java
        var str = "web0711Web0711web0711web0711";
        var reg2 = /web/gi;
        var newStr =    str.replace(reg2,"java");
        console.log(newStr);

2.3检索方法

2.3.1字符串的检索方法

字符串中有4个方法是可以直接写正则表达式的
- replace split match search
replace

    // str.replace(要查询的内容，要替换的内容)
        var str = "web0711ui0711java0711"; 
        //将0711 替换成 0722
        var newStr =  str.replace(/0711/g,"0722");
        console.log(newStr);//web0722ui0722java0722

split

// str.split(分割标识)  将字符串根据分割标识分割成数组
        var str = "q1w2e3r4t5y6a";// 将字母挑选出来 并且组成一个新的数组
        var newStr = str.split(/\d/);// 字符串的分割标识只要是0-9的数字即可
        console.log(newStr);// ['q', 'w', 'e', 'r', 't', 'y', 'a']

match

  //match str.match() 挑选满足条件的内容组成一个新的数组返回 
        var str = "q1w2e3r4t5y6a"; // 将所有的数字挑选出来 并且组成一个新的数组
        var newStr = str.match(/\d/g);
        console.log(newStr);//['1', '2', '3', '4', '5', '6']

       // search  str.search   和indexof的作用一样  
        var str = "9q1w2e3r4t5y6a"; 
        // var str = "abcdefg";
        var index =   str.search(/\d/);//查找str中首次出现数字的位置
        console.log(index);//-1


        // indexof和search的作用是一致的  但是有区别 search可以使用正则 indexof不能使用
        var index = str.indexOf(/\d/);
        console.log(index);// -1  无法识别正则表达式

2.3.2正则对象的检索方法

test
- 语法：正则表达式.test(检测的内容)
- 作用：满足正则条件返回true 不满足则是返回false 正则表达式.test(检测的内容)

 // 正则的检索方法   test   exec
        // test 满足正则条件返回true 不满足则是返回false   正则表达式.test(检测的内容)
        var str = "27823456789";
        var reg = /^1[3-9][0-9]{9}$/;// 检测手机号 以1开头 第二位是3-9的数  必须是11位
        console.log(reg.test(str));//false

exec
- 语法：正则表达式.exec(检索内容)
- 作用：检索字符串检测通过返回检测内容(数组格式) 检测不通过返回null
- 注意
  - 不加g 默认每次都是从下标为0的位置开始检测
  - 加上g 从上一次查找的位置往后开始查找

 //exec 检索字符串 检测通过返回检测内容(数组格式) 检测不通过返回null
        // 正则表达式.exec(检索内容)
        // 不加g    默认每次都是从下标为0的位置开始检测
        // 加上g    从上一次查找的位置往后开始查找
        var str = "q1w2e3r4t5y6a";
        var reg = /\d/g;//检索数字
        var a = reg.exec(str);//一次只能检索一个
        console.log(a);//1
        var a = reg.exec(str);//一次只能检索一个
        console.log(a);//2
        var a = reg.exec(str);//一次只能检索一个
        console.log(a);//3
        var a = reg.exec(str);//一次只能检索一个
        console.log(a);//4
        var a = reg.exec(str);//一次只能检索一个
        console.log(a);//5
        var a = reg.exec(str);//一次只能检索一个
        console.log(a);//6
        var a = reg.exec(str);//一次只能检索一个
        console.log(a);//null

2.4正则元字符

正则元字符：在正则表达式中有些特定的符号有特定功能

. 匹配出换行符之外的任意内容

// \n换行符 \t空格符   exec 返回检测的内容 检测不到返回null
        var str = "你好\n你好\t你好";
        //1    .匹配出换行符之外的任意内容
        var reg = /./g; //全局匹配出换行符之外的任意内容
        var a = reg.exec(str);
        console.log(a);//你
        var a = reg.exec(str);
        console.log(a);//好
        var a = reg.exec(str);
        console.log(a);//你

[字符集] 匹配字符集中的任意字符

 // 2  [字符集] 匹配字符集中的任意字符
        var str = "web0711web0711";
        // var reg = /[a-z]/g;// 匹配a-z中的任意一个字符
        var reg = /[a-z0-9]/g;// 匹配a-z或者是0-9之间的任意字符
        var a = reg.exec(str);
        console.log(a);//w 
        var a = reg.exec(str);
        console.log(a);//e
        var a = reg.exec(str);
        console.log(a);//b
        var a = reg.exec(str);
        console.log(a);//0

        var str = "1234567";
        //验证邮箱  邮箱中都包含@
        var reg = /[@.]/ //验证字符串中是否包含@或者.
        var a = reg.exec(str);
        console.log(a);//null

[^字符集] 匹配非字符集中的任意字符

 // 3.[^字符集] 匹配非字符集中的任意字符
        var str = "12@34567";
        var reg = /[^@.]/g;// 匹配非@或者.的内容
        console.log(reg.exec(str));//1
        console.log(reg.exec(str));//2
        console.log(reg.exec(str));//3

\d 匹配数组 \D 匹配非数字

 // 4  \d 匹配数组  \D 匹配非数字
        var str = "q1w@2e3r4t5";
        var reg = /\d/g;// 匹配数字
        console.log(reg.exec(str));//1
        console.log(reg.exec(str));//2
        var reg = /\D/g;// 匹配非数字
        console.log(reg.exec(str));//q
        console.log(reg.exec(str));//w
        console.log(reg.exec(str));//@

\w 匹配数字字母下划线 \W 匹配非数字非字母非下划线

 // 5 \w 匹配数字 字母 下划线    \W 匹配非数字 非字母 非下划线
        var str = "q1w@2e3r_4t5";
        var reg = /\w/g;
        console.log(reg.exec(str));//q
        console.log(reg.exec(str));//1
        console.log(reg.exec(str));//w
        console.log(reg.exec(str));//2

        var reg = /\W/g;
        console.log(reg.exec(str));//@
        console.log(reg.exec(str));//null

\s 匹配空格 \S匹配非空格

 // 6 \s 匹配空格    \S匹配非空格
        var str = "q1 w@2e3r_4t 5";
        var reg = /\s/g;
        console.log(reg.exec(str)); // " "
        console.log(reg.exec(str)); // " "

 				var reg = /\S/g;
        console.log(reg.exec(str));//q
        console.log(reg.exec(str));//1
        console.log(reg.exec(str));//w

^a 必须以a开头 a$ 必须以a结尾

 // 7 ^a 必须以a开头   a$  必须以a结尾   严格模式
        var str = "178098765430";// 12位数  
        var reg = /^1[3-9]\d{9}$/;
        console.log(reg.test(str)); //false

a{m,n} 匹配a的位数至少是m位最多n位

  // 8 a{m,n}  匹配a的位数   至少是m位  最多n位
        var str = "123456";
        var reg = /^\d{2,3}$/;// 匹配数字最少2位 最多3位  
        console.log(reg.test(str));//false

a{m} 匹配a的位数至少m位最多m位


        // 9 a{m}   匹配a的位数  至少m位 最多m位
        var str = "123456";
        var reg = /^\d{6}$/;// 匹配6位数字
        console.log(reg.test(str));//true

a{m,} 匹配a的位数至少m位

 // 10 a{m,} 匹配a的位数  至少m位 
        var str = "1";
        var reg = /^\d{2,}$/;// 匹配数字至少2位
        console.log(reg.test(str));//true

2.正则对象

2.1正则量词

a? 匹配前面的字符0次或者1次 a这个字符可有可无

  // 1. a? 匹配前面的字符0次或者1次  a这个字符可有可无
        var reg = /\d?/;// 匹配0-9之间的数字 这个数字可有可无
        var str = "1web";
        var str = "1we4b";
        console.log(reg.test(str));// true
        // 验证网址  \转义 让符号失去原本的意义
        var reg = /https?:\/\/www\.baidu\.com/;// https可以  http也可以
        var str = "https://www.baidu.com";
        var str = "http://www.baidu.com";
        console.log(reg.test(str));//true

a* 匹配前面的字符0次或者多次尽可能的多匹配

// 2.a* 匹配前面的字符0次或者多次  尽可能的多匹配
        var reg = /a*/g;
        var str = "aaaaa1aaaaaa1";
        console.log(reg.exec(str));//"aaaaa"

a+ 匹配前面的字符至少1次

        // 3 a+   匹配前面的字符至少1次
        // 验证网址
        var reg = /https?:\/\/www\.\w+\.com/;
        var str = "https://www.jd.com";
        var str = "http://www.12306.com";
        var str = "http://www.taobao.com";
        console.log(reg.test(str));//true

2.2或和分组

或 |

 // 或 |
        var reg = /https?:\/\/www\.\w+\.com|net|org|cn/;
        var str = "http://www.jd.cn";
        var str = "http://www.jd.com";
        var str = "http://www.a.com";
        var str = "cn";//true  但是不是我们想要的效果 因为把 | 左右的式子当成了一个整体
        console.log(reg.test(str));// true

分组 ()

 // 分组  ()
        var reg = /https?:\/\/www\.\w+\.(com|net|org|cn)/;
        var str = "cn";// false
        var str = "http://www.baidu.com"
        console.log(reg.test(str));

案例

        //验证网址
        var reg = /https?:\/\/www\.\w+\.(com|net|org|cn)/;
        var str = "http://www.baidu.com";
        console.log(reg.test(str));//true
        
        // 练习1  手机号中间位数加密
        // 13568978989  135****8989;  中间用*代替
        var reg = /^(1[3-9][0-9])([0-9]{4})([0-9]{4})$/
        var str = "13568978989"
        // replace方法中 可以直接使用分组检测数据  $n代表是第几个分组
        var str1 = str.replace(reg, "$1*****$3");
        console.log(str1);

        // 练习2  过滤敏感词   马化腾  马**   马云  马*
        var reg = /化腾|云|富婆|可爱/;
        var str = "你是小可爱";
        var str = "马云";
        // 有几个敏感词  就有几个* 
        // replace(要查找的内容,function(value){}) value值中存储的是查找到的内容 
        var str1 = str.replace(reg, function (value) {
            // value  "可爱" 
            var a = "";
            for (var i = 0; i < value.length; i++) { //2次
                a += "*"
            }
            return a
        });
        console.log(str1);

2.3前瞻后顾

前瞻

前瞻
- 前瞻(?=a) 正向肯定预查后面必须要跟a字符

 // 前瞻(?=a) 正向肯定预查 后面必须要跟a字符
        var str = "www36com34";
        var reg = /\d(?=\d)/g;// 检测数字  数字后面必须跟数才满足条件
        console.log(reg.exec(str));//3
        console.log(reg.exec(str));//3  输出的是第二个3
        console.log(reg.exec(str));//null

负前瞻
- 负前瞻(?!a) 正向否定预查后面不能跟a字符

 // 负前瞻(?!a) 正向否定预查  后面不能跟a字符 
        var str = "www36com34";
        var reg = /\d(?!\d)/g;// 检测数字  数字后面不能跟数字才满足条件
        console.log(reg.exec(str));// 6
        console.log(reg.exec(str));// 4
        console.log(reg.exec(str));// null

后顾

后顾
- 后顾(?<=a) 反向肯定预查前面必须跟a字符

  // 后顾(?<=a)    前面必须跟a字符
        var str = "www36com34";
        var reg = /(?<=\d)\d/g;// 检测数字  前面必须跟数字
        console.log(reg.exec(str));// 6
        console.log(reg.exec(str));// 4
        console.log(reg.exec(str));// null

负后顾
- 负后顾(?<!a) 反向否定预查前面不能跟a字符

// 负后顾(?<!a)  前面不能跟a字符
        var str = "www36com34";
        var reg = /(?<!\d)\d/g;  //检测数字  前面不能跟数字
        console.log(reg.exec(str));//3
        console.log(reg.exec(str));//3
        console.log(reg.exec(str));//null

3.DOM

3.1DOM简介

DOM 文档对象模型(document object model)   主要提供一些api方法来操作html文档

3.2DOM原理

DOM为了方便开发者操作html文档对文档进行了抽象化处理将html文档抽象化成一个树状结构,经过抽象之后我们返现每一个标签都变成了树状结构中的一个节点我们可以通过各种方法来获取节点，document就是一个对象这个对象就是指html文档

3.3DOM获取元素

3.3.1get系列获取元素

document.getElementById(“id名”) 获取整个文档下的id名的元素可以获取到一个
document.getElementsByTagName(“标签名”) 获取整个文档下该标签名的元素
document.getElementsByClassName(“类型名”) 获取整个文档下该类名的元素

3.3.2query系列获取元素

不支持IE低版本

querySelector
- document.querySelector(“css选择器”) 在任意范围内通过css选择器获取该类型的元素集合中的第一个

 // 1.获取元素 
        var list = document.querySelector("ul");// 获取整个文档下的里  
        console.log(list);
        var list = document.querySelector(".box");
        console.log(list);//<li class="box">这是第2个li标签</li>
        // 只想获取wrap下的第一个li
        var list = document.querySelector("#wrap li");
        console.log(list);//  <li>1</li>

querySelectorAll
- document.querySelectorAll(“css选择器”) 在任意范围内通过css选择器获取该类型的元素集合

 // 2  
        var list = document.querySelectorAll("li");
        console.log(list);//NodeList(9) [li.box, li.box, li.box, li, li, li, li, li, li]
        var list = document.querySelectorAll("#wrap li");
        console.log(list);// NodeList(3) [li, li, li]

3.3.3get系列和query系列的区别

get动态获取元素后续有添加或者删除元素都能实时获取 get是支持ie低版本
query静态获取元素后续有添加或者删除元素不能实时获取 query是不支持ie低版本

 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <button>添加</button>
    <script>
        // 1.get系列获取li
        var getLi = document.getElementsByTagName("li");
        console.log(getLi);//HTMLCollection(3)
        // 2.query系列获取li
        var queryLi = document.querySelectorAll("li");
        console.log(queryLi);// NodeList(3)

        // 3.给ul追加li标签
        var btn = document.getElementsByTagName("button")[0];
        var list = document.getElementsByTagName("ul")[0];
        /* 
            get动态获取元素  后续有添加或者删除元素  都能实时获取    get是支持ie低版本
            query静态获取元素 后续有添加或者删除元素   不能实时获取  query是不支持ie低版本
        */
        btn.onclick = function(){
            list.innerHTML+="<li>4</li>";
            console.log(getLi,"get系列");//HTMLCollection(4) [li, li, li, li] 'get系列'
            console.log(queryLi,"query系列");//NodeList(3) [li, li, li] 'query系列'
        }

    </script>

3.4DOM获取节点

3.4.1 获取子节点

父元素.children

作用：获取子元素节点

 // 1.父元素.children   获取子元素节点
        var child1 = list.children;
        console.log(child1);//HTMLCollection(5) [li, li, li, li, li]

父元素.childNodes

作用：获取父元素下的所有子节点

   //  2.父元素.childNodes  获取所有的节点
        var child2 = list.childNodes;
        console.log(child2);//获取的是所有的子节点(包括文本节点 注释节点 元素节点)

DOM中的节点分类
- 元素节点 html文档所有标签抽象出来的都是元素节点
- 属性节点标签的属性抽象出来是属性节点
- 文本节点 html文档中的文本内容抽象出来都是文本节点(包括空格和换行符)
- 注释节点注释内容抽象出来是注释节点

判断节点的类型

语法节点.nodeType
- 元素节点 1
- 属性节点 2
- 文本节点 3
- 注释节点 8

 // 3.判断节点类型  节点.nodeType  
        var type = child2[3].nodeType;
        console.log(type);//1   元素节点
        var type = child2[0].nodeType;
        console.log(type);//3	   文本节点
        var type = child2[1].nodeType;
        console.log(type);//8		 注释节点

获取节点名称

语法：节点.nodeName

  // 4.判断节点名称  节点.nodeName
        var name = child2[0].nodeName;
        console.log(name);// #text   文本节点

        var name = child2[1].nodeName
        console.log(name);//#comment  注释节点

        var name = child2[7].nodeName
        console.log(name);"DIV"  //元素节点获取的标签名的大写

获取或者设置节点内容

语法：获取节点.nodeValue 设置节点.nodeValue = 值
注意：元素节点无法获取和设置内容因为元素节点有自己的方法


        // 5.设置或者获取节点内容   获取 节点.nodeValue    设置 节点.nodeValue = 值
        var value = child2[0].nodeValue;
        console.log(value);// 213

        var value = child2[1].nodeValue;
        console.log(value);// 这是li标签

        var value = child2[3].nodeValue;
        console.log(value);// null  元素节点的文本内容  标签.innerHTML  标签.innerText
				//设置
        child2[0].nodeValue = "456";
        child2[1].nodeValue = "456";

3.4.2 获取父节点

子节点.parentNode
- 获取直接父元素
子节点.offsetParent
- 获取最近定位父元素如果没有定位父元素则是获取body

        var oSpan  = document.querySelector("span");
        // 1.获取直接父元素   子元素.parentNode
        console.log(oSpan.parentNode);// p
        // 2.获取最近定位父元素  如果没有定位父元素则是获取body
        console.log(oSpan.offsetParent);// p

3.5操作节点

3.5.1追加节点

存在问题：innerHTML有覆盖原有内容的缺点后续追加的内容会把原先的事件覆盖掉

解决方法：在原有的结构后面直接追加标签追加节点就能解决这个问题

创建节点
- 创建元素节点 document.createElement(“节点名称”)
- 创建文本节点 document.createTextNode(文本内容)

<script>
        // 1.创建元素节点   document.createElement("节点名称")
        var a = document.createElement("div");
        console.log(a);
        // 2.创建文本节点
        var b = document.createTextNode("123");
        console.log(b);
    </script>

追加节点
- 父元素.appendChild(要添加的子节点)

<script>
        // 1.将文本节点追加到元素节点中
        var a = document.createElement("div");//创建元素节点
        var b = document.createTextNode("123");//创建文本节点
        // 将文件节点追加到元素中
        a.appendChild(b);
        console.log(a);
        // 将div显示在页面上
        document.body.appendChild(a);

        // 2.直接给元素节点设置内容
        var a1 = document.createElement("li");
        a1.innerHTML = "123";
        console.log(a1);
        // 将li追加到页面上
        document.body.appendChild(a1);
    </script>