16-3 Document 常用的方法

Original: https://course.andys.pro/Javascript-Intro/16-3-document-common-methods/

講義

1. 什麼是 Document 物件 (DOM)？

DOM 全名為 Document Object Model (文件物件模型)。瀏覽器會將 HTML 程式碼解析成一棵「樹 (Tree)」的結構，而 document 就是這棵樹的根節點。

• Window vs. Document：
  • window 指的是整個瀏覽器視窗。
  • document 指的是視窗裡面承載的那份 HTML 內容。

2. Document 常用的屬性

透過以下屬性，你可以快速抓取網頁的整體資訊：

• document.title：讀取或設定網頁的標題（顯示在瀏覽器分頁標籤上的文字）。
• document.URL：目前網頁的完整網址。
• document.images：回傳一個包含頁面中所有圖片的集合。
• document.links：回傳頁面中所有的超連結 (<a> 標籤)。
• document.forms：回傳頁面中所有的表單元素。

3. 動態寫入方法

• document.write()：將指定的內容（文字或 HTML）直接輸出到文件流中。
• document.writeln()：與 write 相似，但在結尾會自動加上一個換行符號。
• 重要警告：如果在網頁已經載入完畢（例如使用者點了某個按鈕）後呼叫 document.write()，它會清空並覆蓋現有的所有網頁內容！

4. 實務觀察：Lazy Load (延遲載入)

現代網頁（如 Mobile01）為了提升效能，常使用 Lazy Load 技巧。當你使用 document.images 查看時，會發現許多圖片在滑鼠滾動到該處之前，其 Class 可能標示為 lazy，滑過後才會變為 loaded 並真正載入圖片。

5. 小結

document 物件是前端開發的核心。透過它，我們可以抓取特定元素（如 getElementById）、修改文字內容、更換 CSS 樣式，或是追蹤頁面所有的圖片與連結。

影片逐字稿 (AI 生成)

