JavaScript知识点-周3.md

一、时间对象

1. 创建一个原生的时间对象, 对象身上各种的属性和方法

   var date = new Date(); // 当前时间

   console.log(typeof date); // object

2. 获取本地状态时间

   // 本地状态时间
   console.log(date.toLocaleString()); // 2020/5/6 下午2:48:01

   console.log(date.toLocaleDateString()); // 2020/5/6

   console.log(date.toLocaleTimeString()); // 下午2:49:12

3. 单个时间

   var date = new Date();

   // 获取单个时间

   console.log(date.getFullYear()); // 年    

   console.log(date.getMonth()); // 月 从0开始, 0-11表示1-12月

   console.log(date.getDate()); // 日

   console.log(date.getDay()); // 星期, 从0开始, 0->星期日, 1-6代表周一-->周六

   var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六' ];

   console.log(week[date.getDay()]);

   console.log(date.getHours()); // 小时 14

   console.log(date.getMinutes()); // 分钟

   console.log(date.getSeconds()); // 秒

   console.log(date.getTime()); // 毫秒数  时间戳 距1970.1.1

二、创建时间

1. 单独创建

   // 创建时间

   var date = new Date(); // 当前时间 2020-12-20T13:15:15.247Z

   // 创建未来时间

   // 单独设置  所有get的方法除了getDay, 其他的都有set方法

   console.log(date);

   date.setFullYear(2021);

   date.setMonth(10); // 0-11  多余11时, 减去12然后显示剩余月份对应的月份

   date.setDate(20);

   date.setHours(20);

   date.setMinutes(20);

   date.setSeconds(20);

   console.log(date);

2. 字符串创建

   // 创建未来时间对象

   var date = new Date(年, 月, 日, 时, 分, 秒);  全部都是number类型

   var date = new Date(2020, 11, 12, 12, 12, 12);

   var date = new Date(2020, 11, 12); // Sat Dec 12 2020 00:00:00 GMT+0800 (中国标准时间)

   var date = new Date(时间字符串); '年/月/日 hh:mm:ss';

   var date = new Date('2020 12 12 12:12:12');

   var date = new Date('2020/12/12 12:12:12');

   var date = new Date('2020-12-12 12:12:12');

   var date = new Date('2020,12,12 12:12:12');

   var date = new Date('2020,12,12'); // Sat Dec 12 2020 00:00:00 GMT+0800 (中国标准时间)

   var date = new Date('2020-12-12'); // Sat Dec 12 2020 08:00:00 GMT+0800 (中国标准时间)

   console.log(date);

3. 获取时间戳: Date.parse(字符串格式化时间);

   // Date.parse(字符串格式化时间) 得到时间戳

   console.log(Date.parse('2020-12-12 00:00:00')); // 1607702400000

4. 关于时间格式的方法

• 获取指定时间

   let date = new Date();//2020-11-27T01:31:13.027Z '当前时间-年月日时分秒'
   let time = date.getTime();//1606440673027 '当前时间-时间戳'
   console.log(date.toLocaleString())//2020-11-27 09:34:25

• 将时间戳-转换为 年月日 时分秒格式

   function timeStamp(dateStamp) {
       let date = new Date(dateStamp);
       let Y = date.getFullYear() + '-';
       let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
       let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
       let H = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
       let Mi = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
       let S = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
       let tempDate = Y + M + D + H + Mi + S;
       console.log("时间戳转换", tempDate)
       return tempDate;
   }

   //获取指定时间的时间戳: Date.parse(字符串格式化时间);
   console.log(Date.parse('2020-12-12 00:00:00')); // 1607702400000
   console.log(timeStamp(1607702400000));//将时间戳转换为年月日 时分秒2020-12-12 00:00:00

   //当前时间的前一天 00:00:00 - 23:59:59
   var starttime = new Date(new Date().toLocaleDateString()).getTime() - 24 * 60 * 60 * 1000;
   var endtime = new Date(new Date().toLocaleDateString()).getTime() - 1;
   //当前时间-今天 00:00:00 - 23:59:59
   const start = new Date(new Date().toLocaleDateString()).getTime();
   console.log(start, timeStamp(start));

   const end = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1;
   console.log(end, timeStamp(end));

