//標籤
<div id="div1">
    <p id="p1">這是一個段落。</p>
    <p id="p2">這是另外一個段落。</p>
</div>

//dom操作
        //為 <p> 元素新增文字節點：
        var para = document.createElement("p");
        //將文字節點新增到 <p> 元素中：
        var node = document.createTextNode("這是一個新的段落1。");
        //最後，在一個已存在的元素中新增 p 元素。
        para.appendChild(node);
        //最後，在一個已存在的元素中新增 p 元素。查詢已存在的元素：
        var element = document.getElementById("div1");
        //最後，在一個已存在的元素中新增 p 元素。新增到已存在的元素中:
        element.appendChild(para);
 

var para1 = document.createElement("p");
        var node1 = document.createTextNode("這是一個新的段落2。");
        para1.appendChild(node1);
        var element1 = document.getElementById("div1");
        var child1 = document.getElementById("p1");
        element1.insertBefore(para1, child1);   
 

//查詢 id="div1" 的元素:
        var parent = document.getElementById("div1");
        //查詢 id="p1" 的 <p> 元素:
        var child = document.getElementById("p1");
        //從父元素中移除子節點：
        parent.removeChild(child);

 var para2 = document.createElement("p");
        var node2 = document.createTextNode("這是一個新的段落3。");
        para2.appendChild(node2);
        
        var parent2 = document.getElementById("div1");
        var child2 = document.getElementById("p2");
        parent.replaceChild(para2, child2);

• var myCollection = document.getElementsByTagName("p");

• myCollection[1]

• myCollection.length

• var myCollection = document.getElementsByTagName("p");
  var i;
  for (i = 0; i < myCollection.length; i++) {
      myCollection[i].style.backgroundColor = "red";
  }

   

• HTMLCollection 不是一個數組！
• 可以像陣列一樣，使用索引來獲取元素

• var myNodeList = document.childNodes;

• var myNodeList = document.querySelectorAll("p");

• y = myNodeList[1]

• myNodelist.length

• var myNodelist = document.querySelectorAll("p");
  var i;
  for (i = 0; i < myNodelist.length; i++) {
      myNodelist[i].style.backgroundColor = "red";
  }

   

• NodeList 與 HTMLCollection 有很多類似的地方。 
• NodeList 與 HTMLCollection 都與陣列物件有點類似，可以使用索引 (0, 1, 2, 3, 4, ...) 來獲取元素。
• NodeList 與 HTMLCollection 都有 length 屬性。
• HTMLCollection 元素可以通過 name，id 或索引來獲取
• 無法使用陣列的方法： valueOf(), pop(), push(), 或 join()

• HTMLCollection 是 HTML 元素的集合；NodeList 是一個文件節點的集合。
• NodeList 只能通過索引來獲取；HTMLCollection 元素可以通過 name，id 或索引來獲取
• 只有 NodeList 物件有包含屬性節點和文字節點