昨天我們提到了DOM是JavaScript控制網頁節點與內容的標準。今天就來介紹它提供的API吧！

document 物件是整個DOM的根節點，當我們要操作HTML都是從document開始，以下是常見DOM選取方式：

document.getElementById("task");
// 找到DOM中id為"task"的元素

document.querySelector(".list");
document.querySelectorAll(".list item");
// // querySelector 與 // querySelectorAll 中的".list"與".list item" 是用CSS選取器的方式來取得 ， querySelector是抓取第一個符合的元素;querySelectorAll是所有符合的元素集合

document.getElementByTagName("div");
//找到符合"div" tag 的所有元素

document.getElementByClassName("container");
// 找到符合"container" class 名稱的所有元素

節點的新增、刪除

** 新增**
可以透過document.createElement(tagName)來建立一個新的元素：

let newDiv = document.createElement("div");

新增之後還能夠給他加入id或是class,如：

newDiv.id = "new-div"
newDiv.className = "container"

這個時候我們其實在瀏覽器還是看不到它，需要使用appendChild("newDiv")，將它加入到指定的位置當中才會成功顯示。例如：

<ul class="list">
</ul>

let list =  document.querySelector(".list");
let newItem = document.createElement("li");


list.appendChild(list);

刪除
要刪除節點，可以使用removeChild()這個方法，例如：

<ul class="list">
  <li>item 01</li>
  <li>item 02</li>
  <li>itme 03</li>
</ul>

let list = document.querySelector(".list");

let removeItem = document.querySelectorAll("li")[1];

list.removeChild(removeItem);

以上就是一些基本的DOM API方法。接下來就讓我們開始實作todolist吧！