• 获取当天时间00:00:00 - 23:59:59

   const start = new Date(new Date(new Date().toLocaleDateString()).getTime());
   console.log(start); //Mon Dec 04 2017 00:00:00 GMT+0800 (中国标准时间)

   const start = new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1);
   console.log(start); //Mon Dec 04 2017 23:59:59 GMT+0800 (中国标准时间)

三、moment

1. 获取特定格式时间

格式	时间
YYYY	年
MM	月
DD	日
HH	时
mm	分
ss	秒

   console.log(date.format('YYYY年MM月DD日 HH:mm:ss'));    

   console.log(date.format('YYYY年MM月DD日'));    

   console.log(date.format('HH:mm:ss'));    

   console.log(date.format('YYYY-MM-DD'));    

   console.log(date.format('HH:mm:ss YYYY/MM/DD'));    

   console.log(date.format('YYYY/MM/DD      HH:mm:ss'));    

   console.log(date.format('YYYY   HH:mm:ss')); 

              
   console.log(date.format('YYYY')); // 四个数字完整的年份

   console.log(date.format('MM')); // 表示月份, 有前导0 01-12

   console.log(date.format('DD')); // 表示日期, 有前导0 01-31

   console.log(date.format('d')); // 星期中的第几天， 0-6，0--周天 6---周六

   console.log(date.format('HH')); // 小时, 前导0, 00-23

   console.log(date.format('mm')); // 分钟, 00 - 59

   console.log(date.format('ss')); // 秒, 00 - 59

   console.log(date.format('X')); // 只含秒的时间戳

3. 转成原生时间对象: moment().toDate();

4. 得到时间戳: moment().valueOf();

5. 单独时间的获取和设置: 加前导0

   var date = moment();

   console.log(date);

   // 读取

   console.log(date.year());

   // 设置

   date.year(2022);

   date.set('year', 2023);

   date.set({'year': 2024});

   
   // 设置月

   date.month(3); // 0-11

   date.set('month', 4);

   date.set({'month': 5});

   // 获取

   console.log(date.month()); // 0-11表示1-12

   
   // 类似

   console.log(date.day()); // 星期几

   console.log(date.date()); // 日， 这个月的第几天

   console.log(date.hour()); // 小时

   console.log(date.minute()); // 分钟

   console.log(date.second()); // 秒


   console.log(date.week()); // 一年中的第几周

   console.log(date.dayOfYear()); // 一年中的第几天

   console.log(date.quarter()); // 一年中的第几个季度

   console.log(date.daysInMonth()); // 日期所在的月份有多少天

   console.log(date);

6. 判断时间方法

   1. 早于 moment(时间1).isBefore(时间2字符串); 判断时间1是否早于时间2, 返回true/false

   console.log(moment().isBefore('2020-05-08')); // true

   console.log(moment('2020-05-08').isBefore('2020-05-07')); // false

   console.log(moment('2020-06-22').isBefore('2020-07-30', 'year')); // false

   console.log(moment('2019-06-22').isBefore('2020-07-30', 'year')); // true

   console.log(moment('2019-06-22').isBefore('2020-06-30', 'month')); // true

2. 晚于 moment(时间1).isAfter(时间2); 判断时间1是否晚于时间2

   console.log(moment('2020-05-08').isAfter('2020-05-07')); // true

   console.log(moment('2020-06-22').isAfter('2020-07-30', 'year')); // false 

   console.log(moment('2019-06-22').isAfter('2020-07-30', 'year')); // false 

   console.log(moment('2019-06-22').isAfter('2020-06-30', 'month')); // false

3. 相等 moment(时间1).isSame(时间2); 判断时间是否相等

   console.log(moment().isSame('2020-05-07')); // false

   console.log(moment().isSame('2020-06-07', 'year')); // true

   console.log(moment().isSame('2019-05-07', 'month')); // false, 判断月份是否相等, 年份必须相同; 是否是同一个年份、月份、日期、小时。。。。

