JavaScript知识点-周3.md

一、时间对象

创建一个原生的时间对象, 对象身上各种的属性和方法 var date = new Date(); // 当前时间 console.log(typeof date); // object 获取本地状态时间 // 本地状态时间 console.log(date.toLocaleString()); // 2020/5/6 下午2:48:01 console.log(date.toLocaleDateString()); // 2020/5/6 console.log(date.toLocaleTimeString()); // 下午2:49:12 单个时间 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

二、创建时间

单独创建 // 创建时间 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); 字符串创建 // 创建未来时间对象 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); 获取时间戳: Date.parse(字符串格式化时间); // Date.parse(字符串格式化时间) 得到时间戳 console.log(Date.parse('2020-12-12 00:00:00')); // 1607702400000 关于时间格式的方法 获取指定时间 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

获取特定格式时间 格式时间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')); // 只含秒的时间戳

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

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

单独时间的获取和设置: 加前导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);

判断时间方法

早于 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 晚于 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 相等 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, 判断月份是否相等, 年份必须相同; 是否是同一个年份、月份、日期、小时。。。。 两者之间 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 判断是否是闰年 console.log(moment().isLeapYear()); // true console.log(moment('2021-12-31').isLeapYear()); // false 当前时间的毫秒数 console.log(Date.now()); console.log(moment().format('X')); // 当前时间的秒数

四、字符串

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

长度: .length

charAt()： 指定下标的字符

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

查找字符

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

截取

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之后, 在按照上面的规则进行截取

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

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)); // 起始下标为负数,从右往左数几位开始截取

转大小写:

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

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

var str = 'FGFHAahhsjaSDgwADF'; // 转小写: 字符串.toLowerCase(); console.log(str.toLowerCase()); // fgfhaahhsjasdgwadf // 转大写: 字符串.toUpperCase(); console.log(str.toUpperCase()); // FGFHAAHHSJASDGWADF // 用于验证码、验证字符正确与否、封装函数

将字符串分割成数组

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

var str = '优学习字符串分割成数组'; console.log(str.split(',')); console.log(str.split('一')); console.log(str.split('')); // 每个字符会被拆成一项 console.log(str.split('优')); // 2项

将数组拼接成字符串

数组.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

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

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

var str = '今天是个好日子, 今天是个周四, 今天之后在上两天课就放假了'; // 替换字符: 字符串.replace(要替换掉的字符, 要替换进来的字符); // 一次只能替换一个位置的字符 console.log(str.replace('今天', '5月7号'));

五、数组

1、数组的概念和创建

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

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

创建方式:

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

构造函数创建

注意： 如果构造函数中传一个参数并且这个参数是数字时, 表示的是创建出来的数组的长度, 每一项存储为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、排序

选择排序 拿数组的每一项和后面的每一项进行比较, 如果后面的比前面的小, 互换位置 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); 冒泡排序 相邻的两项依次进行比较, 如果后面的小于前面的就互换位置 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);

sort方法

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

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

有参数：参数是一个函数, 函数有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、其他方法

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

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

注意： 改变原数组

arr.reverse(); console.log(arr);

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

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

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

ie8及以下不支持

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){});没有返回值, 就是一个循环

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

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

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

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

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. 获取其他节点

获取首节点

父元素.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);

获取尾结点

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

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

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

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

获取上一个兄弟节点

节点.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);

获取下一个兄弟节点

节点.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. 添加节点

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

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

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

ul.appendChild(li); // ul1.appendChild(li); var lis = document.getElementsByTagName('li'); // ul1.appendChild(lis[0]); ul.insertBefore(li, lis[2]);

6. 删除节点

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

删除某个子节点 ： 父节点.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(‘选择器’);

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

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

​ 选择器写法与css的一致

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

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

var li = document.querySelector('.b.a'); console.log(li); console.log(document.querySelector('#one')); // <li id="one"></li> console.log(document.querySelector('li')); // <li id="one"></li> console.log(document.querySelector('.a')); // <span class="a">这是第1个span</span> console.log(document.querySelector('.box,.a')); // <span class="a">这是第1个span</span> console.log(document.querySelector('.box .a')); // <span class="a b">这是第4个span</span> console.log(document.querySelector('.a.b')); // <span class="a b">这是第4个span</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 += '<li>111111111111</li>'; 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);