JS取得元素的N種方法及其動態討論
在學習JavaScript過程中會遇到js取得元素的問題，本篇將會對其取得元素的方法進行解說。
在實際前端開發工作中，我們經常會遇到要取得某些元素，以達到更新該元素的樣式、內容等目的。而文檔物件模型(DOM) 是HTML和XML文檔的程式設計接口，它提供了對文檔的結構化的表述，並定義了一種方式可以從程式中對該結構進行訪問，從而改變文檔的結構，樣式和內容。 DOM 將文件解析為一個由節點和物件（包含屬性和方法的物件）組成的結構集合，它會將web頁面和腳本或程式語言連接起來。也因此，JavaScript可以透過DOM API取得元素節點，方法有以下幾種：其中querySelector()和querySelectorAll()為ES5的元素選擇方法
1、getElementById()：
接收一個參數：要取得的元素的ID(區分大小寫，必須嚴格匹配)，傳回一個Element物件（也可看作是動態NodeList集合，只是集合中只包含一個符合的元素，但也會即時反映DOM節點的變化），若目前文件中擁有特定ID的元素不存在則傳回nul。
語法：
element = document.getElementById(id);
範例：刪除
<body>
<div id="myDiv">
<p class="myP">hello world</p>
<p class="myP">hello dolby</p>
<p class="myP">hello dot</p>
<p class="myP">hello bean</p>
</div>
<script>
var div = document.getElementById("myDiv"); console.log(div); //(1)
var body=document.querySelector('body');
body.removeChild(div); console.log(body); //(2)
</script></body>
//(1)处打印值 <div id="myDiv">
<p class="myP">hello world</p>
<p class="myP">hello dolby</p>
<p class="myP">hello dot</p>
<p class="myP">hello bean</p>
</div>//(2)处打印值<body>
<script>
var div = document.getElementById("myDiv"); console.log(div); //(1)
var body=document.querySelector('body');
body.removeChild(div); console.log(body); //(2)
</script></body>範例：
<!DOCTYPE html><html><head>
<title>getElementById example</title>
<script>
function changeColor(newColor) { var elem = document.getElementById("para1");
elem.style.color = newColor;
} </script></head><body>
<p id="para1">Some text here</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button></body></html>getElementById( )方法不會搜尋不在文件中的元素。當建立一個元素且指派ID後，必須要使用insertBefore()或其他類似的方法把元素插入到文件中之後才能使用getElementById() 取得到:
var element = document.createElement("div");
element.id = 'testqq';var el = document.getElementById('testqq'); // el will be null!2、getElementsByClassName()：
接收一個參數，即包含一個或多個類別名稱的字串（類別名稱透過空格分隔），傳回一個HTMLCollection動態集合（也可以說傳回一個NodeList類別陣列物件），集合中包含以目前元素為根節點，所有指定class 名的子元素。
語法：
var elements = document.getElementsByClassName(names); var elements = rootElement.getElementsByClassName(names);
getElementsByClassName 可以在任意的元素上調用，而不僅僅是document。呼叫這個方法的元素將作為本次尋找的根元素。
範例：
取得所有class 為'test' 的元素:
document.getElementsByClassName('test');
//html代码<div class="myDiv">
<p class="myP">hello world</p>
<p class="myP">hello dolby</p>
<p class="myP">hello dot</p>
<p class="myP">hello bean</p>
</div>
//js代码一 <script>
var div = document.getElementsByClassName("myDiv"); console.log(div); //(3)
var p = document.getElementsByClassName("myP"); for (var i = 0; i < p.length; i++) {
div[0].removeChild(p[i]);
} console.log(p); //(4)
</script>[div.myDiv] //一個動態的HTMLCollection集合，長度為1，innerHTML為
hello dolby
，hello bean
，為什麼沒有其他兩個p元素一會兒解釋。//(4)處列印值
[p.myP,p.myP] //一個動態的HTMLCollection集合，長度為2，innerHTML分別為"hello dolby"，"hello bean" 。
以上用刪除節點的方法驗證了getElementsByClassName方法傳回的是一個HTMLCollection動態集合。 ⬆️以上程式碼中，首先div取得了頁面中類別名為"myDiv"的元素組成的動態集合，p取得了頁面中類別名為"myP"的元素組成的動態集合，接著用一個for迴圈來刪除"myDiv"集合中第一項（即上例中唯一的div元素）中的"myP"集合中的每一項，結果只有第一項和第三項被刪除了，這是為什麼呢？
原因是動態集合中DOM結構的變化能夠自動反映到所保存的物件中，最開始p.legth=4，當i=0時刪除了頁面中第一個p元素，此後p.length= 3；i=1時刪除了剩餘的三個p中的項目索引為1的項，此後p.length=2；i=2時已不滿足i
還是一個for循環搞定⬇️，每次刪除物件集合中的最後一項就可以啦～
//js代码二 <script>
var div = document.getElementsByClassName("myDiv")[0]; console.log(div); //(5)
var p = document.getElementsByClassName("myP"); for (var i=p.length;i--;){
div.removeChild(p[i]);
} console.log(p); //(6)
</script>
//(5)处打印值<div class="myDiv"></div>//(6)处打印值[] //空的HTMLCollection集合，长度为0語法：
// check the alignment on a number of cells in a table. var table = document.getElementById("forecast-table");
var cells = table.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
var status = cells[i].getAttribute("data-status");
if ( status == "open" ) {
// grab the data
}
}<body>
<div id="myDiv">
<p class="myP">hello world</p>
<p class="myP">hello dolby</p>
<p class="myP">hello dot</p>
<p class="myP">hello bean</p>
</div>
<script>
var div = document.getElementById("myDiv"); console.log(div); //(7)
var p = document.getElementsByTagName("p");//以下for循环改为for (var i=0,len=p.length;i
div.removeChild(p[i]);
} console.log(p); //(8)