4. 两者之间 moment(时间1).isBetween(时间2, 时间3); 判断时间1是否在时间2与时间3之间

   console.log(moment().isBetween('2019-12-01', '2020-12-01')); // true

   console.log(moment().isBetween('2019-12-01', '2020-12-01', 'year')); // false

   console.log(moment().isBetween('2019-12-01', '2021-12-01', 'year')); // true

   console.log(moment().isBetween('2020-05-07 14:00:00', '2020-05-07 23:59:59', 'hour')); // true

5. 判断是否是闰年

   console.log(moment().isLeapYear()); // true

   console.log(moment('2021-12-31').isLeapYear()); // false

6. 当前时间的毫秒数

   console.log(Date.now());

   console.log(moment().format('X')); // 当前时间的秒数

四、字符串

1. 单双引号包裹的就是字符串

2. 长度: .length

3. charAt()： 指定下标的字符

4. 强制转换： String() .toString()

5. 查找字符

   • indexOf: 字符串.indexOf(要查找的字符, [从哪里开始查找]);

     如果找到第一个, 结束查找并返回其第一个的下标

     如果找不到, 返回-1

   var str = 'abcdefghijklmnf';

   // 字符串.indexOf(要查找的字符, [从哪里开始查找]); 

   // 如果找到第一个, 结束查找并返回其第一个的下标

   // 如果找不到, 返回-1

   console.log(str.indexOf('f')); // 5 表示从左到右, 从0开始查找

   console.log(str.indexOf('f', 6)); // 14 表示从左到右, 从下标6的位置开始查找

   console.log(str.indexOf('z'));

• lastIndexOf: 字符串.lastIndexOf(要查找的字符, [从哪里开始查找]); 从右向左查找

   // 字符串.lastIndexOf(要查找的字符, [从哪里开始查找]); 从右向左查找

   console.log(str.lastIndexOf('f')); // 14 表示从右向左查找,从最后一个下标开始往前查找

   console.log(str.lastIndexOf('f', 10)); // 5

   console.log(str.lastIndexOf('z')); // -1

6. 截取

   1. substring: 字符串.substring([起始位置, 结束位置]);

      • 如果没有参数, 返回整个字符串

      • 传一个参数, 表示从开始位置截取到整个字符串的结束为止

      • 传2个参数, 表示从开始位置截取到结束位置的前一个

      • 如果第一个参数大于第二个参数, 将两个参数位置互换再截取

      • 如果参数为负数, 将负数转成0之后, 在按照上面的规则进行截取

   // 包含起始位置, 不包含结束位置

   var str = 'abcdefghijklmnopqrst';

   console.log(str.substring()); // 如果没有参数, 返回整个字符串

   console.log(str.substring(2)); // 传一个参数, 表示从开始位置截取到整个字符串的结束为止

   console.log(str.substring(30)); // 空字符

   console.log(str.substring(2, 4)); // cd 传2个参数, 表示从开始位置截取到结束位置的前一个

   console.log(str.substring(8, 2)); // cdefgh 如果第一个参数大于第二个参数, 将两个参数位置互换再截取

   console.log(str.substring(8, -1)); // abcdefgh 如果参数为负数, 将负数转成0之后, 在按照上面的规则进行截取

2. slice: 字符串.slice([起始下标, 结束下标]);

   • 没有参数, 返回整个字符串

   • 一个参数, 返回起始下标的字符到整个字符串的结束字符为止

   • 两个参数, 返回起始下标的字符到结束下标的前一位字符为止(包含起始下标, 不包含结束下标);

   • 起始下标大于结束下标, 返回空字符

   • 如果参数为负数, 表示从后往前数几位,然后做截取

   // 字符串.slice([起始下标, 结束下标]);

   // []--->表示其中的参数可选项

   console.log(str.slice()); // 没有参数, 返回整个字符串

   console.log(str.slice(2)); // 一个参数, 返回起始下标的字符到整个字符串的结束字符为止

   console.log(str.slice(2,4)); // 两个参数, 返回起始下标的字符到结束下标的前一位字符为止(包含起始下标, 不包含结束下标);

   console.log(str.slice(8, 2)); // 起始下标大于结束下标, 返回空字符

   console.log(str.slice(8, -3)); // 如果参数为负数, 表示从后往前数几位,然后做截取

   console.log(str.slice(-1, -10)); // 起始下标大于结束下标, 返回空字符

   console.log(str.slice(-10, -1)); // klmnopqrs

