[微精通：網頁設計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); }