目的: DOM的解析及取得元件
處理說明: 1> Browser 如何解析 HTML 成 DOM
原始參考網址 : https://ithelp.ithome.com.tw/articles/10191765
透過 DOM API 查找節點
當一個網頁被載入到瀏覽器時，瀏覽器會先分析這個 HTML 檔案，然後會依照這份 HTML 的內容解析成「DOM」 (Document Object Model，文件物件模型)。
DOM 是 W3C 制定的一個規範，它是獨立於平台與語言的標準。 換言之，只要遵守這樣的規範實作，不管是什麼平台或者是什麼語言開發，都可以透過 DOM 提供的 API 來操作 DOM 的內容、結構與樣式。
所以說，DOM 是網頁的根本，懂得 控制籃板球的人就能控制整場比賽 控制 DOM 就可以控制整個網頁，做出良好的互動體驗。
那麼在今天的分享中，我們就繼續來介紹 DOM API 查找節點的方法吧。
1><script> </script>放在 </body>之前 , HELLO 正常顯示
-->
當我們把 <script> 標籤放在 </body> 結束之前，
由於 DOM 已經解析完成，所以 document.querySelector 就可以順利取得 id="hello" 的節點，並且把 'HELLO' 的字串放在網頁裡囉！
-->
當瀏覽器在 <head> ... </head> 之間遇到 <script> 標籤時，就會暫停解析網頁，並且「立即」執行 <script> 裡的內容，直到 script 執行完畢後再繼續解析網頁。發在 <head> ... </head> 裡的 <script> 想要嘗試去尋找 <div id="hello"> 這個標籤，但因為還沒解析到網頁本體，所以也無從取得。
document 物件是 「DOM tree」 的根節點，所以當我們要存取 HTML 時，都從 document 物件開始。 而 DOM 的節點類型除了 「HTML 元素節點」 (element nodes) 外，還有「文字節點」 (text nodes)、「註解節點」 (comment nodes) 等。document.querySelector('xxx');
document.querySelectorAll('xxx');
document.querySelector 與 document.querySelectorAll 可以用 「CSS 選擇器」 (CSS Selectors) 來取得「第一個」或「所有」符合條件的元素集合 (NodeList)。
document.getElementById 以及 document.querySelector -->因爲取得的一定只有一個元素/節點，所以不會有 index 與 length 屬性。
而
document.getElementsBy** (注意，有個 s) 以及 document.querySelectorAll -->分別回傳 「HTMLCollection」 與 「NodeList」
「HTMLCollection」只收集 HTML element 節點
「NodeList」除了 HTML element 節點，也包含文字節點、屬性節點等
沒有留言:
張貼留言