3. substr: 字符串.substr([要截取的起始下标, 截取字符串的长度])

   • 没有参数, 返回整个字符串

   • 从起始下标位置开始, 截取到整个字符串的结束为止

   • 从起始下标开始, 截取长度为几的字符

   • 截取字符长度为负数, 返回空字符串

   • 起始下标为负数,从右往左数几位开始截取

   // 字符串.substr(要截取的起始下标, 截取字符串的长度)

   console.log(str.substr(5,3)); // 从起始下标开始, 截取长度为几的字符

   console.log(str.substr(5)); // 从起始下标位置开始, 截取到整个字符串的结束为止

   console.log(str.substr()); // 没有参数, 返回整个字符串

   console.log(str.substr(10, 20));

   console.log(str.substr(5, -1)); // 空字符

   console.log(str.substr(-10, 3)); // 起始下标为负数,从右往左数几位开始截取

7. 转大小写:

   1. 转小写: 字符串.toLowerCase();

   2. 转大写: 字符串.toUpperCase();

   var str = 'FGFHAahhsjaSDgwADF'; 
   // 转小写: 字符串.toLowerCase();  
   
   console.log(str.toLowerCase()); // fgfhaahhsjasdgwadf

   // 转大写: 字符串.toUpperCase();

   console.log(str.toUpperCase()); // FGFHAAHHSJASDGWADF

   // 用于验证码、验证字符正确与否、封装函数

8. 将字符串分割成数组

   字符串.split(‘分割符’); 可以是一切字符

   var str = '优学习字符串分割成数组';

   console.log(str.split(','));

   console.log(str.split('一'));

   console.log(str.split('')); // 每个字符会被拆成一项

   console.log(str.split('优')); // 2项

9. 将数组拼接成字符串

   数组.join(‘连接符’); 可以是一切字符

   var arr = [1,2,3,4,5];

   console.log(arr.join(',')); // 1,2,3,4,5

   console.log(arr.join('123')); // 11232123312341235

   console.log(arr.join('')); // 12345

10. 替换: 字符串.replace(要替换掉的字符, 要替换进来的字符);

    注意: 一次只能替换一个位置的字符

   var str = '今天是个好日子, 今天是个周四, 今天之后在上两天课就放假了';

   // 替换字符: 字符串.replace(要替换掉的字符, 要替换进来的字符);

   // 一次只能替换一个位置的字符

   console.log(str.replace('今天', '5月7号'));

五、数组

1、数组的概念和创建

1. 概念: 数组是值得有序的集合, 每一个值叫元素, 下标叫做索引

2. 作用: 可以用来存储不定数量不定类型的数据

3. 创建方式:

   1. 字面量创建： 将数组的项放在[]中, 可以直观地看到

   2. 构造函数创建

      注意： 如果构造函数中传一个参数并且这个参数是数字时, 表示的是创建出来的数组的长度, 每一项存储为empty, 获取得到的undefined

   // 1. 字面量创建

   var arr = [2,3,4,5];

   var arr1 = [];

   // 2. 构造函数创建

   var arr2 = new Array();

   console.log(arr2);

   var arr3 = new Array(1,2,3,4);

   console.log(arr3);

   var arr4 = new Array(5);

   console.log(arr4);

   console.log(arr4[2]);

2、数组栈方法(四个)

方法	含义
数组.push(项1, 项2, …, 项n)	向数组后面添加一位或者是多位元素, 返回新数组的长度
数组.pop()	从数组末尾删除一项, 返回被删除的元素, 为了方便后续去使用
数组.unshift(项1, 项2, …, 项n)	向数组首位添加一位或者是多位元素, 返回新数组的长度
数组.shift()	从数组首位删除一项, 返回被删除的元素

   var len = arr.push('大乔', '芈月', '百里守约');

   console.log(arr);

   console.log(len);

  
   var a1 = arr.pop();

   console.log(arr);

   console.log(a1);
   

   var len2 = arr.unshift('庄周', '米莱迪');

   console.log(arr);

   console.log(len2);
   

   var a2 = arr.shift();

   console.log(arr);

   console.log(a2);

