如何騷氣的操作DOM（原生js）

近來閒暇，將dom基礎操作筆記整理了一下，不算完整，將持續更新希望對大家有所幫助

目錄

      獲取DOM

1、通過ID獲取：document.getElementById

2、通過name獲取：document.getElementsByName

3、通過class類名選擇：document.getElementsByClassName

4、通過標籤名選擇：document.getElementsByTagName

5、通過css3選擇器選擇：document.querySelector、document.querySelectorAll

    節點指針 

1、第一個子節點和最後一個子節點 firstChild&lastChild 

2、獲取子節點列表 childNodes&chidlren

3、獲取前一個節點 previousSibling&previousElementSibling

4、獲取下一個節點 nextSibling&nextElementSibling

5、獲取父節點 parentNode

    操作節點 

1、創建並插入節點  createElement&appendChild&insertBefore

2、替換節點 replaceChild

3、複製節點 cloneNode

4、刪除節點 removeChild

    操作屬性 

1、獲取屬性 getAttribute

2、設置屬性 setAttribute

3、刪除屬性 removeAttribute

    其他操作——持續更新 

1、獲取或設置節點對象的內容 innerHTML&innerText

---

1、通過ID獲取：document.getElementById

返回一個匹配特定ID的元素，由於元素的 ID 在大部分情況下要求是獨一無二的，所以匹配到的將是一個對象，如果不慎命名了兩個相同的ID，將獲取第一個。

<div id="getId">獲取ID</div>

let getId = document.getElementById('getId')
console.log('ID標籤的內容 = ' + getId.innerText)

2、通過name獲取：document.getElementsByName

匹配每一個帶有指定name屬性的元素，返回一個匹配的對象組成的數組對象，獲取每一個匹配的對象需要循環

    <div name="getName">第一個獲取name</div>
    <div name="getName">第二個獲取name</div>
    <div name="getName">第三個獲取name</div>

    // 公共方法，下文將不展示
    function forFun(item,tab) {
        for (let i of item) {
            console.log(tab+'標籤的內容 = ' + i.innerText)
        }
    }
    let getName = document.getElementsByName('getName')
    forFun(getName,'name')

3、通過class類名選擇：document.getElementsByClassName

匹配每一個指定類名的元素，返回一個由匹配元素組成的數組對象

    <div class="getClass">第一個獲取class</div>
    <div class="getClass">第二個獲取class</div>
    <div class="getClass">第三個獲取class</div>

    let getClass = document.getElementsByClassName('getClass')
    forFun(getClass,'class')

4、通過標籤名選擇：document.getElementsByTagName

匹配沒有個指定標籤名的元素，返回匹配對象的集合

    <p>第一個獲取Tagname</p>
    <p>第二個獲取Tagname</p>
    <p>第三個獲取Tagname</p>

    let getTagname = document.getElementsByTagName('p')
    forFun(getName,'tagname')

5、通過css3選擇器選擇：document.querySelector、document.querySelectorAll

（1）、document.querySelector匹配第一個指定選擇器的元素

返回指定選擇器的元素。

    <div class="parent">
        <span></span>
        <p>第一個css選擇器</p>
        <p>第二個css選擇器</p>
        <p>第三個css選擇器</p>
    </div>

    var parent = document.getElementsByClassName('parent')[0];
    var selector = parent.querySelector('span~p');
    console.log(selector.innerText);

span~p：~是典型的css的匹配選擇器，選擇的是span之後所有同級的p標籤

（2）、document.querySelectorAll，匹配指定選擇器的所有元素

返回匹配的元素組成的數組對象

    var selectorAll = document.querySelectorAll('span~p');
    forFun(selectorAll,'selector');

---

 

 

1、第一個子節點和最後一個子節點 firstChild&lastChild 

如果js用這兩個屬性的話，需要慎重，並不是像我們理解或者css3選擇器的那樣獲取節點，請看下面這個案例：

   <div class="parent">
        <p>第一個孩子</p>
        <p>中間的孩子</p>
        <p>最後的孩子</p>
    </div>
    <div class="parent2"><p>第一個孩子</p><p>中間的孩子</p><p>最後的孩子</p></div>

    let parent = document.getElementsByClassName('parent')[0]
    let parent2 = document.getElementsByClassName('parent2')[0]
    console.log('firstChild = ' , parent.firstChild)
    console.log('lastChild = ' , parent.lastChild)
    parent.firstChild.style.color = 'red'

