Dom 到底是什麼？

Dom (Document Object Model)

是在 window 下更詳細的操作表，是一個將 HTML 文件以樹狀的結構來表示的模型，而組合起來的樹狀圖，我們稱之為「DOM Tree」。

<div class="library">
  <div class="cover">
    <a class="cover-link" data-key="<%= book.title %>" href="#collapseBook" data-toggle="collapse" data-target="#collapseBook">
      <%= render partial: "shared/frontend/book_cover", locals: {book: book, size: :small} %>
      <div><%= book.title %></div>
    </a>
  </div>
  <%= link_to "Read on Leanpub",read_book_path(book), method: "POST"%>
  <% if book.md_data %>
    <p><%= link_to "下載", book.md_url, target: "_blank" %></p>
  <% else %>
    <p>沒有上傳 PDF</p>
  <% end %>
</div>

先不管內容是在寫什麼，光看這個程式碼的架構來說，每一個標籤裡面又包了一層標籤，然後又一層一層延伸下去，當然這架構都是有存在的必要。這裡我必須提到"全面啟動"這部電影，像是裡面一層一層的夢境，每層夢境都是有一些事情要執行，也會牽動到整個架構完整性。這就是「DOM Tree」的架構，方便開發者在設計網頁時有較直覺方式開發，而 DOM API 就是定義了讓 JavaScript 可以存取、改變 HTML 架構、樣式和內容的方法，甚至是對節點綁定的事件。JavaScript 就是透過 DOM 提供的 API 來對 HTML 做存取與操作。讓開發者使用 JavaScript 時對 HTML 文件做操作。

window.addEventListener("turbolinks:load", function () {
  if (document.querySelector("section.library")) {
    const bookInfo = document.querySelector("section.library").firstElementChild;
    bookInfo.addEventListener("click", (e) => {
      if (e.target.classList.contains("book-cover")) {
        // TODO;
      }
    });

操作方法以這個案例來說，微人想要使用 JavaScript 操作 HTML ，此操作對象 section 標籤中的 class 名為library的子元素標籤下，下一個監聽事件，等待觸發事件後執行指定的動作。今天也是淺淺的聊了一下在使用 JavaScript 操作起手式。我們明天見，掰餔。