获取页面的元素

补充：qs中的选择器很多都可以按照css的方式来写，例如div>span:nth-child(2)
document.documentElement(html)
document.body(body)
document.head(head
document.all(所有元素) 这个api在ie浏览器中是true，在其他浏览器中永远是false，是为了向下兼容

页面元素

每一个页面元素都是一个对象。
一个元素以div为例，一共有六层原型。
第一层，div的原型是HTMLDivElement.prototype
第二层，HTMLDivElement的原型是HTMLElement.prototype
第三层，HTMLElement的原型是Element.prototype
第四层，Element的原型是Node.prototype
第五层，Node的原型是EventTarget.prototype
第六层，EventTarget的原型是Object.prototype

元素的增删改查

增

1.标签的创建，document.createElement(‘div’),在标签中添加标签，div1.appendChild(‘div’)，因为创建的标签一开始实在js线程中，因此要加入页面里，这是节点方法。
注意：如果使用.createElement来创建节点中appendChild如果同时对两个标签添加，那么后添加的会覆盖前添加的。但是使用cloneNode则可以存放多处。
注意：如果是把已经有的元素变为别人的子元素，那么原来的会清除，即这是一个移动操作。
2.使用element方法创建文本则更容易一些，div.innerHTML=’content’或者div.textContent=’content’,此时不需要加入页面中。

删

1.在父节点中使用removeChild(‘div’)
2.直接在要删除的节点使用，div.remove()，老版ie不适用
这样删除的元素，还在内存中，只是不再DOM树中。要使用null释放内存。

改

1.修改元素的class，使用div.className=’div1’，这不会在基础上添加，只会覆盖想要添加class名，使用div.classList.add(‘div2’)，这样不会修改原来的class
2.修改元素的css样式，div.style=’…’，同样，这种方式会覆盖div.style.color=’’，使用这种方式就可以单独修改样式了，如果原本css样式是多词的例如background-color，在dom操作时就变成驼峰命名。
3.设置自定义属性，使用div.setAttribute(‘属性名’,’属性值’)，使用div.getAttribute来获取自定义 注意，自定义如果用data-来开头，则可以通过div.dataset来获取自定义属性，也可以通过div.dataset.属性名来设置，设置结果为data-x：属性名。
4.修改文本内容，div.innerText(推荐不用，不是标准)，div.textContent=’内容’，这两种没有基本没有区别。但是上面两种方法的内容不能被html识别，要使用div.innerHTML=’hi‘，这样加粗有效。textContent查看内容会跳过内部的html内容，内部的文本不会跳过。

查

1.除了元素的自定义属性外，基本上元素属性的读取和对象键值的读取差不多，使用div.className,div.style等等就可以读取。
注意：在获取a标签的href时，浏览器会加工a标签的地址，例如写入的是/xxx，浏览器会加入http://.......，使用getAttribute来获取原本的地址。
2.查看元素的子元素，使用div.childNodes，或者div.children，这两个有所区别，前一个的是捕获所有的子节点，因此是包括所有的文本节点和标签节点，例如div里面有一个div标签，因为包含前后的空格文本，所以有三个子节点。后者是element方法，因此不会包括文本节点，上例的子元素就只显示div。
其他查看子元素还有div.firstChild div.lastChild
3.查看同级元素 div.previousSibling(获取上一个同级元素) div.nextSibling(获取下一个元素) 这两个都会包含文本节点。div.previousElementSibling(可以避开文本节点) div.nextElementSibling(同样避开文本节点)
4.查看父级元素，div.parentNode或者div.parentElement，node是w3c标准，element是ie的标准，如果nodetype不是1，那么不能用element获取，换句话说，element只能获取标签元素。

设置元素的事件

1.修改元素的on事件，例如div.onclick=()=>{}，但是实际上onclick是使用call来进行调用的，例如div.onclick.call(div,event)，会把函数中的this绑定到div上，并且传入事件的对象，里面包含事件的相关信息。
2.使用addEventListener修改事件

DOM的跨线程操作

浏览器对于页面的渲染和JS的线程是两个线程，每次操作JS线程，如果改动了页面的DOM树，浏览器会重新渲染页面，因此DOM操作会速度慢。但是对同一元素的连续操作，浏览器可能会合并为一次操作（看浏览器的渲染逻辑），因此在连续操作中加入另外的操作，可以使渲染过程分开进行。

自定义属性的修改

如果是页面元素的标准属性，对属性的修改会自动同步到页面中，但是自定义属性只有data-开头的属性会被自动同步到页面中，其他自定义属性是不会自动同步到页面中的。换句话说，data-开头的自定义属性，浏览器会将JS线程中它的修改自动同步给渲染引擎，但是其他的不会。