如圖，style並未起到作用並且報錯了，firstChild元素也不並不是P標籤，接下來看一下parent2的效果

    let parent = document.getElementsByClassName('parent')[0]
    let parent2 = document.getElementsByClassName('parent2')[0]
    console.log('firstChild = ' , parent2.firstChild)
    console.log('lastChild = ' , parent2.lastChild)
    parent2.firstChild.style.color = 'red'
    parent2.lastChild.style.color = 'red'

由這兩個案例可以看出，firstChild和lastChild是識別了空白節點；

既然這兩個屬性用起來很不方便，那就換一個擴展方法：firstElementChild&lastElementChild

    <div class="parent">
        <p>第一個孩子</p>
        <p>中間的孩子</p>
        <p>最後的孩子</p>
    </div>

    let parent = document.getElementsByClassName('parent')[0]
    parent.firstElementChild.style.color = 'red'
    parent.lastElementChild.style.color = 'red'
    console.log(parent.firstElementChild)
    console.log(parent.lastElementChild)

 

2、獲取子節點列表 childNodes&chidlren

    <div class="parent">
        <p>第一個孩子</p>
        <p>中間的孩子</p>
        <p>最後的孩子</p>
    </div>

    let parent = document.getElementsByClassName('parent')[0]
    console.log('childNodes',parent.childNodes,'children',parent.children)

childNodes獲取到的節點和firstchild的效果是一樣的，所以獲取子節點列表，推薦使用children 

返回由子節點組成的集合

 

3、獲取前一個節點 previousSibling&previousElementSibling

    <div class="parent">
        <p class="childOne">第一個孩子</p>
        <p class="childTwo">中間的孩子</p>
        <p class="childThree">最後的孩子</p>
    </div>

    let childTwo = document.getElementsByClassName('childTwo')[0]
    console.log('previousSibling',childTwo.previousSibling)
    console.log('previousElementSibling',childTwo.previousElementSibling)
    childTwo.previousElementSibling.style.color = 'red'

返回上一個節點對象，推薦使用previousElementSibling

 

4、獲取下一個節點 nextSibling&nextElementSibling

    let childTwo = document.getElementsByClassName('childTwo')[0]
    console.log('nextSibling',childTwo.nextSibling)
    console.log('nextElementSibling',childTwo.nextElementSibling)
    childTwo.nextElementSibling.style.color = 'red'

返回下一個節點對象，推薦使用nextElementSibling

 

5、獲取父節點 parentNode

    <div class="parent">
        <p class="childOne">第一個孩子</p>
        <p class="childTwo">中間的孩子</p>
        <p class="childThree">最後的孩子</p>
    </div>

 

    let childTwo = document.getElementsByClassName('childTwo')[0]
    console.log('parentNode',childTwo.parentNode)
    childTwo.parentNode.style.background = 'red'

---

 

 

1、創建並插入節點  createElement&appendChild&insertBefore

（1）、向父節點創建並插入節點

body內寫好一個父節點ul

    <ul>

    </ul>

js內獲取ul，再用createElement方法創建一個li節點，插入並設置li的內容

語法：document.createElement('標籤名')

           父節點.appendChild(新創建的節點)

    let ul = document.querySelector('ul'); //獲取已有的ul
    let li = document.createElement('li'); //新創建一個li
    ul.appendChild(li); //將新創建的li插入已知節點ul內
    let newLi = document.querySelector('li'); //獲取到新創建的li
    newLi.innerText = '我是新創建的li'; //設置新的li的內容

接下來，用insertBerfore方法向新創建的li的上面再創建一個新的li，並設置內容

insertBefore方法需要兩個參數，第一個參數是新創建的節點，第二個參數是已知的子節點

語法：父節點.insertBefore(新創建的節點,已知的子節點)

    let ul = document.querySelector('ul'); //獲取已有的ul
    let li = document.createElement('li'); //新創建一個li
    ul.appendChild(li); //將新創建的li插入已知節點ul內
    let newLi = document.querySelector('li'); //獲取到新創建的li
    newLi.innerText = '我是新創建的li'; //設置新的li的內容
    
    let beforeLi = document.createElement('li'); //新創建一個li
    ul.insertBefore(beforeLi,newLi)
    let newBeforeLi = document.querySelector('li')
    newBeforeLi.innerText = '我是新創建的beforeli'; 

