LV. 36
GP 2k

【閒聊】養成機器人教學(Day 4) 支撐起網站的節點樹Dom Tree

樓主 敵會跪 jack12345520
GP2 BP-
前言

上一篇我們跟機器人對話
他是怎麼得知我們的名字呢?
就是從勇者小屋看到的
因為我們發送了訊息
它知道是我們傳的

也因此找到了我們的勇者小屋
那是什麼樣的方法   可以取得我們的資料?
我們就從DOM tree了解吧!


概念

屋子有屋子的架構





人體有人體的骨架





而網頁也有一個結構
我們叫它DOM tree
很多Node點連結而成的一片大樹



.......




反正  就是這樣的概念
抱歉我的畫工還停留在小學畫火柴人時期




它大概是長這樣子


華麗的一個房子

這樣的一個DOM結構
加上了Javascript  CSS華麗包裝後
變成了我們現在看到的這個網站
巴哈姆特首頁





由一塊塊DIV組合而成的網站
每個區塊都有對應的內容  大致上可以分成這樣






那如果沒有CSS Javascript 做樣式呢?
我們看到的首頁會變成這樣子



-----------------------------------------------------------------------------------------------------------------------------



差異很大對吧?
接下來我們再往下滑


-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------



所有位置 圖案全都跑掉了
而底下的巴友們的作品
原本是用瀑布流的形式
現在卻變成了這樣子的排列


-----------------------------------------------------------------------------------------------------------------------------


查看Dom tree

那要如何查看DOM Tree呢?
有兩個方法
(一)
在我們要檢查的元素上
右鍵->檢查






(二)
直接按F12也可以開啟觀看





結論

有關CSS的部分 有興趣的人可以前往這裡學習
暫時不列在教學範疇裡
那麼我們下一篇見囉!
2
-
未登入的勇者,要加入 2 樓的討論嗎?
板務人員:

0 筆精華,吸收日月精華中
一個月內新增 0
歡迎加入共同維護。


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】