//得到全部子節點childNodes
document.getElementById(‘head’).childNodes
//NodeList(5) [text, div.head_wrapper, text, div.headBlock, text]
//得到父節點
document.querySelector(‘.head_wrapper’).parentNode
//下一個兄弟節點
document.querySelector(‘.head_wrapper’).nextSibling
//上一個兄弟節點
document.querySelector(‘.headBlock’).previousSibling
//第一個子節點
document.getElementById(‘head’).firstChild
//最後一個子節點
document.getElementById(‘head’).lastChild
//是否有子節點
document.getElementById(‘head’).hasChildNodes()

//得到父級元素
document.querySelector(‘.head_wrapper’).parentElement
//div id=”head”>/div

//下一個兄弟元素
document.querySelector(‘.head_wrapper’).nextElementSibling
//div class=”headBlock”>/div
//上一個兄弟元素
document.querySelector(‘.headBlock’).previousElementSibling
//div class=”head_wrapper”>/div

//第一個子元素
document.getElementById(‘head’).firstElementChild
//div class=”head_wrapper”>/div
//最後一個子元素
document.getElementById(‘head’).lastElementChild
//div class=”headBlock”>/div

//是否有子元素
document.getElementById(‘head’).children.length == 0
//false

//獲取該節點下的所有文字
document.getElementById(‘head’).textContent
//1,2

//獲取該節點下的文字
document.getElementById(‘head’).innerText
//1,2

原生JS Class 增刪改查
//新增Class
document.getElementById(‘head’).classList.add(‘add’) //(‘add1’,’add2’)
//div id=”head” class=”add”>/div

//刪除Class
document.getElementById(‘head’).classList.remove(‘add’)
//div id=”head”>/div

//切換class toggle
document.getElementById(‘head’).classList.toggle(‘add’)
//列印true 代表新增成功，div id=”head” class=”add”>/div
//列印false為刪除成功, div id=”head”>

//是否存在Class
document.getElementById(‘head’).classList.contains(‘add’)
//返回 true和false

//返回類名在元素中的索引值。索引值從 0 開始。
div id=”head” class=”add remove”>/div
document.getElementById(‘head’).classList.item(1)
//remove

原生JS 屬性設定和獲取
//屬性元素
document.getElementById(‘head’).setAttribute(‘set’, ‘value’);
//div id=”head” set=’value’>/div

//獲取屬性
document.getElementById(‘head’).getAttribute(‘set’)
//”value” 不存在為null

原生JS DOM增刪
//已有元素前插入元素insertBefore
ul id=”box”
li 001 /li
/ul
var newItem=document.createElement(“li”)
var lis=document.getElementsByTagName(“li”);
var curItem = document.getElementById(‘box’)
newItem.innerHTML=”002”;
curItem.insertBefore(newItem,lis[0]);
//ul id=”box”
// li 002 /li
// li 001 /li
///ul

//已有元素內追加元素appendChild
ul id=”box”>
li 001 /li
/ul
var newItem=document.createElement(“li”)
var curItem = document.getElementById(‘box’)
newItem.innerHTML=”002”;
curItem.appendChild(newItem);
//ul id=”box”
// li 001 /li
///ul