2、替換節點 replaceChild

語法：父節點.replaceChild(新創建的節點，將被替換的已知節點)

    let btn = document.createElement('button'); //新創建一個button按鈕
    ul.replaceChild(btn,newBeforeLi);//將第一個li替換成新創建的button按鈕
    let newbtn = document.querySelector('button')
    newbtn.innerText = '按鈕'

3、複製節點 cloneNode

語法：被克隆的元素.cloneNode('false/true') 

參數：true/false：是否複製子節點

    <div class="all">
        <div class="clone">被克隆的元素</div>
    </div>

    let all = document.querySelector('.all')  //父節點
    let clone = document.querySelector('.clone') //被克隆的子節點
    let NewClone = clone.cloneNode(false) //克隆子節點（不復制內容）
    all.appendChild(NewClone) //將克隆的節點加到被添加的父節點內

cloneNode方法的屬性爲false，看一下效果

克隆之後的div並沒有內容，下面將屬性改爲true看一下效果

連同內容一併複製並添加到父節點內

4、刪除節點 removeChild

語法：父節點.removeChild(被刪除的節點)

demo用點擊刪除看一下效果，先寫一個按鈕，再寫一段被刪除的元素，點擊按鈕將被刪除的元素刪除掉

    <button class="click">
        點擊刪除
    </button>
    <div class="box">
        <div class="remove">被刪除的元素</div>
    </div>

    let btnClock = document.querySelector('.click')
    let box = document.querySelector('.box')
    let remove = document.querySelector('.remove')
    btnClock.onclick = function(){
        box.removeChild(remove)
    }

 

---

 

 

1、獲取屬性 getAttribute

語法：元素.getAttribute('屬性名')

<img class="get" src="http://img.ivsky.com/img/tupian/pre/201611/11/guaiwu_daxue_donghua-006.jpg" alt="">

    let get = document.querySelector('.get')
    let getSrc = get.getAttribute('src')
    console.log('圖片地址 = '+getSrc)

這樣  就獲取到了圖片的地址

2、設置屬性 setAttribute

語法：元素.setAttribute('屬性',屬性值)

    <button class="click">點擊換圖片</button>
    <img class="set" src="http://img.ivsky.com/img/tupian/pre/201611/11/guaiwu_daxue_donghua-006.jpg" alt="">

    let set = document.querySelector('.set')
    let click = document.querySelector('.click')
    let newSrc = 'http://img.ivsky.com/img/tupian/pre/201611/11/guaiwu_daxue_donghua-012.jpg'
    click.onclick = function(){
        set.setAttribute('src',newSrc)//獲取元素的src屬性
    }

選擇兩張圖片的地址，點擊按鈕，將圖片地址改變爲另一張地址

3、刪除屬性 removeAttribute

語法：元素.removeAttribute('屬性')

    <button class="click">點擊刪除圖片地址</button>
    <img class="remove" src="http://img.ivsky.com/img/tupian/pre/201611/11/guaiwu_daxue_donghua-006.jpg" alt="">

    let remove = document.querySelector('.remove')
    click.onclick = function(){
        remove.removeAttribute('src')
    }

 

---

 

 

1、獲取或設置節點對象的內容 innerHTML&innerText

    （1）、innerHTML

    <div>
        <p>我是P標籤的內容</p>
    </div>

    let div = document.querySelector('div')
    let divHTML = div.innerHTML
    console.log(divHTML)    

獲取的作用的比較少，常用的是將代碼片段插入到元素內

點擊設置或者替換某一個元素內的html內容

    <button class="click">點擊替換div的內容</button>
    <div>
        <p>我是P標籤的內容</p>
    </div>

    let div = document.querySelector('div')
    let click = document.querySelector('.click')
    let html = '<p><i>我是修改後的代碼片段</i></p>'
    click.onclick = function(){
        div.innerHTML = html
    }
   

設置的html內容將以代碼片段的形式被瀏覽器渲染並加載到dom結構上，下面看一下innerHTML和innerText的區別

（2）、innerText

    let div = document.querySelector('div')
    let click = document.querySelector('.click')
    let html = '<p><i>我是修改後的代碼片段</i></p>'
    click.onclick = function(){
        div.innerText = html
    }

innerText是將內容以字符串的形式加載到節點中，標籤內容並不會被渲染

2、更多操作將在下文繼續更新，敬請關注

【未完待續...】