原生Js操做DOM

查找DOM

.querySelectorAll()，它接受包含一个CSS选择器的字符串参数，返回一个表示文档中匹配选择器的全部元素的NodeList元素。

.querySelector(),返回第一个匹配的元素

<div class="wrap">
    <div class="header">header</div>
</div>

<script>
    var oHeader = document.querySelector(".wrap .header");

    console.log(oHeader.innerHTML)/*header*/
</script>

缺点：.querySelector()或者.querySelectorAll()获取到的结果不是实时的，因此当咱们动态地添加一个匹配该选择器的元素的时候，元素集合不会更新。

    var elements1 = document.querySelectorAll('div');
    var elements2 = document.getElementsByTagName('div');
    var newElement = document.createElement('div');

    document.body.appendChild(newElement);
    elements1.length === elements2.length // false

元素列表

<div class="wrap">
    <div class="header">header</div>
</div>

<script>
    var oHeader = document.querySelector(".wrap");

    console.log(oHeader.children);
    console.log(oHeader.firstChild);
    console.log(oHeader.lastChild);
    console.log(oHeader.previousSibling);
    console.log(oHeader.nextSibling);
    console.log(oHeader.parentNode);
    console.log(oHeader.parentElement);
</script>

修改class和属性

修改元素的class像下面的代码这样简单：

oHeader.classList.add("active");
oHeader.classList.remove("wrap");
oHeader.classList.toggle("isError");

实例：

oHeader.classList.add("active");

oHeader.classList.remove("wrap");

oHeader.classList.toggle("active");

还有.getAttibute(), .setAttribute()和.removeAttribute()这三个方法。这些方法直接修改的是元素的HTML属性（与DOM属性相对），所以会使浏览器从新渲染。浏览器从新渲染不只比只是设置DOM属性代价更高，并且还会产生不指望的后果。

添加CSS样式

var oHeader = document.querySelector(".wrap");

oHeader.style.width = "160px";
oHeader.style.height = "160px";
oHeader.style.backgroundColor = "red";

若是咱们想得到CSS规则的值，咱们能够经过.style属性。然而，经过它只能拿到咱们明确设置过的样式。想拿到计算后的样式值，咱们能够用.window.getComputedStyle()。它能够拿到这个元素并返回一个CSSStyleDeclaration。这个返回值包括了这个元素本身的和继承自父元素的所有样式。

修改DOM

<div class="wrap">
    <div class="header">header</div>
</div>

<script>
    var oWrap = document.querySelector(".wrap");

    var oP = document.createElement("p");
    oP.innerHTML = "原生Js";
    oWrap.appendChild(oP);
</script>

元素属性

每一个元素都有.innerHTML和.textContent（还有.innerText，跟.textContent相似，可是有一些重要的区别。它们分别表示HTML内容和纯文本内容。它们是可写的属性，也就是说咱们能够直接修改元素和它们的内容：

<div class="wrap">
    <div class="header">header</div>
</div>

<script>
    var oHeader = document.querySelector(".header");

    oHeader.innerHTML = "active"
</script>

像上面的代码那样向HTML添加标记是一般是一个很差的注意，由于这样是丢失以前对影响元素的属性作的修改（除非咱们把那些修改做为HTML属性而保留下来和已经绑定的事件监听。设置.innerHTML能够适合用在须要彻底丢弃原来的而替换成新的标记的场景，好比服务端渲染。因此添加元素这样作比较好：

<div class="wrap">
    <div class="header">header</div>
</div>

<script>
    var oWrap = document.querySelector(".wrap");
    
    var oP = document.createElement("p");
    oP.innerHTML = "原生Js";
    oWrap.appendChild(oP);
</script>

可是这个办法会引发两次浏览器的从新渲染-每次添加元素都会渲染一次-而用设置.innerHTML的办法的话只会从新渲染一次。咱们能够先把全部的节点组合在一个DocumentFragment里，而后把这一个片断添加到DOM里，这样能够解决这个性能问题。

<div class="wrap">
    <div class="header">header</div>
</div>

<script>
    var oHeader = document.querySelector(".header");

    var fragment  = document.createDocumentFragment();
    var oP = document.createElement("p");
    oP.innerHTML = "active";

    fragment.appendChild(oP);

    oHeader.appendChild(fragment)
</script>

事件监听

<div class="wrap">
    <div class="header">header</div>
</div>

<script>
    var oHeader = document.querySelector(".header");

    oHeader.onclick = function onClick(event) {
        console.log(event.type + "got fred")
    }
</script>

这多是最知名的绑定事件监听的方法

可是这是一般应该避免采用的方法。这里，.onclick是一个元素的属性，也就是说你能够修改它，可是你不能用它再绑定其余的监听函数-你只能把新的函数赋给它，覆盖掉旧函数的引用。

咱们能够用更增强大的.addEventListener()方法来尽情地添加各类类型的各类事件的监听器。它接受三个参数：事件类型（好比click），一个不管什么时候在这个绑定元素上该事件发生都会触发的函数（这个函数会获得一个事件对象传进去做为参数）和一个可选的配置参数。

var oHeader = document.querySelector(".header");

oHeader.addEventListener("click",function (event) {
    console.log(event.type + "got fired")
})