原生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")
})