[微精通：網頁設計Vue + Node.js + MySQL] 2.2. DOM元素

張貼者： 日期：
瀏覽器顯示網頁的內容其實都是透過DOM元素來達成，透過程式的控制，讓你可以隨心所遇的改變網頁顯示的內容。

 

image/svg+xml2.2. DOM 元素 可否依殭屍的資料動態製作網⾴的內容 ? var result = confirm( ' 確定已滿 15+ ?' ); if (result == false ){ location.href= "http://www.google.com" ; } var zombies = [ {name: ' 瘋狂傑克 ' , age: 3.3 , isVegetarian: true } , {name: ' 懶懶瑪琍 ' , age: 10 , isVegetarian: true } , {name: ' ⼤提姆 ' , age: 5 , isVegetarian: false } , {name: ' 史提夫 ' , age: 2 , isVegetarian: false } , {name: ' 功夫李 ' , age: 1 , isVegetarian: true } , ] ; <meta charset = "utf-8" > <html> <head> <link rel = 'stylesheet' href = 'zombie.css' > </head> <body> < ul > < /ul > </body> < script type = "text/javascript" src = " home.js " >< /script > </html> var result = confirm( ' 確定已滿 15+ ?' ); if (result == false ){ location.href= "http://www.google.com" ; } var z1 = { name : ’ 瘋狂傑克 ' , age : 3.3 , isVegetarian : true }; z1 . name; z1.name = ' 正常的傑克 ' ; var zombies = [ { name: ' 瘋狂傑克 ' , age: 3.3 , isVegetarian: true } , { name: ' 懶懶瑪琍 ' , age: 10 , isVegetarian: true } , { name: ' ⼤提姆 ' , age: 5 , isVegetarian: false } , { name: ' 史提夫 ' , age: 2 , isVegetarian: false } , { name: ' 功夫李 ' , age: 1 , isVegetarian: true } ] ; zombies. length ; zombies [ 0 ] ; zombies [ 0 ] = z1 ; console.log (z1. name ); console.log (zombies. length ); console.log (zombies [ 0 ] . name ); var result = confirm( ' 確定已滿 15+ ?' ); if (result == false ){ location.href= "http://www.google.com" ; } var zombies = [ {name: ' 瘋狂傑克 ' , age: 3.3 , isVegetarian: true }, {name: ' 懶懶瑪琍 ' , age: 10 , isVegetarian: true }, {name: ' ⼤提姆 ' , age: 5 , isVegetarian: false }, {name: ' 史提夫 ' , age: 2 , isVegetarian: false }, {name: ' 功夫李 ' , age: 1 , isVegetarian: true } ] ; for ( i = 0 ; i < zombies.length ; i++ ) { let z = zombies [ i ]; console.log ( z ); } <meta charset = "utf-8" > <html> <head> <link rel = 'stylesheet' href = 'zombie.css' > </head> <body> < ul id = ' zombies_ul ' > < /ul > </body> <script type = "text/javascript" src = "home.js" ></script> </html> var result = confirm( ' 確定已滿 15+ ?' ); if (result == false ){ location.href= "http://www.google.com" ; } var zombies = [ {name: ' 瘋狂傑克 ' , age: 3.3 , isVegetarian: true }, {name: ' 懶懶瑪琍 ' , age: 10 , isVegetarian: true }, {name: ' ⼤提姆 ' , age: 5 , isVegetarian: false }, {name: ' 史提夫 ' , age: 2 , isVegetarian: false }, {name: ' 功夫李 ' , age: 1 , isVegetarian: true } ]; var zombiesUL = document . getElementById ( ' zombies_ul ' ); var result = confirm( ' 確定已滿 15+ ?' ); if (result == false ){ location.href= "http://www.google.com" ; } var zombies = [ {name: ' 瘋狂傑克 ' , age: 3.3 , isVegetarian: true }, {name: ' 懶懶瑪琍 ' , age: 10 , isVegetarian: true }, {name: ' ⼤提姆 ' , age: 5 , isVegetarian: false }, {name: ' 史提夫 ' , age: 2 , isVegetarian: false }, {name: ' 功夫李 ' , age: 1 , isVegetarian: true } ] ; var zombiesUL = document.getElementById( ' zombies_ul ' ); for ( i = 0 ; i < zombies.length ; i++) { let zombieLI = document.createElement ( ' li ' ); zombieLI . innerText = zombies [ i ]. name ; } <meta charset = "utf-8" > <html> <head> <link rel = 'stylesheet' href = 'zombie.css' > </head> <body> < ul id = ' zombies_ul ' > < /ul > </body> <script type = "text/javascript" src = "home.js" ></script> </html> var result = confirm( ' 確定已滿 15+ ?' ); if (result == false ){ location.href= "http://www.google.com" ; } var zombies = [ {name: ' 瘋狂傑克 ' , age: 3.3 , isVegetarian: true }, {name: ' 懶懶瑪琍 ' , age: 10 , isVegetarian: true }, {name: ' ⼤提姆 ' , age: 5 , isVegetarian: false }, {name: ' 史提夫 ' , age: 2 , isVegetarian: false }, {name: ' 功夫李 ' , age: 1 , isVegetarian: true } ] ; var zombiesUL = document.getElementById ( ' zombies_ul ' ); for (i = 0 ; i < zombies.length; i++) { let zombieLI = document.createElement ( ' li ' ); zombieLI.innerText = zombies[i].name; zombiesUL . appendChild ( zombieLI ); } <meta charset = "utf-8" > < html > < head > < link rel = 'stylesheet' href = 'zombie.css' > < /head > < body > < ul id = 'zombies_ul' > < li class = 'red-zombie-name' > 瘋狂傑克 < /li > < li class = 'red-zombie-name' > 懶懶瑪琍 < /li > < li class = 'red-zombie-name' > ⼤提姆 < /li > < li > 史提夫 < /li > < li > 功夫李 < /li > x < /ul > < /body > < script type = "text/javascript" src = "home.js" >< /script > < /html > var result = confirm( ' 確定已滿 15+ ?' ); if (result == false ){ location.href= "http://www.google.com" ; } var zombies = [ {name: ' 瘋狂傑克 ' , age: 3.3 , isVegetarian: true }, {name: ' 懶懶瑪琍 ' , age: 10 , isVegetarian: true }, {name: ' ⼤提姆 ' , age: 5 , isVegetarian: false }, {name: ' 史提夫 ' , age: 2 , isVegetarian: false }, {name: ' 功夫李 ' , age: 1 , isVegetarian: true } ]; var zombiesUL = document.getElementById ( ' zombies_ul ' ); for (i = 0 ; i < zombies.length; i++) { let zombieLI = document.createElement ( ' li ' ); zombieLI.innerText = zombies[i].name; zombiesUL.appendChild ( zombieLI ); } var result = confirm ( ' 確定已滿 15+ ?' ); if (result == false ){ location .href= "http://www.google.com" ; } var zombies = [ {name: ' 瘋狂傑克 ' , age: 3.3 , isVegetarian: true }, {name: ' 懶懶瑪琍 ' , age: 10 , isVegetarian: true }, {name: ' ⼤提姆 ' , age: 5 , isVegetarian: false }, {name: ' 史提夫 ' , age: 2 , isVegetarian: false }, {name: ' 功夫李 ' , age: 1 , isVegetarian: true } ]; var zombiesUL = document .getElementById( 'zombies_ul' ); for (i = 0 ; i < zombies.length; i++) { let zombieLI = document .createElement( 'li' ); zombieLI.innerText = zombies[i].name; zombiesUL.appendChild(zombieLI); } 1. 宣告⼀個 zombies 變數，使⽤陣列放入 5 個殭屍物件。 w2_2_1 - home.js w2_2_1 - home.html 2. 透過 <script> 標籤載入 home.js 檔，但其中 的殭屍物件⼜要怎麼動態顯⽰在網⾴上呢 ? 理解物件與陣列 w2_2_2 - home.js 1. JavaScript 中⼤括號 ({}) 為⼀個物件，每個物件的屬性可以⽤冒號 (:) 對 應⼀個值，屬性就好像是存在於物件上的變數⼀樣，同樣可以保存值。 2. 每組屬性與值可⽤逗號 (,) 隔開。 4. 只要透過句點 (.) 的⽅式即可存取屬性。 5. 取得 name 屬性中的值。 3. 將這個殭屍物件放在 z1 變數中。 6. 透過指派運算式 (=) 更新 name 屬性中的值。 7. 宣告⼀個 zombies 變數。 8. 放入⼀個陣列，在 JavaScript 中括號 ([]) 即為陣列。 9. 陣列可以保存多個值，多個值之間使⽤逗號 (,) 隔開，在此放入 5 個殭屍物件。 10. 陣列也是⼀個物件，特別的是它的 length 屬性即表⽰陣列中值的個數，在此為 5 。 11. 若對陣列使⽤中括號 ([]) 即表⽰進⾏索引的動作，其中帶入 0 的索引值即是取得陣列中位置 0 的值，陣列的位置會從 0 開始。 12. 同樣的也可以使⽤指派運算式 (=) 進⾏此位置值的更換。 13. 理解物件後，若要輸出資訊⾄控制台中，可以⽤內建的 console 物件上的 log() ⽅法將要輸出的值帶入其中即可。 14. 在 log() ⽅法中只要將想要輸出的值帶入⼩括號 (()) 中即可將值輸出。 15. 開啟 home.html 網⾴後於 ’ 檢視 ’ 中開啟 ’JavaScript' 控制台，⽽控制台即是 Console 。 16. 按⼀下重新整理，讓網⾴重新執⾏。 17. 你就會看到我們在程式中使⽤ console.log() 函式輸出的訊息。 1 2 3 1 2 3 理解 for w2_2_3 - home.js 1. 宣告⼀個 zombies 變數，放入⼀個陣列，其中有 5 個殭屍物件。 2. 使⽤ for 迴圈，可幫助我們依序存取陣列的殭屍物件， for 後⾯的⼩括號 (()) 則可進⾏⼀些設定。 3. ，第 1 個部份會產⽣⼀個 i 變數，預設為 0 ，接著是⼀個分號 (;) 。 4. 第 2 個部份是是否繼續執⾏的條件式，在此設定只要 i ⼩於 zombies 變數中陣列的 length ，則執⾏後⾯⼤括號 ({}) 中的程式。 5. 第 3 部份會在每次⼤括號 ({}) 執⾏完後 執⾏， i++ 是把 i 變數中的值累加 1 的簡寫。 6. 因此 i 變數的值會從 0 開始到 length-1 ，即 0~4 ， 透過 i 變數，即可搭配索引 ([]) 依序的取出殭屍物件。 7. 在此改⽤ let 宣告變數，與 var 不同的是的變數會活在⽬前的程式 區塊⼤括號 ({}) 中，離開這個⼤括號 ({}) 即會不⾒，⽤以確保 for 每 次執⾏⼤括號的程式， z 變數都會是⼀個全新的變數。 9. 透過 for 跑出在 Conole 的殭屍物件，可以按下 鍵頭向下展開，看到每個殭屍物件的詳細屬性。 1 1 8. 最近透過 console.log() 函式輸出殭屍物件。 1. 為顯⽰殭屍區塊的 <ul> 加上 id w2_2_4 - home.html 1. 為原顯⽰殭屍資料的 <ul> 加上 id 屬性， 設定為 'zombies_ul' 。 2. getElementById() ⽅法， 
 依 id 取得顯⽰殭屍區塊的 DOM 元素 w2_2_4 - home.js 1. DOM 為 'Document Object Model’ ，的縮寫，後⾯會說明為何叫 DOM 。在 此使⽤ document 物件上的 getElementById() ⽅法在⼩括號 (()) 中帶入參數 值 'zombies_ul' ，找出 id 為 'zombies_ul' 的 <ul>DOM 元素， DOM 元素也是 ⼀種物件，它是由 HTML 中的標籤轉換⽽來，後續會做詳細說明什麼是 DOM 元素。 2. ⽽要呼叫⼀個物件下的⽅法，只需透過句點 (.) 的⽅式呼叫即可。 3. for + createElement() ⽅法， 
 動態建立每位殭屍的 DOM 元素 w2_2_5 - home.js 1. 使⽤ for 迴圈，透過 createElement() ⽅法依序為每個殭屍建立 <li> 的 DOM 元素。 2. 建立的 <li>DOM 元素放在 zombieLI 變數中。 3. 透過中括號 ([]) 帶入索引位置 i ，依序的將陣列中的殭 屍物件取出，取出後在透過句點 (.) 取得 name 屬性的值。 4. 使⽤ innerText 屬性， 將殭屍的姓名設定在 <li> 與 </li> 之間。 4. for + appendChild() ⽅法，動態加入殭屍的 DOM 元素 w2_2_6 - home.html 1. 這是使⽤ document 物件上的 getElementById() ⽅ 法，找出 id 為 'zombies_ul' 的 <ul>DOM 元素。 2. 使⽤ for 迴圈，透過 createElement() ⽅法，依序為每個殭屍建立 <li> 的 DOM 元素。 3. 最後將建立 <li>DOM 元素使⽤ appendChild() ⽅法將 zombieLI 變數中的 <li>DOM 元素加⾄ id 為 'zombies_ul' 的 <ul> 中，加入後即可在瀏覽器上看到這些⽤程式新增的殭屍資訊。 w2_2_6 - home.js 1 1 4. 這些出現在 <lu> 元素上的殭屍名字，是我們使⽤ Javascirpt 動態建立 DOM 元素所產⽣的，如此我們就做到 動態依 Javascript 的殭屍物件呈現⾴⾯內容的需求。 什麼是標籤 ? 什麼是 DOM 元素 ? 1. 當瀏覽器讀取到 home.html 時，瀏覽器會將這些 <html> 中的內容解讀為 DOM 元素，然後顯⽰在畫⾯上。 2. 每⼀個標籤，都會變成⼀個 DOM 物件，可以說標籤是 HTML 中所使⽤的⽂字，⽽ DOM 元素則是瀏覽器⽣成的產物，這也是為 何稱之為 DOM - Document Object Model 的意思，因為每 個標籤都會會被轉為⼀個物件看待，即物件控管的模型，⽽所 有顯⽰在畫⾯上的內容，都是瀏覽器轉換的⼀個⼀個 DOM 元素。 document html head ul li body link script li li li li w2_2_7 - home.html li li li li li 4. 這些 DOM 元素可透過程式控制，比如找到特 定 id 為 'zombies_ul' 的 DOM 元素。 3. 在畫⾯上，前 5 個殭屍姓名是由 home.html 轉換後的 DOM 元素顯⽰⽽來。 5. 透過程式建立 <li>DOM 元素，這些程式 建立的 DOM 元素，加在即有的 DOM 元素上。 w2_2_7 - home.js 6. 加上的 DOM 元素即會顯⽰在畫⾯ 上讓我們看到，⽽後⾯的 5 個殭屍名 字即是透過程式加到 id 為 ’zombies_ul' 的 <ul> 元素中。 id='zombies_ul' 原來， DOM 與 JS 都寄⽣在這個 'window' 宿主上 1. 點選 ’JavaScript' 控制台開啟控制台。 2. 輸入 ’window’ 按 Enter ， Chrome 會把 window 物件印出來。 3. 在 window 下你可以找到我們 先前使⽤的 confirm() 函式、 document 物件與 location 物 件。⽽⼀個網⾴在開啟時，瀏覽 器都會建立 wdinow 物件，並將所 有相關的物件放在並 ’ 寄宿 ' 在這 個 window 物件上，可以想像 window 物件就是⼀網⾴執⾏的⼀ 個環境物件。也因為 window 是⼀ 個預設的環境，因此在使⽤上⾯ 的物件、⽅法時都不需要特別寫 到 ’window' ，直接使⽤即可。 w2_2_8 - home.js 4. 甚⾄是在程式中宣告的 zombies 變數與 zombiesUL 變數都會寄⽣在 window 物件上。 meta

留言

張貼留言