在16-3 我們來看一下Document的常用屬性我們前面有先操作了一點我們可能有用過Document裡面的一兩個東西這邊我們要來更仔細的看一下Document有什麼常用屬性還有方法還有更多的方法好的 大家還記得Dome叫什麼嗎Document Object Model所以它是一個Document然後它本身是Object的模式 模型好的 那這邊還有階層式的關係其實它就是在它其實就是一棵樹就是一層一層這樣子下來然後有不同的屬性和方法Properties 和 Methods那我們可以用這些屬性和方法來建立網頁的互動性好的 我們來看一下Document 然後我們來看一下它的Document URL那我們剛剛選到剛剛的Google來做我們先清掉然後我們先拿Document的URL我是大喜那大家會發現其實我一個URL我可以從Document裡面去拿到我也可以從剛剛16-2的Window.location.herv是不是一樣的東西只是一個是從Window裡面去拿到現在的網頁連結另外一個是從Document裡面去拿到URL其實都是可以拿到的好的 再來我們來看一下這個HTML文件的標題Document點Title這時候Google的首頁它的Title就是Google或是我們在這個iPhone頁面上面或是我們在iPhone頁面上面你的Document的Title是iPhone 12集iPhone 12 Pro手腕點點點點好那如果你們在做網頁的時候比如說你們有Logo或是你們的網頁名稱你們也可以像這樣子在後面用一個減號加上你們的產品名或是用一個Or然後來加你的產品名讓你的網站的品牌識別度會更高好 再來我們來看HTML文件中的標籤你可以從Document的AnchorsLinksForms和Images可以拿到這些標籤那因為我們可能比較需要一個複雜一點的頁面所以我們用Mobile01那個頁面來測測看Document點Anchors那我們會拿到的是一個HTML Collection這裡面有這麼多的東西那大家還記得嗎我們要怎麼樣拿D0的東西第一個東西我們就用框框然後把D0的放進去我們就可以找到一個A然後這個A在哪裡咧我們找一下它在下面所以就是用這樣的方法我們可以來操作第0個或是第1個因為畫面有點雜把它清掉再來我們來看一下Document.Links哇 它這邊很多的Links對不對 都是A總共有820個連結那這邊Chrome也很聰明的幫大家把它整理100個100個裝在這裡面那我今天想要看第566個這時候我們就看到這個它連結在這裡那它是用PHP寫的有沒有所以PHP然後這樣子那不知道可不可以點一下這邊你也可以就是點一下跳到它就是它這邊有附有附這一個第566個的URL就放在這邊OK好的它是彰化線它的名稱是上面A是寫彰化線好的 我們再看一下Forms所以我們在Document裡面先清掉先砸Document.Links誒 不是LinksFormsSorry它沒有任何的FormOK再來我們看它的Images應該有蠻多的圖喔哇 有83個圖哇然後大家有看到它有一些Lazy.load所以它有些是Lazy.load有沒有後面都是Lazy那可以跟大家簡單介紹一下就是Lazy就是說它可能只有前面幾張圖是一開始的時候載進來的LazyLazy.load是說比如說像你看Lazy.loaded可能這幾張圖是你滑到那邊的時候它才動態的載入那我們再滑下來它這邊可能後面的圖才會動態載入先來看一下Lazy.loaded應該就變多了有沒有跟剛剛前面的比是不是剛剛只有Lazy然後Lazy.loaded只有三個這邊Lazy.loaded有幾個有多四個所以它這些動態載入載入的以後它會加上一個class就是加上一個classloadedOK點Lazy.loaded所以我們就可以大概看到它網頁裡面的一些做法那這個比如說你想要做一個服務可能像Pinterest一樣的按一下然後就讓這個頁面變成一個照片瀑布流你也可以直接用Document點Images來拉這些照片拉出來然後一張一張的變成像瀑布流給使用者看好的那我們來看一下Document的常用方法那Document也有Open可是它跟Windows.Open不一樣那它是可以重寫和追加當前的文檔內容那可是Windows.Open是瀏覽器本身的那個視窗的功能它是打開一個新的窗口而不會動到當前的文檔可是Document大家也知道說是我在Windows裡面這個當前的頁面的HTML的Open所以它是不一樣的喔Windows是說我這個瀏覽器的這個視窗叫做WindowsOK那Document是這個頁面裡面這個文檔叫做Document那Document.close可以去關閉用Document.open打開的文檔那GetElementByIdByName和ByTagName大家應該都很熟悉了我們前面在第二章有學過好的這邊我們要多學到幾個一個叫做Document.write那它可以把就是把東西寫到你的Document裡面去那等一下我們會用我們自己File裡面的Document來試試看那這邊有Document.write還有Document.writeLnLine就是它Line的縮寫叫Ln那它兩個東西主要差別是中間會添加一個空白好的那我們就這邊也來試一下吧好的我們換到我們剛剛的File這個很簡單的彩虹頁面MyDocument.write然後RainbowOK那這個時候我們H1就不見了我們就直接把我們的文檔寫成Body裡面只有RainbowOK嗎那如果我寫Rainbow我寫兩次它就會RainbowRainbow接在後面寫有沒有RainbowRainbow那我們試試看WriteLn第一次第一次它前面沒有夾空白第二次之間就有夾空白大家可以去試試看好不好你可以去試試看就說我WriteLn那WriteLn完以後我去Write呢這個是可以去玩玩看的你看它後面還是有空白喔可是後面就沒有了所以好像它RunLn後面又多一個空白這樣子好了這邊是16-3然後本篇的重點本章的重點在於說要了解Windows的物件的意義然後Windows的指物件和各自的特點功能那後面呢我們再多對於Document做補充同時我們在課場裡面也有提到Windows跟Document的不同一個是在瀏覽器裡面的視窗和另外一個是這個視窗裡面這個文檔這個頁面本身的DocumentOK這個操作好的這邊是16張

影片逐字稿largev2

