網站的英雄：理解dom
“DOM”是一個在前端web設計和開發中經常使用的術語。它代表“文件物件模型”，是網站的基本組成部分。
儘管DOM很重要，但很多人並不理解它。事實上，你可以為網站程式設計多年而不必對它有太多瞭解。但是隨著前端技術的進步，理解DOM變得越來越重要。
理解dom契約
在面向物件程式設計中，有一種稱為介面的結構。介面本身不做任何事情。相反，它建立了一個契約。它說任何東西都可以與其他任何東西互動，只要它遵循介面契約的規則。
擁有一個介面可以讓程式的任何部分以一種可控和可預測的方式與程式的任何其他部分進行互動。該介面還使程式的一部分可以與任何其他部分一起工作，即使它對介面另一端的程式部分一無所知。
An interface is like an electrical outlet in your wall. Your device doesn't need to know where the power is coming from as long as the voltage is correct. The transformer on the corner doesn't need to know what it's powering. It just needs to send electricity at the proper voltage to your house.
DOM是網頁與建立和更改網頁的程式碼之間的介面層。當您訪問一個網站時，您將看到瀏覽器如何呈現該網站的DOM。編寫HTML時，實際上是在使用DOM的API（程式設計介面）程式設計。
DOM標準由一個叫做全球資訊網聯盟（WorldWideWebC***ortium）或W3C的組織維護，他們建立了定義DOM標準的非常詳細的文件。
在這一點上，你可能會認為他們做得不是很好。畢竟，跨瀏覽器相容性問題導致了很多問題。
問題不在標準上。這是瀏覽器本身的問題。許多瀏覽器在DOM實現中添加了不符合W3C標準的功能。有時，這種功能變得流行，並被實現到DOM標準中，迫使其他瀏覽器迎頭趕上。
另一個問題是，有些人仍然在使用沒有內建最新DOM標準的舊版本瀏覽器。有時瀏覽器不能正確實現標準。
dom的結構
你可以把DOM想象成一棵樹。<；html>；元素是主幹，其中的所有元素都是分支。當您在父元素中巢狀HTML元素時，實際上是在該分支之外建立分支。每個分支的恰當術語是“節點”
樹結構在節點之間建立邏輯關係，就像家譜樹一樣。每個節點都可以有其分支的父節點和祖先節點。他們可以有兄弟姐妹。節點可以有子節點和子節點。當使用JavaScript和CSS與DOM互動時，用這些術語來思考會有很大幫助。
html如何與dom互動
DOM是透過使用document介面建立一個document物件來定義的。HTML程式碼是建立文件的最直接的方法。HTML提供了一種簡單的方法來定義文件，而不需要進行傳統的程式設計。
如果您剛剛開始使用HTML，這裡有五個技巧讓您熟悉它。
HTML比傳統的程式語言更簡單、更寬容。它使得與DOM的互動對於初學者web設計者來說很容易。
css如何與dom互動
一旦您的HTML構建了DOM文件，CSS就可以為該文件設定樣式。為了做到這一點，它需要能夠找到您想要的樣式元素。它有幾種方法。
您可以透過按名稱引用元素來訪問文件節點，如<；div>；和<；p>；。CSS還可以透過引用類名和id名直接訪問元素。類樣式將應用於多個元素，以便您可以同時設定所有元素的樣式。相反，id樣式僅對單個元素應用更改。
您還可以使用CSS訪問家族樹結構，並對訪問進行微調以獲得更多控制。CSS選擇器允許您選擇多個元素，併為您提供查詢它們的技巧包。你可以透過他們的祖先，階級的組合，等等來搜尋孩子。
javascript如何與dom互動
JavaScript對文件的控制能力最強，因為JavaScript是一種實際的程式語言，包含物件、流控制、變數等。DOM提供了幾個介面，允許JavaScript操作文件、元素和其他節點。
相關：什麼是JavaScript？
JavaScript可以新增和刪除節點以及更改它們的樣式。JavaScript可以監視文件中的事件，比如將滑鼠懸停在元素上、單擊並按鍵。
JavaScript可以用與CSS非常相似的方式搜尋和導航文件樹。它可以透過id和class來查詢元素。它可以檢索子元素列表作為陣列。
web開發的未來與dom
網際網路自早期以來已經發生了很大的變化。在早期，JavaScript主要用於特效和簡單的資料顯示。大多數網站只不過是電子宣傳冊。不過，AJAX改變了這一切。
AJAX允許網站動態更新伺服器上顯示的資料，而無需重新載入頁面。在AJAX之前，只有在重新載入頁面或使用者導航到另一個頁面時，才能看到對資料的每一個更改。
在AJAX之後，web應用變得越來越流行。網際網路不再是簡單的靜態網站和一些高功能應用程式的集合，比如eBay。現在網際網路幾乎是第二個作業系統，充滿了功能強大的應用程式。
隨著使用者期望的增長，技術必須跟上。JavaScript不是最強大或最快的語言。它還面臨著一些問題，比如浮點數字錯誤，這使得開發人員對它不太滿意。這就是WebAssembly的用武之地。
WebAssembly為瀏覽器帶來了許多本機程式碼的好處，包括提高了速度和更好的硬體訪問。它將讓程式設計師使用其他語言來構建像C++和RIST這樣的網站。
但是，即使WebAssembly將帶來巨大的改進，DOM仍然存在，在程式碼和瀏覽器中顯示的內容之間提供了一致的介面。
- 發表於 2021-03-30 05:25
- 閱讀 ( 80 )
- 分類：程式設計
你可能感興趣的文章
javascript(javascript)和jquery公司(jquery)的區別
...vascript)和jquery公司(jquery)的區別 網際網路上有成千上萬的網站。每天都有新網站被建立。每個商業組織都有一個網站來聯絡他們的客戶。web應用程式開發中使用了多種技術。其中兩個是JavaScript和jQuery。JavaScript是一種解釋性的高...
今天最簡單的音樂學習網站的大名單
...度和時間演奏樂器。無論你的音樂品味或樂器選擇，這個網站列表是創造這些甜美聲音的完美開端。 ...
透過這5個網站找到下一個線上觀看的內容
...。但要找到好看的東西是很困難的，不是嗎？好吧，有些網站透過告訴你下一步線上看什麼來讓這變得更容易。 ...
javascript壓縮器：如何以及為什麼縮小js
我們都經歷過，你學會了如何建立一個很棒的網站，但一旦你釋出它，它的速度就慢得讓人無法忍受。 ...
不用費心閱讀使用條款：這個網站為您總結了它們
如果南方公園是可信的，不閱讀網站的使用條款可能會導致一些非常不幸的後果。但即使我們不是生活在一個蘋果在暗中誘騙你成為人類蜈蚣的世界裡，我們也有很多理由要注意精細印刷。 ...
頂級網站和書籍，讓您成為linux命令列英雄
... 以下是成為命令列高手所需的網站和書籍。 ...
什麼是javascript？它是如何工作的？
... 構建網站和應用程式有三個元件：超文字標記語言（HTML）、級聯樣式表（CSS）和JavaScript。每個人在建立web應用程式時都有一個角色。 ...
感到沮喪？以下是四大好訊息網站
...好訊息，我們可以提供幫助。以下是五個最好的正面新聞網站。 ...
22個最好的醫生誰網站的新聞，禮物，和更多
...醫生一直在世界各地的時空冒險中驚豔不已。由於數百家網站專門為該節目服務，很難找到最好的網站。 ...
網上最好的動漫網站
...朋友來聊聊嗎？這些動漫社群你已經報道過了。在下面的網站中，你可以找到很多活躍的論壇，在那裡你可以玩得很開心，也可以輕鬆地談論動漫。 ...
