在这我们就来把原生JavaScript中一些常用的技术，来与小伙伴们一起学习、一起复习一下那些基础知识。注意收藏!!!
常见DOM操作
获取查找DOM元素
document.getElementById(idName)
通过id查找元素。返回的是元素DOM，如果页面上有多个相同ID的元素，则只会返回第一个元素，不会返回多个，原则上ID唯一的不可重复的，但是......（知道的都懂）
const?dom?=?document.getElementById('xxx')document.getElementsByClassName(className)
通过class查找。返回的是数组结构的DOM列表，想要使用可以用for循环，但是要想用forEach/map等遍历，需要先转化为数组结构
const?doms?=?document.getElementsByClassName('xxx')for(let i = 0; i < doms.length; i++){console.log(doms[i]);}//?若使用forEachArray.from(doms).forEach(ele => console.log(ele));
document.getElementsByTagName(tagName)
通过标签名获取元素。返回的结果跟getElementByClassName一样，使用方式也是相同的。document.querySelector(selectors) |?document.querySelectorAll(selectors)
使用选择器来查找元素。见名知意querySelector获取的是单个的，不管这个选择器可以找到几个元素，只取第一个返回的是找到的DOM元素；querySelectorAll获取的是能找到的全部，返回的是DOM的数组，这个返回的数组和上边用class和tag标签返回的数组更方便点，可以直接用forEach这些。
const?simple?=?document.querySelector('xxx');const doms = document.querySelectorAll('xxx');//?可直接forEach循环doms.forEach(e?=>?console.log(e));
然后再对比下区别吧，用class名和选择器的对比:
<div?class="warp"><p>name<p><p>age<p><div><p>...</p><script>//?目标?获取到warp下面的p元素// 1. 不使用querySelectorAllconst warp = document.getElementsByClassName("warp")[0];const allp = warp.getElementsByTagName(p)// 2.?使用querySelectorAllconst allp = document.querySelectorAll(".warp p")</script>
这样看querySelectorAll使用起来方便许多，但是跟getElementsByClassName比起来是有一些坑点的，曾经遇到过忘记了，但愿道友遇不那个坑，有心可百度看下，这里不过多解释啦
给DOM增加样式
下边代码例子中的domeEle为用上边获取DOM方式获取到的元素，为对单个元素的操作，数组的需要循环进行操作，代码片段均为js片段。
给元素增加样式
domeEle.style?=?'width: 100px;height: 100px;';// 或domeEle.style.width = '100px';domeEle.style.height?=?'100px';
上边这两种方式均增加元素的行间样式，第一种方式比较霸道会重制元素行间所有的style样式。
给元素增加class
//?增加单个class,?增加class元素没有当前class会新增，有则覆盖domeEle.className?=?'aaa';domeEle.classList.add('aaa');domeEle.className += 'aaa';//?增加多个class方式domeEle.classList.add(...['aaa','bbb',?'ccc']);
判断是否有某个class
domeEle.classList.contains('aaa'); // true 为有，false 为无操作DOM上的属性
新增属性???????
domeEle.setAttribute('data-id', '1');//?当然如果愿意这个也可以用来增加class和styledomeEle.setAttribute('class', 'aaa');domeEle.setAttribute('style', 'width: 100px;');
获取属性
const?attrVal?=?domeEle.getAttribute('data-id');删除属性
domeEle.removeAttribute('data-id');DOM元素的增删改查
创建DOM元素
const divEle = document.createElement('div');插入DOM元素???????
domeEle.appendChild(divEle);?//?这样是在元素内部追加在子元素的最后domeEle.insertBefore(divEle,?ele);?//?这样是插入子啊domeEle中ele元素前边，同级元素
删除DOM元素???????
domeEle.remove(); // 删除当前元素domeEle.removeChild(childEle);?//?删除元素中的子元素
替换DOM元素
<body><div class="box"><h1>微信公众号</h1></div><button id="btn">变换</button><script>const btnDom = document.getElementById("btn");const box = document.getElementsByClassName("box")[0];const h1 = document.getElementsByTagName("h1")[0];const h2 = document.createElement("h2");h2.innerText = "码不停息";btnDom.onclick = function () {????????//?替换元素由h2替换h1box.replaceChild(h2, h1);};</script></body>
复制DOM元素???????
const box = document.getElementsByClassName("box")[0];const p = document.createElement("p");p.innerText = "欢迎关注码不停息微信公众号";// 复制一个p 参数true标识深度复制，如果p里面有子节点也复制过来const p2 = p.cloneNode(true);box.appendChild(p);box.appendChild(p2);
遍历DOM元素
上边给出的是获取dom的方法，这里的算是上边获取元素后基础上的扩展方法吧
-
parentNode
查找指定节点的父节点 -
nextSibling
查找指定节点的下一个节点 -
previousSibling
查找指定节点的上一个节点 -
firstChild
查找指定节点的第一个字节点 -
lastChild
查找指定节点的最后一个字节点 -
childElementCount
返回子元素的个数，不包括文本节点和注释 -
firstElementChild
返回第一个子元素 -
lastElementChild
返回最后一个子元素 -
previousElementSibling
返回前一个相邻兄弟元素 -
nextElementSibling
返回后一个相邻兄弟元素
??????注意这里的节点与元素不一样，不信你可以试下???????
<body><div id="box"><p>文件</p><p>文件</p>????</div><script>const box = document.getElementById("box");??????console.log(box.firstChild);?//?text节点（换行）??????console.log(box.firstElementChild);?//?第一个p标签</script></body>
获取元素的宽高尺寸汇总
获取屏幕实际宽高
实际宽高就是设备屏幕的分辨率???????
const?w = window.screen.width;const?h?=?window.screen.height；
获取浏览器宽高
浏览器宽高为当前浏览器展示的宽高，就是浏览器的总尺寸???????
const w = window.outerWidth;const?h?=?window.outerHeight；
获取当前窗口宽高（可视区域尺寸）???????
const?w?= window.innerWidth;const?h?=?window.innerHeight；
获取元素布局宽高
这个获取的元素宽高为元素内容的宽高+元素的内边距(padding)+元素的边框(border)的总尺寸???????
//?domeEle为获取到的元素const?w = domeEle.offsetWidth;const h = domeEle.offsetHeight;
获取元素内容高度
这个获取的为元素内容的宽高尺寸???????
const w = element.scrollWidth;const?h?= element.scrollHeight;
获取滚动后被隐藏的宽高???????
const?w?=?document.documentElement.scrollTop;const?h?=?document.documentElement.scrollLeft;
获取元素滚动区域隐藏后可视范围内的宽高
这个为元素的总宽高-元素超出可视范围部分尺寸???????
const?w?=?element.clientWidth;const?h?= element.clientHeight;
获取元素距离顶部和左边距离???????
const?l?=?element.offsetLeft;const t = element.offsetTop;
JS原生对象
时间对象
常用的一些方法
-
toLocaleDateString()：根据本地时间格式，把Date对象的日期部分转化为字符串
-
toLocaleTimeString()：根据本地时间格式，把Date对象的时间部分转化为字符串
-
toLocaleString()：根据本地时间格式，把Date对象转化为字符串
-
getTime()：获取当前时间戳
时间戳转换为时间yyyy-mm-dd格式
function timestampToTime(timestamp) {if (typeof timestamp != "number") return false;if (timestamp.length === 10) timestamp = timestamp * 1000;const date = new Date(timestamp);Y = date.getFullYear() + "-";M =(date.getMonth() + 1 < 10? "0" + (date.getMonth() + 1): date.getMonth() + 1) + "-";D = (date.getDate() < 9 ? "0" + date.getDate() : date.getDate()) + " ";h =(date.getHours() < 9 ? "0" + date.getHours() : date.getHours()) + ":";m =(date.getMinutes() < 9? "0" + date.getMinutes(): date.getMinutes()) + ":";s = date.getSeconds() < 9 ? "0" + date.getSeconds() : date.getSeconds();return Y + M + D + h + m + s;}
时间格式化方法（通用）
获取年月日，时分秒的就不一一列举了，要注意获取年的是
getFullYear() 而不是 getYear，它们有什么不同可自己敲下就知晓了；还有获取月份的getMonth()获取到的数字也比实际的小1，这些问题这里不过多解释了，可以敲一下加深下记忆，想了解详细可到菜鸟教程或w3cshool上学习下，也可到我们的技术群沟通，欢迎来群里划水和探讨技术，入群方式在文尾。
/*** 时间格式化方法* @param {String|Number} time 时间戳或者其他时间格式例如yyyy-mm-dd h:i:s, 2021-05-13 11:11:11* @param {String} format 要格式化后的时间格式样式，例如{y}-{m}-{d} {h}:{i}:{s} 若需要其他以此为例就可* 改格式化还可输出带星期日历 fromat带上星期{a}即可如 '{y}-{m}-{d} {h}:{i}:{s} {a}' 输出 2021-05-13 11:11:11 星期一* @returns 返回格式化后的时间*/const dateFormat = (time, format) => {if (!time) {return null;};format = format || '{y}-{m}-{d} {h}:{i}:{s}';let date;if (typeof time === 'object') {date = time;} else {if (String(time).length === 10) {time = parseInt(time) * 1000;}date = new Date(time);};const formatObj = {y: date.getFullYear(),m: date.getMonth() + 1,d: date.getDate(),h: date.getHours(),i: date.getMinutes(),s: date.getSeconds(),a: date.getDay()};const timeStr = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {let value = formatObj[key];if (key === 'a') {??????return?'星期'?+?['日',?'一',?'二',?'三',?'四',?'五',?'六'][value];}if (result.length > 0 && value < 10) {value = '0' + value;}return value || 0;});return timeStr;}
Math对象
Math基础内容
-
Math.abs()：取绝对值
Math.abs(-1) // 1-
Math.ceil()：向上取整
Math.ceil(1.1)??//?2-
Math.floor()：向下取整
Math.floor(1.1)??//?1-
Math.round()：四舍五入
Math.round(1.5) // 2-
Math.max()：取最大值
Math.max(1，2，3) // 3-
Math.min()：取最小值
Math.min(1，2，3) // 1-
Math.random()：产生0-1的随机数
Math.random()-
Math.pow()：次方
Math.pow(2,3) // == 2*2*2 == 8-
Math.sqrt()：平方根
Math.sqrt(36)??//?6Math扩展
这里扩展是一些使用技巧和几个常用的方法
-
Math.max和Math.min 最大值和最小值的
const?arr?=?[1, 2, 3];// 获取最大和最小值// 非es6方式Math.max.apply({},?arr)??//?输出 3Math.min.apply({},?arr)??//?输出1//?es6方式Math.max(...arr)?//?输出 3Math.min(...arr)?//?输出?1
-
获取随机数的方法
//?方法一/**?*?获取随机范围的数值，但是这种方式获取的数值为[min,?max)?*?是一个开区间，也就是只会取到max以内的数值，取不到max* @desc 生成指定范围随机数* @param {Number} min* @param {Number} max* @return {Number}*/function randomNum(min, max) {return Math.floor(min + Math.random() * (max - min));}// 方法二/**?*?获取随机范围的数值，这个获取的就是[min,?max]?* 是一个闭区间，可以获取到max的整数* @desc 生成指定范围随机数* @param {Number} min* @param {Number} max* @return {Number}*/function randomNum(min, max) {return Math.floor(min + Math.random() * (max - min + 1));}
-
获取随机色值
/**** @desc 生成指定范围随机数* @param {Number} min* @param {Number} max?*?@return?{Number}?16进制的色值*/function randomNum(min, max) {return Math.floor(min + Math.random() * (max - min));}
文末福利
需要更多教程，微信扫码即可
?
??
? ? ? ? ? ? ? ? ? ?别忘了扫码领取资料哦?????????????????
【高清Java学习线路图】和【全套学习视频及相关资料】???????