3、splice

• 万能的splice: 添加、删除、替换

• 数组.splice(起始下标, 删除的个数, 项1, 项2, 项3…);

• 注意: 返回删除掉的项组成的数组, 如果没有删除, 返回一个空数组

   var arr = ['小乔', '大乔', '亚瑟', '吕布', '貂蝉'];

   // 删除

   var a2 = arr.splice(3, 2);

   console.log(arr);

   console.log(a2);

   // 添加: 不需要删除, 删除个数为0

   // 如果起始位置大于数组长度, 直接添加在数组的末尾

   arr.splice(1, 0, '亚索', '女枪', '李白');

   console.log(arr);

   // 替换: 添加几个就删除几个

   arr.splice(1, 2, '米莱迪', '韩信');

   console.log(arr);

4、排序

1. 选择排序

• 拿数组的每一项和后面的每一项进行比较, 如果后面的比前面的小, 互换位置

   var arr = [1,2,3,4,1,2,3,4,12,4,46,54,2];

   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);

2. 冒泡排序

• 相邻的两项依次进行比较, 如果后面的小于前面的就互换位置

   for(var i = 0; i < arr1.length; i++){ // 循环次数

          for(var j = 0; j < arr1.length - i; j++){ // 每次循环的排序

              if(arr1[j] > arr1[j+1]){

                  var temp = arr1[j];

                  arr1[j] = arr1[j+1];

                  arr1[j+1] = temp;

              }

          }

    }

   console.log(arr1);

3. sort方法

   1. 数组.sort([参数]); 直接对原数组进行排序

   2. 没有参数： 默认按照从小到大的顺序排序, 默认按照字符串的顺序排序

   3. 有参数：参数是一个函数, 函数有2个形参,

      设置返回值时:

      ​ 第一个形参-第二个形参, 按照从小到大

      ​ 第二个形参-第一个形参, 按照从大到小

   var arr = [1, 3, 2, 4, 2, 5, 6, 11, 12, 22];

   console.log(arr.sort());

   arr.sort(function(x, y){

                  return y - x;

                  // return x - y;

   });
   console.log(arr);

5、其他方法

1. join: 数组.join(‘拼接符’);

2. reverse: 数组.reverse(); 将数组翻转

   注意： 改变原数组

   arr.reverse();

   console.log(arr);

3. concat: 数组a.concat(b, c, d, 项1, …, 项2);

   将数组b拼接到数组a上, 返回拼接以后的新数组, 原数组不会改变

   var arr = [1, 2, 3];

   var b = [4, 5, 6];

   var m = arr.concat(b, '猜一猜', b);

   console.log(m);

   console.log(arr, b);

4. indexOf: 数组.indexOf(要查找的项, [起始下标]); 从左往右查找, 找得到的时候返回第一个找到的下标, 找不到返回-1

   • 注意: 查找的项与数组中的项必须完全一致(全等)

   • ie8及以下不支持

5. lastIndexOf: 数组.lastIndexOf(要查找的项, [起始下标]); 从右向左查找, 找得到的时候返回第一个找到的下标, 找不到返回-1

   // [1, 2, 3, 4, 5, 6, "猜一猜", 4, 5, 6]

   console.log(m.indexOf(1)); // 0

   console.log(m.indexOf('4')); // -1

  
   // lastIndexOf: 数组.lastIndexOf(要查找的项, [起始下标]); 从右向左查找, 找得到的时候返回第一个找到的下标, 找不到返回-1

   console.log(m.lastIndexOf(4)); // 7

   console.log(m.lastIndexOf(4, 6)); // 3

6、迭代方法

