DOM

1. DOM樹

頁面標籤結構樹

2. 獲取元素

1. getElementsById 根據id獲取元素

2. getElementsByTagName 根據標籤獲取元素

3. HTML5新增
   getElementsByClassName 根據類名返回元素集合
   querySelector 根據指定選擇器返回第一個元素物件
   querySelectorAll 根據指定選擇器返回集合

4. 獲取特殊元素（body,html）
   document.body 獲取body元素集合
   document.documentElement 獲取html元素集合
   parentNode 返回元素的第一個父節點

3. 事件

	var btn = document.getElementById(‘btn’);

	onclick

	btn.onclick = function() {
	 alert(‘Hello World!’);
	}

1) 執行事件的步驟

1. 獲取事件源

2. 註冊事件（繫結事件）

3. 新增事件處理程式（採取函式賦值的形式）

4. 操作元素

   1. 改變元素內容

   element.innerText
   從起始位置到終止位置的內容
   （不識別/去除範圍內的html標籤，空格，換行）
   element.innerHTML（W3C標準）
   從起始位置到終止位置的內容
   （識別/不去除範圍內的html標籤，空格，換行）
   （這兩者是可讀寫的，即可以用來獲取值）

   2. 改變元素屬性
   3. 新增標籤

   <ul class=”space”></ul>
   <script>
   var space = document.querySelector(‘.space’);
   //獲取ul元素
   var tag = document.createElement(‘li’)//建立空的i標籤
   tag.appendChild(document.createTextNode(‘test text’));
   //組合標籤與文字
   space.appendChid(tag);//新增標籤
   </script>
    
   

   注意：使用js增加節點時，appendChild只能加一個元素的問題 :
   
   在給按鈕新增觸發事件時，如果設定從父節點新增子元素時會出現只能新增一個元素的‘BUG’。
   
   實際上是如果宣告在觸發事件外，那麼從觸發事件裡面新增的子元素只能頻繁呼叫外面開闢的一個地址。就會變成如果值變化只會出現加一個元素改變別的值的現象。
   
   如果在觸發事件裡面宣告，每一次的觸發都會開闢新地址，新增的都是不同的地址，就可以實現加多個元素了！！
   

   add.onclick = function(){
   	var li  =  document.createElement('li');
   	li.innerHTML = text.value;
   	ul.appendChild(li, ul.firstChild);
   }