1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <p id="p1"></p> 9 <h1 id="header"></h1> 10 <img id="image" src="landscape1.jpg" width="160" height="120"> 11 <hr> 12 <p id="p2">Hello World!</p> 13 <p id="p3">Hello World!</p> 14 <button type="button" onclick="document.getElementById('p2').style.color = 'red'">點擊改變上面的Hello World！的顏色</button> 15 <input type="button" value="隱藏文本" onclick="document.getElementById('p2').style.visibility='hidden'"/> 16 <input type="button" value="顯示文本" onclick="document.getElementById('p2').style.visibility='visible'"/> 17 18 <hr> 19 <button id="myBtn">點這里</button> 20 <p id="demo"></p> 21 <hr> 22 <input type="text" id="fname" onchange="myFunction()" placeholder="離開輸入框后，小寫字母轉為大寫字母"><!--onchange 事件常結合對輸入字段的驗證來使用--> 23 <hr><h1>鼠標放在元素上，改變內容</h1> 24 <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color: green;width: 120px;height: 30px;padding: 40px;">鼠標移動上面</div><!--onmouseover 和 onmouseout 事件可用於在用戶的鼠標移至 HTML 元素上方或移出元素時觸發函數；首先當點擊鼠標按鈕時，會觸發 onmousedown 事件（按下鼠標不松手），當釋放鼠標按鈕時，會觸發 onmouseup 事件，最后，當完成鼠標點擊時，會觸發 onclick 事件--> 25 26 <hr><h1>實例使用 addEventListener() 方法在同一個按鈕中添加多個事件</h1> 27 <button id="myBtn1">點我改變</button> 28 <p id="demo1">不同的事件，不同的改變</p> 29 30 <hr><h1>添加和移除元素(節點)</h1> 31 <div id="div1"> 32 <p id="p4">這是一個段落</p> 33 </div> 34 <hr><h1>修改所有 < p > 元素的背景顏色</h1> 35 <p>點擊按鈕修改p元素的背景顏色</p> 36 <button onclick="myFunction4()">點擊改變p元素顏色</button> 37 38 39 <script> 40 document.write(Date());//絕對不要在文檔(DOM)加載完成之后使用 document.write()。這會覆蓋該文檔 41 document.getElementById("p1").innerHTML = "新文本！";//改變 HTML 元素的內容 42 document.getElementById("header").innerHTML = "新標題！"; 43 document.getElementById("image").src = "landscape.jpg";//改變了 <img> 元素的 src 屬性 44 //改變 <p> 元素的樣式 45 document.getElementById("p3").style.color = "blue"; 46 document.getElementById("p3").style.fontFamily = "Arial"; 47 document.getElementById("p3").style.fontSize = "larger"; 48 49 document.getElementById("myBtn").onclick = function () {displayDate()}; 50 function displayDate() { 51 document.getElementById("demo").innerHTML=Date(); 52 } 53 function myFunction() { 54 var x = document.getElementById("fname"); 55 x.value = x.value.toLocaleUpperCase(); 56 } 57 function mOver(obj) { 58 obj.innerHTML = "謝謝"; 59 obj.style.color = "yellow" 60 61 } 62 function mOut(obj) { 63 obj.innerHTML = "你的鼠標已離開"; 64 obj.style.color = "white" 65 } 66 67 var x = document.getElementById("myBtn1"); 68 x.addEventListener("mouseover",myFunction1); 69 x.addEventListener("click",myFunction2); 70 x.addEventListener("mouseout",myFunction3); 71 function myFunction1() { 72 document.getElementById("demo1").innerHTML += "鼠標放上來了<br>"; 73 document.getElementById("demo1").style.color = "blue" 74 } 75 function myFunction2() { 76 document.getElementById("demo1").innerHTML +="點擊了鼠標<br>"; 77 document.getElementById("demo1").style.color = "red" 78 } 79 function myFunction3() { 80 document.getElementById("demo1").innerHTML +="鼠標移走了<br>"; 81 document.getElementById("demo1").style.color = "black" 82 } 83 window.addEventListener("resize",function () {//重置瀏覽器的窗口觸發 "resize" 事件句柄 84 document.getElementById("demo1").innerHTML = Math.random(); 85 }); 86 87 var para = document.createElement("p");//用於創建 <p> 元素 88 var node = document.createTextNode("這是一個新的段落");//為 <p> 元素創建一個新的文本節點 89 para.appendChild(node);//將文本節點添加到 <p> 元素中 90 var element=document.getElementById("div1");//查找已存在的元素 91 element.appendChild(para);//在一個已存在的元素中添加 p 元素 92 var child = document.getElementById("p4"); 93 element.insertBefore(para,child);//將新元素添加到開始位置 94 95 function myFunction4() { 96 var myCollection = document.getElementsByTagName("p"); 97 for(var i = 0; i<myCollection.length; i++){ 98 myCollection[i].style.color = "red"; 99 } 100 } 101 102 103 </script> 104 </body> 105 </html>