一、節(jié)點(diǎn)

1. 文本節(jié)點(diǎn)，IE8以下空格節(jié)點(diǎn)獲取不到。
2. 元素節(jié)點(diǎn) div。
3. 屬性節(jié)點(diǎn) class、id、value。
4. 注釋節(jié)點(diǎn)

<div id="wrap">
    <div class="position">
        <div id="box" class="box1" data-title="這也是節(jié)點(diǎn)" abc="133">
            <!-- <div>
                <img src="1.jpg" />
            </div> -->
            你好嗎！??！
            <span id="my-span">這是個(gè)span</span>
            <p>這是一個(gè)p標(biāo)簽</p>
            <ul>
                <li>這是li標(biāo)簽1</li>
                <li>這是li標(biāo)簽2</li>
                <li>這是li標(biāo)簽3</li>
            </ul>
        </div>
        <div id="box2"></div>
    </div>
</div>

二、獲取節(jié)點(diǎn)

1. 獲取子代節(jié)點(diǎn)（動(dòng)態(tài)獲?。?。ele.childNodes：文本節(jié)點(diǎn)、元素節(jié)點(diǎn)。ele.children：只獲取元素節(jié)點(diǎn)。
2. 獲取第一個(gè)子代節(jié)點(diǎn)。ele.firstChild：返回第一個(gè)包括文本節(jié)點(diǎn)和注釋節(jié)點(diǎn)。ele.firstElementChild：獲取第一個(gè)元素節(jié)點(diǎn)。
3. 獲取最后一個(gè)子代節(jié)點(diǎn)。ele.lastChild：獲取到文本和注釋節(jié)點(diǎn)。ele.lastElementChild：獲取最后一個(gè)元素節(jié)點(diǎn)。
4. 獲取父親節(jié)點(diǎn)。ele.parentNode：獲取父親節(jié)點(diǎn)。ele.offsetParent：找到定位父級(jí)。
5. 下一個(gè)兄弟節(jié)點(diǎn)。ele.nextSibling：獲取到下一個(gè)節(jié)點(diǎn)，包括文本、注釋節(jié)點(diǎn)。ele.nextElementSibling：只獲取元素節(jié)點(diǎn)。
6. 上一個(gè)兄弟節(jié)點(diǎn)。ele.previousSibling：獲取到下一個(gè)節(jié)點(diǎn)，包括文本、注釋節(jié)點(diǎn)。ele.previousElementSibling：只獲取元素節(jié)點(diǎn)。
7. 獲取子元素節(jié)點(diǎn)的數(shù)量。ele.childElementCount。

三、節(jié)點(diǎn)的操作

1. 創(chuàng)建節(jié)點(diǎn)：document.createElement('nodename')，放標(biāo)簽名，創(chuàng)建元素節(jié)點(diǎn)，創(chuàng)建節(jié)點(diǎn)是document的方法，創(chuàng)建完的節(jié)點(diǎn)可以直接進(jìn)行dom操作。
2. 創(chuàng)建文本節(jié)點(diǎn)：createTextNode。
3. 刪除節(jié)點(diǎn)：parentNode.removeChild(node)，刪除節(jié)點(diǎn)只能從父級(jí)開始刪除，不能自己刪除自己。
4. 克隆節(jié)點(diǎn)：cloneNode()，克隆只克隆元素本身還有元素節(jié)點(diǎn)，不會(huì)克隆事件，可以接受一個(gè)布爾類型，若是true，則克隆子孫元素。
5. 添加節(jié)點(diǎn)：parentNode.appendChild(node)，只能從父級(jí)節(jié)點(diǎn)開始添加，添加位置在最后的子節(jié)點(diǎn)后面。
6. 替換節(jié)點(diǎn)：parentNode.replaceChild(new, old)，第一個(gè)用來替換新元素，第二個(gè)被替換元素。
7. 在節(jié)點(diǎn)前添加節(jié)點(diǎn)：parentNode.insertBefore(new, old)，第一個(gè)用來插入的新元素，第二個(gè)在這個(gè)元素前插入。

var oBox = document.getElementById('box'),
    oSpan = document.getElementById('my-span');
    oBox.onclick = function(){
        alert(1)
    }

    var oBox2 = oBox.cloneNode(true);
    wrap.appendChild(oBox2);
    console.log(oBox2)

var oP = document.createElement('p');
oP.innerHTML = '我是一個(gè)p標(biāo)簽';

oP.onclick = function() {
    alert('我是p標(biāo)簽的點(diǎn)擊事件')
}
oBox.appendChild(oP);
        
var oText = document.createTextNode('我很好?。?！');
oBox.appendChild(oText);
console.log(oText)

四、節(jié)點(diǎn)屬性

1. 獲取節(jié)點(diǎn)屬性。ele.getAttribute(key)，節(jié)點(diǎn)名稱，直接返回值。ele.getAttributeNode，返回節(jié)點(diǎn)對(duì)象。
2. 設(shè)置節(jié)點(diǎn)屬性。ele.setAttribute(key, value)，不要用數(shù)字來當(dāng)做key。ele.setAttributeNode(node)，node是一個(gè)節(jié)點(diǎn)對(duì)象。
3. 創(chuàng)建節(jié)點(diǎn)對(duì)象。document.createAttribute("nodeName")，創(chuàng)建完之后要設(shè)置value值。
4. 刪除節(jié)點(diǎn)對(duì)象。ele.removeAttribute(key)
5. 節(jié)點(diǎn)類型。1--element--元素節(jié)點(diǎn)、3--#text--文本節(jié)點(diǎn)、8--#comment--注釋節(jié)點(diǎn)、9--document--文檔節(jié)點(diǎn)。
6. tagName是只有元素節(jié)點(diǎn)才有，nodeName是所有節(jié)點(diǎn)都有。

var oBox = document.getElementById('box');
oBox.removeAttribute('abc');
console.log(document.nodeType);