子元素和子節(jié)點(diǎn)，第一個(gè)子元素和第一個(gè)子節(jié)點(diǎn)以及屬性操作
通過js獲取父級(jí)候味，子級(jí)，兄弟元素（包括祖級(jí)隔心，孫級(jí)）白群；
原生的JavaScript方法：
var a = document.getElementById("dom");
del_space(a); //清理空格
var b = a.childNodes; //獲取a的全部子節(jié)點(diǎn)；
var c = a.parentNode; //獲取a的父節(jié)點(diǎn)硬霍；
var d = a.nextSibling; //獲取a的下一個(gè)兄弟節(jié)點(diǎn)
var e = a.previousSibling; //獲取a的上一個(gè)兄弟節(jié)點(diǎn)
var f = a.firstChild; //獲取a的第一個(gè)子節(jié)點(diǎn)
var g = a.lastChild; //獲取a的最后一個(gè)子節(jié)點(diǎn)
這只是一種獲取節(jié)點(diǎn)帜慢，如果節(jié)點(diǎn)是文本節(jié)點(diǎn)，就還要做判斷唯卖，可以不可以只獲取子元素呢粱玲。就是子標(biāo)簽。答案當(dāng)然是有的
獲取子元素
// 獲取父元素拜轨、父節(jié)點(diǎn)
var parent = ele.parentElement;
var parent = ele.parentNode;
// 獲取子節(jié)點(diǎn)抽减，子節(jié)點(diǎn)可以是任何一種節(jié)點(diǎn)，可以通過nodeType來判斷
var nodes = ele.children;
// 查詢子元素
var els = ele.getElementsByTagName('td');
var els = ele.getElementsByClassName('highlight');
// 當(dāng)前元素的第一個(gè)/最后一個(gè)子元素節(jié)點(diǎn)
var el = ele.firstElementChild;
var el = ele.lastElementChild;
// 下一個(gè)/上一個(gè)兄弟元素節(jié)點(diǎn)
var el = ele.nextElementSibling;
var el = ele.previousElementSibling;
//返回子元素（不包括文本節(jié)點(diǎn)和注釋）的個(gè)數(shù)
var el = ele.childElementCount;
//獲得className屬性的添加橄碾，刪除和替換類名
classList屬性卵沉，
//mydiv元素的所有class屬性值，
var el = ele.getElementById("MYdiv").classList
add(value) 將給定的字符串值添加到列表中法牲，如果值存在史汗，不添加
contains(value)表示列表中是否存在給定的值，如果存在返回true皆串，否則返回false
remove(value) 從列表中刪除給定的字符串
toggle(value) 如果列表中已經(jīng)存在給定的值淹办，則刪除他，如果列表中沒有給定的值恶复，添加他
DOM更改
// 添加怜森、刪除子元素
ele.appendChild(el);
ele.removeChild(el);
// 替換子元素
ele.replaceChild(el1, el2);
// 插入子元素
parentElement.insertBefore(newElement, referenceElement);
屬性操作
// 獲取一個(gè){name, value}的數(shù)組
var attrs = el.attributes;
// 獲取、設(shè)置屬性
var c = el.getAttribute('class');
el.setAttribute('class', 'highlight');
// 判斷谤牡、移除屬性
el.hasAttribute('class');
el.removeAttribute('class');
// 是否有屬性設(shè)置
el.hasAttributes();
innerHTML與outerHTML的區(qū)別副硅？
DOM元素的innerHTML, outerHTML, innerText, outerText屬性的區(qū)別也經(jīng)常被面試官問到， 比如對(duì)于這樣一個(gè)HTML元素：<div>content<br/></div>翅萤。
innerHTML：內(nèi)部HTML恐疲，content<br/>腊满；
outerHTML：外部HTML，<div>content<br/></div>培己；
innerText：內(nèi)部文本碳蛋，content ；
outerText：內(nèi)部文本省咨，content 肃弟；
上述四個(gè)屬性不僅可以讀取，還可以賦值零蓉。outerText和innerText的區(qū)別在于outerText賦值時(shí)會(huì)把標(biāo)簽一起賦值掉笤受，另外xxText賦值時(shí)HTML特殊字符會(huì)被轉(zhuǎn)義。
所有節(jié)點(diǎn)都有的最后一個(gè)屬性是ownerDocumen敌蜂，該屬性指向表示整個(gè)文檔的文檔節(jié)點(diǎn)箩兽，這種關(guān)系表示的是任何節(jié)點(diǎn)都屬于它所在的文檔，任何節(jié)點(diǎn)都不能同時(shí)存在于兩個(gè)或更多個(gè)文檔中章喉，通過這個(gè)屬性汗贫，我們可以不必在節(jié)點(diǎn)層次中通過層層回溯到達(dá)頂端，而是可以直接訪問文檔節(jié)點(diǎn)秸脱。
