四、关于DOM操作
1、选择器
//动态选择器，添加删除后可以立即响应。里面只有名字，不带#这些操作符
getElementById(“ID”)
getElementsByName(“Name”)
getElementsByTagName(“TagName”)
//j静态选择器querySelectorAll() 返回NodeList，querySelector返回第一个匹配的
document.querySelector("body");//放回body节点
document.querySelector("#k");//返回id为k的节点
document.querySelector("#k span");//返回id为k的节点下的第一个span节点
document.querySelector("#k").querySelector("span");//返回id为k的节点下的第一个span节点
document.querySelectorAll("li");//返回所用tagName为li的节点集合（NodeList）
document.querySelectorAll("div .li");//返回class为li的div
2、改变样式
.style
.style.cssText
.setProperty('color', 'red')
.setAttribute('style', 'color: red')
.classList.add('className')
3、addEventListener()和onClick
4、addEventListenner传参数
https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener
el.addEventListener("click", function(){modifyText("four")}, false);
//箭头函数
el.addEventListener("click", () => { modifyText("four"); }, false);
5、 (document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行
简化写法
window.onload没有简化写法
(function(){});
6、document.documentElement是<html>
image.png
一般document.documentElement.clientHeight返回窗口大小
7、window.location.href获取当前页面地址
8、检查移动设备
const detectDeviceType = () =>
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
? 'Mobile'
: 'Desktop';
9、Element.getBoundingClientRect()
image.png
为了跨浏览器兼容，请使用
window.pageXOffset 和 window.pageYOffset 代替 window.scrollX 和 window.scrollY。10、重绘和回流
reflow回流
1.首当其冲自然是dom树结构变化，比如你删除或者添加某个node.
2.元素几何属性变化，包括margin,padding,height,width,border等
3.页面渲染初始化
4.获取某些属性。虽然浏览器引擎可能会针对重排做了优化，比如Opera，它会等到有足够 数量的变化发生，或者等到一定的时间，或者等一个线程结束，再一起处理，这样就只发生一次重排。但除了render树的直接变化，当获取一些属性时，浏览器为取得 正确的值也会触发回流。这样就使得浏览器的优化失效了。这些属性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。所以，在多次使用这些值时应进行缓存。（这段我是直接引用的。。。）
5.浏览器窗口发生变化-resize事件发生时
repaint重绘
颜色改变等
浏览器会有一个flush队列，合并回流和重绘
优化方法 https://www.cnblogs.com/dujingjie/p/5784890.html
1.将那些改变样式的操作集合在一次完事，直接改变className或者cssText
2.让要操作的元素进行离线处理，处理完事以后再一起更新
（1）使用DocumentFragment进行缓存操作，引发一次回流和重绘
课外延伸：
DocumentFragment 节点不属于文档树，继承的 parentNode 属性总是 null。
不过它有一种特殊的行为，该行为使得它非常有用，即当请求把一个 DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。
其实他就是一个游离在DOM树外面的容器，所以你在把它插入文档节点之前，随便给他增删节点都不会引起回流
（2）使用display:none,只引发两次回流和重绘。道理跟上面的一样。因为display:none的元素不会出现在render树
（3）使用cloneNode和replaceChild技术，引发一次回流和重绘（这条其实没太明白）
3.不要经常访问会引起浏览器flush队列的属性，非要高频访问的话建议缓存到变量；
4.将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位；
5.尽量不要使用表格布局，如果没有定宽表格一列的宽度由最宽的一列决定，那么很可能在最后一行的宽度超出之前的列宽，引起整体回流造成table可能需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。
11、requestAnimationFrame()写动画