方法	含义
数组.every(function(value, index, array){}	数组的每一项都为true才返回true
数组.some(function(value, index, array){}	数组的每一项都为false才返回false
数组.filter(function(value, index){}	满足条件的元素挑选出来
数组.map(function(value, index, array){})	对数组中的每一项运行给定的函数, 返回每次函数调用的结果组成的一个新数组
数组.forEach(function(value, index, array){});	没有返回值, 就是一个循环

1. every: 针对数组的每一项做一些判断, 如果所有的项判断的结果都为true, 返回的结果就是true, 如果有一个为false, 返回结果就为false

   语法: 数组.every(function(value, index, array){
   value: 数组的每一项
   index:索引
   array: 数组本身
   ​ });

   var s = arr.every(function(value, index, array){

       console.log(value, index, array);

       return value >= 1;

   });

   console.log(s);

2. some: 针对数组的每一项做一些判断, 如果所有的项判断的结果都为false, 返回的结果就是false, 如果有一个为true, 返回结果就为true

   语法: 数组.some(function(value, index, array){

   value: 数组的每一项
   index:索引 array: 数组本身

   });

   var m = arr.some(function(value, index, array){

       console.log(value, index, array);

       return value >= 15;

   });
   console.log(m);

3. filter: 针对数组中的元素去做一些判断, 满足条件的元素挑选出来, 组成一个新数组并且返回回来

   数组.filter(function(value, index){

   value: 数组的每一项
   index:索引

   });

   arr = [3,4,5,6,2,1,3,4,5];

   var s = arr.filter(function(value, index){

       console.log(value, index);

       return value >=3;

   });

   console.log(s);

4. map: 对数组中的每一项运行给定的函数, 返回每次函数调用的结果组成的一个新数组

   数组.map(function(value, index, array){});

   var mn = arr.map(function(value, index, array){

               console.log(value, index, array);

               return value * value + index;

   });

   console.log(mn);

5. forEach: 对数组中的每一项运行给定的函数,没有返回值, 就是一个循环

   数组.forEach(function(value, index, array){});

   var sn = arr.forEach(function(value, index, array){

       console.log(value, index, array);

       array[index] = 1;

       // return value * value + index;

   });

   console.log(sn); // undefined

   console.log(arr);

7、localCompare

• 要排序的项.localCompare(对比的排序项, [语言]);

• 不传语言, 默认按照本地环境语言对比

• zh–中文 en—英文

   var arr = [

    { name: '张三', num: 78 },

    { name: '李四', num: 38 },

    { name: '王五', num: 58 },

   ];

   // 要排序的项.localCompare(对比的排序项, [语言]);

   // 不传语言, 默认按照本地环境语言对比

   // zh--中文  en---英文

   arr.sort(function(a, b){

   // console.log(a, b);

   return a.name.localeCompare(b.name, 'zh');

  });

  console.log(arr);

六、DOM

文档对象模型, 是W3C推荐的处理可拓展标志性语言的标准编程接口

浏览器生成页面时形成的树状结构, 用来表示页面的内部结构, 成为DOM树

节点

• 类型: nodeType, 1-12数字, 标签-1, 属性-2, 文本-3, 注释-8, 文档-9

• 名字: nodeName, 所有标签名字都是大写

• 节点的内容: nodeValue, 只有文本节点才有内容

节点获取	语法
获取子节点	节点.children \节点.childNodes
获取父节点	节点.parentNode \节点.offsetParent
获取首节点	父元素.firstChild \父元素.firstElementChild
获取尾结点	父元素.lastChild\父元素.lastElementChild
获取上一个兄弟节点	节点.previousSibling\节点.previousElementSibling
获取下一个兄弟节点	节点.nextSibling\节点.nextElementSibling

节点操作	语法
创建标签节点	document.createElement(‘标签名’)
创建文本节点	document.createTextNode(‘要显示的内容’)
添加节点	父节点.appendChild(子节点)
在某个节点之前添加节点	父节点.insertBefore(要追加的节点, 参考节点)
删除自身及子元素	父节点.remove()
删除某个子节点	父节点.removeChild(要移除的节点)
替换节点	父节点.replaceChild(新节点, 参考节点)
克隆节点	参考节点.cloneNode(boolean)

1. 获取子节点

节点.children: 非标准属性, 获取的标签子节点(ie8及以下含注释节点)

节点.childNodes: 标准属性, 获取到文本节点(ie8及以下只返回标签节点)

   var a = document.getElementsByTagName('a')[0];

   console.log(a.children); // HTMLCollection

   console.log(a.childNodes); // NodeList

   for(var i = 0; i< a.children.length; i++){

         var s = a.children[i];

         console.log(s, s.nodeType, s.nodeName, s.nodeValue);

         if(s.nodeType == 1){ // 标签---span

         console.log(s.childNodes, s.childNodes[0].nodeValue, '1----');

         }

    }

2. 获取父节点

节点.parentNode: 直接父元素

节点.offsetParent: 获取距离节点最近的定位父元素, 如果没有, 会找到body

   var span1 = document.getElementsByClassName('span1')[0];

   console.log(span1.parentNode);

   console.log(span1.offsetParent);

3. 获取其他节点

1. 获取首节点

   父元素.firstChild: 标准浏览器中会获取到文本节点, 在ie678获取到标签节点

   父元素.firstElementChild: 获取到标签节点, ie678不支持

   兼容: 父元素.firstElementChild || 父元素.firstChild

   var ul = document.getElementsByTagName('ul')[0];

   console.log(ul.firstChild);

   console.log(ul.firstElementChild);

   // 处理兼容 ||  从左到右, 第一个条件为真,直接返回第一个条件的结果, 当第一个条件为假的时候, 判断第二个条件, 返回第二个条件的结果

   console.log(ul.firstElementChild || ul.firstChild);

2. 获取尾结点

   父元素.lastChild: 标准浏览器中会获取到文本节点, 在ie678获取到标签节点

   父元素.lastElementChild: 获取到标签节点, ie678不支持

   兼容: 父元素.lastElementChild || 父元素.lastChild

   console.log(ul.lastChild);

   console.log(ul.lastElementChild);

   console.log(ul.lastElementChild || ul.lastChild);

3. 获取上一个兄弟节点

   节点.previousSibling: 标准中得到文本节点,在ie678获取到标签节点

   节点.previousElementSibling: 获取到标签节点, ie678不支持

   var box = document.getElementsByTagName('li')[2];

   console.log(box);

   console.log(box.previousSibling);

   console.log(box.previousElementSibling);

   console.log(box.previousElementSibling || box.previousSibling);

4. 获取下一个兄弟节点

   节点.nextSibling: 标准中得到文本节点, 在ie678获取到标签节点

   节点.nextElementSibling: 获取到标签节点, ie678不支持

   console.log(box.nextSibling);

   console.log(box.nextElementSibling);

   console.log(box.nextElementSibling || box.nextSibling);

4. 创建节点

创建标签节点： document.createElement(‘标签名’);

创建文本节点： document.createTextNode(‘要显示的内容’);

   var li = document.createElement('li');

   var text = document.createTextNode('这是一个新的li');

   console.log(li);

   console.log(text);

   // 将文本节点添加到标签节点中

   li.appendChild(text);

   console.log(li);

5. 添加节点

注意： 如果追加一个已经存在的元素, 而是发生物理位移

1. 追加节点 ： 父节点.appendChild(子节点);

2. 在某个节点之前追加节点 ： 父节点.insertBefore(要追加的节点|新节点, 参考节点);

   ul.appendChild(li);

   // ul1.appendChild(li);

   var lis = document.getElementsByTagName('li');

   // ul1.appendChild(lis[0]);

   ul.insertBefore(li, lis[2]);

6. 删除节点

1. 删除自身及子元素 ： 父节点.remove();

2. 删除某个子节点 ： 父节点.removeChild(要移除的节点);

   ul1.remove();

   ul.removeChild(lis[0]);

7. 替换节点

父节点.replaceChild(新节点, 参考节点);

   ul.replaceChild(li, lis[0]);

8. 克隆节点

参考节点.cloneNode(boolean);

true: 克隆标签和内容, 克隆其中的所有子节点

false: 默认false, 只克隆标签, 不克隆其中的内容

注意: 克隆出来的节点是一个新节点, 变量接收, 不会直接显示在页面中

   var newLi = li.cloneNode(true);

   console.log(newLi);

   ul.appendChild(newLi);


   var newUl = ul1.cloneNode(true);

   console.log(newUl);

   document.body.appendChild(newUl);

七、获取元素的方式

方法	语法
Id获取	document.getElementById(‘id’)
标签名获取	document.getElementsByTagName(‘标签名’)
类名获取	document.getElementsByClassName(‘类名’)
querySelector获取	document.querySelector(‘选择器’)
querySelecorAll获取	document.querySelecorAll(‘选择器’);

1. 获取符合选择器的条件的第一个标签:

   ​ document.querySelector(‘选择器’);

   ​ 选择器写法与css的一致

2. 获取符合选择器的条件的元素的集合:

   ​ document.querySelecorAll(‘选择器’);

   var li = document.querySelector('.b.a');
   
   console.log(li);
   
   console.log(document.querySelector('#one')); // 


   console.log(document.querySelector('li')); // 


   console.log(document.querySelector('.a')); // 这是第1个span

   console.log(document.querySelector('.box,.a')); // 这是第1个span

   console.log(document.querySelector('.box .a')); // 这是第4个span

   console.log(document.querySelector('.a.b')); // 这是第4个span

   console.log(document.querySelector('li:nth-child(3)'));

   console.log(document.querySelector('li[class]'));

   console.log(document.querySelector('li[class=box]'));

   console.log(document.querySelector('li:first-child'));

   
   console.log(document.querySelectorAll('li')); // 拿到所有li的标签

   console.log(document.querySelectorAll('.a')); // 拿到所有类名为a的标签

   console.log(document.querySelectorAll('.box .a')); // 拿到所有类名为box的子元素类名为a的标签

   
   var lis = document.getElementsByTagName('li');

   var lis1 = document.querySelectorAll('li');

   var ul = document.getElementsByTagName('ul')[0];

   // 动态性, className与tagName获取的标签具有动态性

   // querySelectorAll不具有动态性, 获取的时候存在就能拿到, 不存在就拿不到

   ul.innerHTML += '
111111111111
';

   console.log(lis);

   console.log(lis1);

八、节点属性操作

1 、点的方式

• 获取: 元素.属性名

• 设置: 元素.属性名 = 属性值;

  ​ box.id box.className = ‘a’;

2、[]的方式

• 获取: 元素[‘属性名’]
• 设置: 元素[‘属性名’] = 属性值;

3、获取: 元素.getAttribute(‘属性名’)

4、 设置: 元素.setAttribute(‘属性名’, ‘属性值’)

5、 移除: 元素.removeAttribute(‘属性名’)

问题: 1.2不能去操作自定义属性

3.4.5既可以操作固有属性也可以操作自定义属性, 并且html上可见

   var div = document.querySelector('div');

   console.log(div.className);

   console.log(div['className']);

   console.log(div.tag); // undefined

   console.log(div['tag']); // undefined

  
   console.log(div.getAttribute('class'));

   console.log(div.getAttribute('tag')); // 123

   

   console.log(div.setAttribute('id', 'b'));

   console.log(div.setAttribute('n', 'ttt'));

   
   div.id = '';

   div.removeAttribute('id');

6、快速获取表格元素的方式

   // 快速获取表格元素的方式

   var table = document.getElementsByTagName('table')[0];
 

   // 获取表格中的元素

   console.log(table.tHead); // 获取head, 直接元素

   console.log(table.tFoot); // 获取foot, 直接元素

   console.log(table.tBodies); // 获取表格体body, 集合

   console.log(table.rows); // 获取到整个表格的行

   console.log(table.tBodies[0].rows); // 获取指定表格体的所有行

   

   console.log(table.cells); // undefined

   // 只有行中才有单元格

   console.log(table.rows[1].cells);

   

   // 添加行--->添加单元格--->创建单元格--->标签+内容--->单元格添加到tr--->tr添加到tbody

   var tr = document.createElement('tr');

   

   var td = document.createElement('td');

   td.innerText = '123';

   tr.appendChild(td);

   

   var td1 = document.createElement('td');

   td1.innerText = '123111';

   tr.appendChild(td1);

   

   var td2 = document.createElement('td');

   td2.innerText = '123111';

   tr.appendChild(td2);

   

   var td4 = document.createElement('td');

   td4.innerText = '123111';

   tr.appendChild(td4);

   

   table.tBodies[0].appendChild(tr);