第3章 你也有控制權（DOM操作）
如何用JavaScript去操作HTML元素和CSS樣式，實現簡單的動態操作。
- 3-1 認識DOM
- 3-2 通過ID獲取元素
- 3-3 innerHTML 屬性
- 3-4 改變 HTML 樣式
- 3-5 顯示和隱藏（display屬性）
- 3-6 控制類名（className 屬性）
第4章 編程挑戰
不斷實踐，提高技能。
- 4-1 編程挑戰
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>認識DOM</title> 6 </head> 7 <body> 8 <p>HTML文檔可以說由節點構成的集合，三種常見的DOM節點:</p> 9 <ol> 10 <li>元素節點：<html>、<body>、<p>等都是元素節點，即標簽。如圖一</li> 11 <li>文本節點:向用戶展示的內容，如<li>...</li>中的JavaScript、DOM、CSS等文本。</li> 12 <li>屬性節點:元素屬性，如<a>標簽的鏈接屬性href="http://www.dhnblog.com/"。如圖二</li> 13 </ol> 14 <p><img src="images/demo3-1-1.jpg" title="圖一"></p> 15 <p><img src="images/demo3-1-2.jpg" title="圖二"></p> 16 </body> 17 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>通過ID獲取元素</title> 6 </head> 7 <body> 8 <h3>hello</h3> 9 <p id='con'>i love javascript</p> 10 <p> JavaScript是一種基於對象、事件驅動的簡單腳本語言，嵌入在HTML文檔中，由瀏覽器負責解釋和執行，在網頁上產生動態的顯示效果並實現與用戶交互功能。</p> 11 <script> 12 // document.getElementById("id") 13 var mystr=document.getElementById('con'); 14 document.write(mystr); 15 /* 16 object HTMLParagraphElement 對象 HTML段落元素，獲取到的是元素，這個元素也就是對象， 17 獲取到的對象不會顯示里面的值，所以顯示object HTMLParagraphElement，想要抽取出里面的值，就用 innerHTML 獲取 18 獲取的元素是一個對象，如想對元素進行操作，我們要通過它的屬性或方法。 19 */ 20 </script> 21 </body> 22 </html>
1 <!DOCTYPE> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>innerHTML 屬性</title> 6 <!-- <script type="text/javascript"> 7 // Object.innerHTML//語法 8 var mycon=document.getElementById('con'); 9 document.write('P標簽原始內容:'+mycon.innerHTML+'<br >'); 10 mycon.innerHTML="今天陽光明媚"; 11 document.write('P標簽現在內容:'+mycon.innerHTML+'<br >'); 12 </script> --> 13 </head> 14 <body> 15 <p id="con">你好4月份</p> 16 <p>當js寫在這個頭部，報錯Uncaught TypeError: Cannot read property 'innerHTML' of null</p> 17 <!-- 瀏覽器截圖效果展示 --> 18 <p><img src="images/demo3-3-1.jpg" ></p> 19 <p><img src="images/demo3-3-2.jpg" ></p> 20 </body> 21 22 <script type="text/javascript"> 23 // Object.innerHTML//語法 24 var mycon=document.getElementById('con'); 25 document.write('P標簽原始內容:'+mycon.innerHTML+'<br >'); 26 mycon.innerHTML="今天陽光明媚"; 27 document.write('P標簽現在內容:'+mycon.innerHTML+'<br >'); 28 </script> 29 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>改變 HTML 樣式</title> 6 <script type="text/javascript"> 7 // Object.style.property=new style; 8 // Object是獲取的元素對象，如通過document.getElementById("id")獲取的元素。 9 // property屬性 10 </script> 11 </head> 12 <body> 13 <p id="con">hello world</p> 14 <script type="text/javascript"> 15 var mycon=document.getElementById('con'); 16 mycon.style.color='#fff'; 17 mycon.style.fontSize='18px'; 18 mycon.style.backgroundColor='green'; 19 </script> 20 <p>基本屬性表（property）:</p> 21 <img src="images/demo3-4-1.jpg" > 22 <img src="images/demo3-4-2.jpg" > 23 </body> 24 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>顯示和隱藏（display屬性）</title> 6 </head> 7 <body> 8 <p id="ceshi">做為一個Web開發師來說，如果你想提供漂亮的網頁、令用戶滿意的上網體驗，JavaScript是必不可少的工具。</p> 9 <script type="text/javascript"> 10 // Object.style.display = value 11 var ceshi=document.getElementById('ceshi'); 12 function ceshi1(){ 13 ceshi.style.display='none'; 14 } 15 function ceshi2(){ 16 ceshi.style.display='block'; 17 } 18 </script> 19 <form action="" method=""> 20 <input type="button" name="" id="" value="顯示內容" onclick="ceshi2()"/> 21 <input type="button" name="" id="" value="隱藏內容" onclick="ceshi1()"/> 22 </form> 23 <p>value取值:</p> 24 <img src="images/demo3-5-1.jpg" > 25 <p>代碼展示:</p> 26 <img src="images/demo3-5-2.jpg" > 27 </body> 28 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>控制類名（className 屬性）</title> 6 <script type="text/javascript"> 7 /*object.className = classname 8 1.獲取元素的class 屬性 9 2. 為網頁內的某個元素指定一個css樣式來更改該元素的外觀*/ 10 </script> 11 <style type="text/css"> 12 .mychang{ 13 color: #fff; 14 background-color: #f90; 15 height: 60px; 16 width: 80%; 17 line-height: 60px; 18 font-size: 16px; 19 } 20 .ceshi{ 21 font-size: 18px; 22 color: #008000; 23 } 24 </style> 25 </head> 26 <body> 27 <p id="add"> JavaScript使網頁顯示動態效果並實現與用戶交互功能</p> 28 <input type="button" name="" id="" value="添加樣式" onclick="myadd()"/> 29 <h3 id="change" class="one">JavaScript使網頁顯示動態效果並實現與用戶交互功能</h3> 30 <input type="button" name="" id="" value="更改外觀" onclick="mychange()"/> 31 <script type="text/javascript"> 32 function myadd(){ 33 document.getElementById('add').className='ceshi' 34 } 35 function mychange(){ 36 document.getElementById('change').className='mychang'; 37 } 38 </script> 39 </body> 40 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>控制類名（className 屬性）補充</title> 6 <style type="text/css"> 7 .one{ 8 font-size: 14px; 9 width: 200px; 10 color: red; 11 } 12 .two{ 13 font-size: 20px; 14 width: 400px; 15 color: green; 16 } 17 </style> 18 </head> 19 <body> 20 <p id="str" class="one">郁悶,又丟了U盤</p> 21 <form action="" method=""> 22 <input type="button" name="" id="" value="點擊更改" onclick="modifyclass()"/> 23 </form> 24 <script type="text/javascript"> 25 var mystr=document.getElementById('str'); 26 document.write('p元素的class值為:'+mystr.className+'<br />') 27 function modifyclass(){ 28 mystr.className='two' 29 } 30 </script> 31 <p>代碼展示:</p> 32 <img src="images/demo3-6-1.jpg" > 33 <img src="images/demo3-6-2.jpg" > 34 </body> 35 </html>
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="txttent-Type" txttent="text/html; charset=gb2312" /> 5 <title>style樣式</title> 6 <style type="text/css"> 7 *{ font-size:12px;} 8 #txt{ 9 height:400px; 10 width:600px; 11 border:#333 solid 1px; 12 padding:5px; 13 14 } 15 p{ 16 line-height:18px; 17 text-indent:2em;} 18 </style> 19 </head> 20 <body> 21 <h2 id="con">JavaScript課程</H2> 22 <div id="txt"> 23 <h5>JavaScript為網頁添加動態效果並實現與用戶交互的功能。</h5> 24 <p>1. JavaScript入門篇，讓不懂JS的你，快速了解JS。</p> 25 <p>2. JavaScript進階篇，讓你掌握JS的基礎語法、函數、數組、事件、內置對象、BOM瀏覽器、DOM操作。</p> 26 <p>3. 學完以上兩門基礎課后，在深入學習JavaScript的變量作用域、事件、對象、運動、cookie、正則表達式、ajax等課程。</p> 27 28 </div> 29 <form> 30 <input type="button" value="改變顏色" onClick="dcolor()"> 31 <input type="button" value="改變寬高" onClick="dwh()"> 32 <input type="button" value="隱藏內容" onClick="dh()"> 33 <input type="button" value="顯示內容" onClick="ds()"> 34 <input type="button" value="恢復" onClick="dclear()"> 35 36 </form> 37 <script type="text/javascript"> 38 function dcolor(){ 39 var mychar = document.getElementById("txt"); 40 mychar.style.color="red"; 41 mychar.style.backgroundColor="#ccc"; 42 } 43 44 function dwh(){ 45 var mychar = document.getElementById("txt"); 46 mychar.style.width="400px"; 47 mychar.style.height="200px"; 48 } 49 50 function dh(){ 51 var mychar = document.getElementById("txt"); 52 mychar.style.display="none"; 53 } 54 55 function dclear(){ 56 if(confirm("確定要取消設置嗎?")){ 57 var mychar = document.getElementById("txt"); 58 mychar.style.color="#000"; 59 mychar.style.backgroundColor="#fff"; 60 mychar.style.width="600px"; 61 mychar.style.height="400px"; 62 mychar.style.display="block"; 63 } 64 } 65 function ds(){ 66 var mychar = document.getElementById("txt"); 67 mychar.style.display="block"; 68 } 69 </script> 70 </body> 71 72 </html>