原生JS DOM方法

1.建立元素 插入元素

①建立元素節點 createElement()
②建立文字節點 createTextNode()
③把新的節點新增到子節點，也可以把文字節點新增到空節點中 appendChild()
④刪除子節點 removeChild()
⑤在指定的子節點前面插入新的子節點。 insertBefore()

let box = document.getElementById('box');
let a = document.createElement('section'); //建立一個元素節點，內容為空 <section></section>
let b = document.createTextNode('Kolento'); //建立一個文字節點   Kolento
a.appendChild(b); //把b的內容放入a節點中 <section>Kolento</section>
//此時如果需要把a節點插入 id=box 節點中
box.appendChild(a); 
box.insertBefore(a,box.childNodes[0]); //在第1個子節點前插入節點

//結果如下
<div id="box">
   <section>Kolento</section>
</div>

box.childNodes; //返回陣列 box下的子節點集
box.removeChild(box.childNodes[0])  //刪除第一個子節點

2.建立，修改，獲取元素屬性

\let box = document.getElementById('box');
box.setAttribute('test','yes'); //建立屬性
box.setAttribute('test','no'); //修改屬性
box.getAttribute('test'); //獲取屬性 no