【JavaScript入門-15】JavaScript中的DOM

盡管 javaScript 可以在許多環境（瀏覽器、服務器）中運行，但運行 javaScript 最流行的方式是通過 Web 瀏覽器，其中很大一部分是與頁面上的元素交互。

當編寫 HTML 并在瀏覽器中查看它時，瀏覽器會將 HTML 轉換為稱為Document Object Model或DOM的東西。

這就是在任何網站的瀏覽器開發人員工具中訪問元素面板時看到的內容。

它實際上不僅僅是我們編寫的 HTML，瀏覽器將其轉換為Document Object Model，并允許我們通過 JavaScript 與 DOM 交互。

我們可以做一些事情，比如監聽點擊和滾動。

我們可以在該頁面中添加、移動、刪除元素或文本、圖像等內容。

我們可以從可以觸發動畫的元素中添加和刪除 CSS 類。

我們可以獲取新數據。

我們可以播放音樂和視頻。

我們可以向頁面添加任何類型的交互。

…這是通過編寫與 DOM 交互的 JavaScript（頁面上的東西，頁面上的元素）來完成的。

DOM 以一棵看起來很像 HTML 的樹的形式表示。

即使我們使用的是 React、Angular 或 Vue 等框架，理解 DOM 的核心概念（如事件、元素和類）也非常有幫助

即使框架可以幫助我們完成操作DOM的事情，我們仍然需要知道它在后臺是如何工作的。

窗口對象刷新器

Window 上的快速刷新。

瀏覽器中的全局范圍稱為window.

窗口是我們的全局變量以及有用的屬性，如window.location.

它返回一個充滿信息的對象，例如所在的當前頁面、主機名、協議是什么，如果我們在特定端口上，它將向我們顯示該信息。

我們還可以找到類似innerWidth的內容，如果我們在控制臺中鍵入它，它將告訴我們瀏覽器的寬度。

我們還可以將其window視為當前打開的窗口的所有內容。

包括：

瀏覽器欄

選項卡

滾動條

基本上所有關于瀏覽器窗口的東西通常都存儲在 window 對象中

文檔對象介紹

文檔負責從開始的 HTML 標記、文檔類型到結束的 HTML 標記（）的所有內容。

不同之處在于文檔不關心其他瀏覽器選項卡或頁面之外的任何其他內容，它只關心整個DOM. 整個文檔將通過document關鍵字提供給我們。

如果在控制臺中輸入document并將鼠標懸停在它返回的內容上，就會看到它突出顯示了整個頁面

## 導航器對象

還有一種東西叫做navigator.

這navigator只是比窗口更高級別的東西，它不僅為我們提供有關瀏覽器的信息，還為我們提供有關設備本身，它所在的設備的信息。想想網絡攝像頭和音頻訪問、電池電量、GPS 坐標等。

特定于設備的東西將存在于導航器上。

現在你只需要知道window其中包含了很多關于瀏覽器的信息，但是document它將包含當前網頁的所有內容，從開始的 HTML 到結束的 HTML 標記。

HTML JavaScript

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。