Introduction
近日觀看 Chrome 新支援的 Web API 介紹中，意外看到了一個有趣的 Web API — DOMParser，名稱明確地訴說著它的作用，是的！web developers 可以透過它來對字串進行解析，進而轉換成 document，如此便可以透過再熟悉不過的 DOM 操作來進行 DOM tree 遍歷。
也就是說 web developers 再也不需撰寫複雜不好維護的 regular expression 了，大大提升了 code 的閱讀性。更令筆者感到驚豔的是 — 這個 Web API 支援度極高無比，可說是元老院等級的 API 了～因此可以放寬心、大膽的來使用它！
How to use it ?
使用方法非常簡單，他只有一個 method — parseFromString，所以 new 完 DOMParser 後，便可以直接呼叫這個 method（呼叫的當下記得置入你希望轉出的 mimeType），便可以立即轉換成我們所需要的格式了～
如範例所述，我們成功地把字串們轉換成 XML、SVG 以及 HTML document 了。
目前支援了以下的 mimeType ：
- text/html
- application/xml
- application/xhtml+xml
- image/svg+xml
此外，web developers 也可以透過它來知曉是否為 well-formed document。如下所示，當解析失敗時，可以在 document 中找到 <parsererror />這個 node，屆時便可以做出對應處理。
Use case
凡是需要將字串解析成 document 的 case 通通都可以使用 DOMParser 來進行相關操作與解析。例如：
- 透過 API 拿到 stock XML 格式的 response，想分析特定欄位。
- 需要取得頁面上 <svg /> 中 circle 的座標與半徑。
- 檢查使用者輸入的 HTML code（ex: rich text editor）的外部連結使否隱含不合法的位址。
- 解析使用者 paste or drop 的內容（DataTransfer）。
日前筆者剛好有開發 image uploader 的需求，該 component 就有支援 DnD（drag & drop）的功能，筆者希望如果使用者直接拖曳不同視窗的 web page 內容時，也可以正確的解析出這些內容裡頭的 image 外部資源位址。進而將這些圖片進行上傳。
以下為相關 code：
筆者先判斷 dataTransfer.types 是否隱含 text/html 這個 mimeType，接著再透過 DOMParser 進行解析與轉換，便可以透過 querySelectorAll 掃出當中隱含的所有 <img />，自然便可以取出所有的 image paths 了。
Conclusion
以上便是 DOMParser 的基本介紹與使用心得，對於 DOMParser 總有種相見恨晚的感覺，所以看文件的當下難掩心中愉悅的情愫，希望本篇能有效地幫助到大家，讓大夥們可以更輕易的入門 DOMParser。 #DOMParser