在十六之三,我們來看一下Document的常用屬性我們前面有先操作了一點我們可能有用過Document裡面的一兩個東西這邊我們要來更仔細的看一下它Document有什麼常用屬性還有方法,還有更多的方法好的,大家還記得DOM叫什麼嗎?Document Object Model所以它是一個Document然後它本身是Object的模型好的,這邊還有階層式的關係其實它就是一棵樹就是一層一層這樣子下來然後有不同的屬性和方法Properties和Methods我們可以用這些屬性和方法來建立網頁的互動性好的,我們來看一下Document然後我們來看一下它的Document URL我們選到剛剛的Google來做我們先清掉然後我們先拿Document的URL大家會發現,其實一個URL我可以從Document裡面去拿到我也可以從剛剛16-2的window.location.herb是不是一樣的東西只是一個是從Window裡面去拿到現在的網頁連結另外一個是從Document裡面去拿到URL其實都是可以拿到的再來我們來看一下這個HTML文件的標題Document.title這時候Google的首頁它的Title就是Google或是我們在這個iPhone頁面上面我們的Document的Title是iPhone 12及iPhone 12 Pro首播動手玩點點點點點那如果你們在做網頁的時候比如說你們有Logo或是你們的網頁名稱你們也可以像這樣子在後面用一個簡號加上你們的產品名或是用一個OR來加你的產品名讓你的網站品牌識別度會更高再來我們來看HTML文件中的標籤你可以從Document的Anchors, Links, Forms, Images可以拿到這些標籤那因為我們可能比較需要一個複雜一點的頁面所以我們用Mobile01那個頁面來測測看看Document.anchors那我們會拿到的是一個HTML Collection這裡面有這麼多的東西那大家還記得嗎?我們要怎麼樣拿第一個東西我們就用框框然後把第一個放進去我們就可以找到一個A然後這個A在哪裡呢?找一下它在下面所以就是用這樣的方法我們可以來操作第一個或是第一個因為畫面有點雜我把它清掉再來我們來看一下Document.links哇它這邊很多的links都是A總共有820個連結那這邊Chrome也很聰明的幫大家把它整理100個100個裝在這裡面那我今天想要看第566個所以我們就看到這個它連結在這裡那它是用PHP寫的有沒有所以PHP然後這樣子那不知道可不可以點一下這邊你也可以點一下跳到它就是它這邊有附有附這一個第566個的URL就放在這邊好的它是彰化縣它名稱上面是寫彰化縣好的我們再來看一下Forms所以我們的Document裡面先清掉Document.links不是linksFormsSorry它沒有任何的FormOK再來我們看它的Images應該有蠻多的圖喔哇有83個圖哇然後大家有看到它有一些Lazy.load所以它有一些是Lazy.load後面都是Lazy那可以跟大家簡單介紹一下Lazy就是說它可能只有前面幾張圖是一開始的時候載進來的Lazy.load是說比如說像你看Lazy.loaded可能這幾張圖是你滑到那邊的時候它才動態的載入那我們再滑下來它這邊可能後面的圖才會動態的載入先來看一下Lazy.loaded應該就變多了有沒有跟剛剛前面的比是不是剛剛只有Lazy然後Lazy.loaded只有三個這邊Lazy.loaded有幾個有多四個所以它這些動態載入載入了以後它會加上一個class就是加上一個classloadedOK.lazy.loaded所以我們就可以大概看到它網頁裡面的一些作法那這個比如說你想要做一個服務可能像Pinterest一樣的按一下然後就讓這個頁面變成一個照片瀑布流你也可以直接用Document.images來拉這些照片拉出來然後一張一張的變成像瀑布流給使用者看好的那我們來看一下Document的採用方法那Document跟也有open可是它跟Window.open不一樣那它是可以重寫和追加當前的文檔內容那可是Window.open是瀏覽器本身的那個視窗的功能它是打開一個新的窗口而不會動到當前的文檔可是Document大家也知道說是我在Window裡面這個當前的頁面的HTML的open所以它是不一樣的喔Window是說我這個瀏覽器的這個視窗叫做WindowOK那Document是這個頁面裡面這個文檔叫做Document那Document.close可以去關閉用Document.open打開的文檔那GetElementByIdByName和ByTagName大家應該都很熟悉了我們前面在第二章有學過好了這邊我們要多學到幾個一個叫做Document.write那它可以把就是把東西寫到你的Document裡面去那等一下我們會用我們自己File裡面的Document來試試看那這邊有Document.write還有Document.write.ln.line就是它的line的縮寫叫ln那它兩個東西主要差別是中間會添加一個空白好的 那我們就這邊也來試一下吧好的 我們換到我們剛剛的File的這個很簡單的彩虹頁面MyDocument.write然後Rainbow那這個時候我們的H1就不見了我們就直接把我們的文檔寫成Body裡面只有RainbowOK嗎那如果我寫Rainbow我寫兩次它就會RainbowRainbow接在後面有沒有RainbowRainbow那我們來試試看write.ln第一次它前面沒有加空白第二次之間就有加空白好 大家可以去試試看好不好你可以去試試看就說我write.ln那write.ln完以後我去write呢這個是可以去玩玩看的你看它後面還是有空白喔可是後面就沒有了所以好像它write.ln後面會多一個空白好了 這邊是16-3然後本篇的重點本章的重點在於說要了解Windows的物件的意義然後Windows的子物件和各自的特點功能那後面呢我們再多對Document做補充同時我們在課堂裡面也有提到Windows跟Document的不同一個是在瀏覽器裡面的視窗和另外一個是這個視窗裡面這個文檔這個頁面本身的Document的操作好了 這邊是16張