【js】Web APIs易忘总结

说这个不重要以后用vue用不上，忘老快了大概又看了一遍留个系统印象。

一、一些傻瓜错误

1、querySelectorAll没加All。

2、querySelector(‘.test’) 选择器加点了/忘了加点。

3、拼写错误。

4、调用属性加括号了，调用方法没加括号。

二、老忘的知识点们

1、innerText只能管文本的，不像innerHTML还能解析标签；

2、用获取的对象给改元素属性的时候，如果用style要设置属性的方法，可以略过中间那个属性，设置的值都要加引号变字符串形式的，例如：obj.style.translate=“10px 10px”；

3、元素.className = "active"是使用新值换旧值；

4、元素.classList.toggle(“类名”);//有就删掉，没有就加上。

5、自定义属性，上面设置了data-name，调用用的是dataset.name；

6、定时器：let 变量名 = setInterval(函数, 间隔时间);
clearInterval(变量名);

延时器：setTimeout；

7、事件对象常用属性（没用过）：

type：获取当前的事件类型；

clientX / clientY：获取光标相对于浏览器可见窗口左上角的位置；

offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置；

key：用户按下的键盘键的值，现在不提倡使用 keyCode；

8、DOM.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)；

9、阻止事件冒泡的：事件对象.stopPropagation()；

阻止默认行为的：e.preventDefault();

10、解绑事件：removeEventListener；

11、mouseover 和 mouseout 会有冒泡效；mouseenter 和 mouseleave 没有冒泡效果 (推荐)；

12、事件委托，给父级设置，用的时候记得if(e.target.tagName===“DIV”)这种判断一下；

使用target获取到的节点名称全部为大写：

获取文本内容：tar.textContent
获取父级节点：tar.parentNode
获取节点名称：tar.nodeName

13、DOMContentLoaded 和load页面加载事件；

14、一些事件：

scrollLeft 和 scrollTop 被卷去的头部和左侧 配合页面滚动来用，可读写；

clientWidth 和 clientHeight 获得元素宽度和高度 不包含border,margin，滚动条 ；用于js获取元素大小，只读属性；

offsetWidth 和 offsetHeight 获得元素宽度和高度 包含border、padding，滚动条等，只读；

offsetLeft 和 offsetTop 获取元素距离自己定位父级元素的左、上距离 获取元素位置的时候使用，只读属性；

element.getBoundingClientRect()方法 方法返回元素的大小及其相对于视口的位置。

15、+new Date（）事件戳 差值算；

16、找父节点：子元素.parentNode；

找子节点（仅获得所有元素节点，返回的是伪数组）：父元素.children；

下一个兄弟节点：nextElementSibling 属性；

上一个兄弟节点：previousElementSibling 属性；

新增：createElement（‘ ’）

向元素后面插入节点，插入在最后的：父元素.appendChild(要插入的元素)；

向元素前面插入节点：父元素.insertBefore(要插入的元素, 在哪个元素前面);

克隆：元素.cloneNode(布尔值);

删除：父元素.removeChild(要删除的元素);

17、一些移动端的事件：touchstart，touchmove，touchend；

18、 https://www.swiper.com.cn/ 插件，轮播图啥的；

19、重绘和回流；

20、location常用属性和方法：

href属性获取完整的 URL 地址，对其赋值时用于地址的跳转；search属性获取地址中携带的参数，符号 ？后面部分；hash属性获取地址中的啥希值，符号 # 后面部分；reload** 方法用来刷新当前页面，传入参数 true 时表示强制刷新。

21、localStorage.setItem(key, value);；

localStorage.getItem(key);

localStorage.removeItem(key);

JSON.stringify(复杂数据类型)；

JSON.parse(JSON字符串);

22、regObj.test(被检测的字符串)；

regObj.exec(被检测字符串)