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