获取元素位置
getBoundingClientRect()返回一个对象，提供当前元素节点的大小、位置等信息。
#demo {
margin: 10px;
padding: 20px;
border: 1px solid red;
width: 200px;
height: 200px;
}
<div id="demo"></div>
var demo = document.getElementById("demo")
var rect = demo.getBoundingClientRect()
console.log(rect)
//
{
width:242 //元素宽度 包括边框
height:242 //元素高度 包括边框
x:10 //元素左上角相对于视口的横坐标
y:10 //元素左上角相对于视口的纵坐标
left:10 //元素左上角相对于视口的横坐标，与x属性相等
right:252 //元素右边界相对于视口的横坐标（等于x + width）
top:10 //元素左上角相对于视口的纵坐标，与y属性相等
bottom:252 //元素底部相对于视口的纵坐标（等于y + height）
}
让元素位于可视区域
scrollIntoView() 滚动当前元素，进入浏览器的可见区域。接受一个布尔值作为参数，默认为true。
如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐，如果为false，则底部对齐。
生效的前提是当前区域可滚动。
NodeList和HTMLCollection
相同点
- 都是一个类似数组的对象，成员是节点对象。不能使用pop或push之类数组特有的方法。
不同点
- HTMLCollection实例都是动态集合，节点的变化会实时反映在集合中；
NodeList 实例可能是动态集合，也可能是静态集合。只有Node.childNodes返回的是一个动态集合，其他的 NodeList 都是静态集合。 - HTMLCollection实例只能包含元素节点（element），不能包含其他类型的节点。
- HTMLCollection没有forEach方法，只能使用for循环遍历。NodeList有forEach方法。
获取DOM
- getElementsByTagName() 搜索 HTML 标签名，返回符合条件的元素，它的返回值是HTMLCollection实例。
- getElementsByClassName() 根据class类名返回符合条件的元素，返回值是HTMLCollection实例。
- getElementsByName() 根据name属性返回符合条件的元素，返回值是NodeList 。
- querySelectorAll() 根据css选择器返回符合条件的元素，返回值是NodeList 。
- querySelector() 根据css选择器返回符合条件的元素，返回值是第一个匹配的节点。
- getElementById() 根据id返回符合条件的元素，
js操作css
- 元素节点的style属性。
- 元素节点的className属性，返回一个空格分隔的字符串。
- 元素节点的classList属性，指向一个类似数组的对象。
script标签
加载外部脚本时，浏览器会暂停页面渲染，等待脚本下载并执行完成后，再继续渲染。
如果外部脚本加载时间很长，就会造成网页长时间失去响应，浏览器就会呈现“假死”状态，这被称为“阻塞效应”。但是动态生成的script标签不会阻塞页面渲染，也就不会造成浏览器假死。
所以，较好的做法是将<script>标签都放在页面底部，而不是头部。
为了解决脚本文件下载阻塞网页渲染的问题，一个方法是加入defer属性，另一个方法是加入async属性。
- defer属性可以保证浏览器下载脚本文件的时候，不会阻塞页面渲染。而且可以保证执行顺序就是它们在页面上出现的顺序。
- async属性可以保证脚本下载的同时，浏览器继续渲染。无法保证脚本的执行顺序。哪个脚本先下载结束，就先执行那个脚本。
一般来说，如果脚本之间没有依赖关系，就使用async属性，如果脚本之间有依赖关系，就使用defer属性。如果同时使用async和defer属性，后者不起作用，浏览器行为由async属性决定。
window.requestAnimationFrame()
可以将某些代码放到下一次重新渲染时执行，最适用的场合是网页动画。
window.requestIdleCallback()
指定只有当一帧的末尾有空闲时间，才会执行回调函数。
它还可以接受第二个参数，表示指定的毫秒数。如果在指定的这段时间之内，每一帧都没有空闲时间，那么函数fn将会强制执行。
requestIdleCallback(fn, 5000); //函数fn最迟会在5000毫秒之后执行。
回调函数的参数是一个 deadline 对象，有一个方法和一个属性：timeRemaining() 和 didTimeout。
timeRemaining() 方法返回当前帧还剩余的毫秒。这个方法只能读，不能写，一旦这个属性等于0，就把任务分配到下一轮。
didTimeout 属性会返回一个布尔值，表示指定的时间是否过期。
事件
事件捕获指的是从window到触发事件的那个节点，即自上而下的去触发事件。事件冒泡是自下而上的去触发事件。
绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。
<div id="parent">
<div id="child"></div>
</div>
<script>
var parent = document.getElementById('parent')
var child = document.getElementById("child")
window.addEventListener('click', function () {
console.log("window")
}, false)
document.addEventListener('click', function (event) {
console.log("document")
}, false)
parent.addEventListener('click', function (event) {
console.log("parent")
}, false)
child.addEventListener('click', function (event) {
console.log("child")
}, false)
</script>
false为冒泡，控制台打印child，parent，document，window；
true为捕获，控制台打印window，document，parent，child；
有时候我们想要阻止冒泡，使用event.stopPropagation()或event.cancelBubble = true
有时候我们想要阻止事件的默认行为，使用event.preventDefault()或者return false
如果事件不能取消，调用event.preventDefault()会没有任何效果。所以使用这个方法之前，最好用
event.cancelable属性判断一下是否可以取消。
DocumentFragment
DocumentFragment节点代表一个文档的片段，本身就是一个完整的 DOM 树形结构。它没有父节点。
它不属于当前文档，操作DocumentFragment节点，要比直接操作 DOM 树快得多。
一旦DocumentFragment节点被添加进当前文档，它自身就变成了空节点，可以被再次使用。
注意，DocumentFragment节点本身不能被插入当前文档，是它的所有子节点插入当前文档，而不是它自身。
<div id="box">
<p>hello world</p>
</div>
<button id="add">增加</button>
<script>
var box = document.getElementById("box");
var docFrag = document.createDocumentFragment();
var add = document.getElementById("add")
function addP() {
var p = document.createElement('p');
p.textContent = 'Hello World';
docFrag.appendChild(p);
console.log(docFrag.parentNode) //null
console.log(docFrag.childElementCount) //1
box.appendChild(docFrag)
console.log(docFrag.childElementCount) //0
}
add.addEventListener('click', addP, false)
</script>
自定义属性
元素可以自定义data-属性，用来添加数据。data-属性的属性名，只能包含英文字母、数字、连词线（-）、点（.）、冒号（:）和下划线（_）。
Element.dataset属性返回一个对象，可以从这个对象读写data-属性，dataset上面的各个属性返回都是字符串。
//html
<div id="box" data-time-stamp="123" data-time_hour="12" data-time.minute="12" data-time:minute="12"></div>
//js
var box = document.getElementById("box")
console.log(box.dataset)
