一. 獲取元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function test() { // 獲取userName的兩種方法： // 1. 根據ID獲取userName對象,一個ID只能使用一次 let userName = document.getElementById("userName"); // console.log(userName); // <input id="userName" type="text"> // alert(userName); // [object HTMLInputElement] // 2. 根據標簽名來獲取userName對象 // 這里注意，因為同一個標簽名對應有多個標簽內容 // 因此這里得到的是一個數組 let userNameList = document.getElementsByTagName("input"); // console.log(userNameList[0]); // <input id="userName" type="text"> // alert(userNameList[0]); // // [object HTMLInputElement] // 展示數組中每個元素——使用for循環 // for (let i = 0; i < userNameList.length; i++) { // alert(userNameList[i]); // 5個[object HTMLInputElement] // } // 根據元素的屬性(name屬性)來獲取對應標簽信息 // 注意這里同樣是數組 let hobbyList = document.getElementsByName("hobby"); // console.log(hobbyList[0]); // <input type="checkbox" name="hobby" value="eat"> // alert(hobbyList[0]); // [object HTMLInputElement] // alert(hobbyList[0].nodeName); // INPUT(獲取節點名字) // alert(hobbyList[0].nodeType); // 1(獲取節點類型) // 根據標簽名查找所有子節點(chileNodes) var pNodes = document.getElementsByTagName("p"); // var childNodes = pNodes[0].childNodes; // console.log(childNodes); // NodeList(3) [ #text, span, #text ] // alert(childNodes[0]).nodeType; // [object Text](查看子節點類型,空格或換行都屬於文本節點) // 獲取父節點(parentNode) let parentNode = pNodes[0].parentNode; // console.log(parentNode); // <body onload="test()"> // alert(parentNode); // [object HTMLBodyElement] // 獲取同級節點 let otherNode = pNodes[0].nextElementSibling; // console.log(otherNode); // <p class="p2"> // alert(otherNode); // [object HTMLParagraphElement] // alert(otherNode.nodeName); // p // 獲取元素hr let hrNode = pNodes[0].previousElementSibling.nodeName; alert(hrNode); // HR } </script> </head> <!--這里的作用是讓頁面先加載好再執行上面的JS代碼--> <body onload="test()"> 用戶名：<input type="text" id="userName" /> 密碼：<input type="text" id="userPwd" /> 興趣愛好：吃<input type="checkbox" name="hobby" value="eat" /> 喝<input type="checkbox" name="hobby" value="drink" /> 玩<input type="checkbox" name="hobby" value="happy" /> <hr /> <p class="p1"> <span>今天禮拜五</span> </p> <p class="p2"> <span>明天禮拜六</span> </p> </body> </html>
二. 元素的屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> // 頁面加載完成后執行function函數中的js代碼 window.onload = function () { // 根據元素的class屬性查找 let pNodes = document.getElementsByClassName("p1"); console.log(pNodes[0].innerHTML); // <span>今天禮拜六</span> // 獲取元素p1的html內容 // alert(pNodes[0].innerHTML); // <span>今天禮拜六</span> // 改變元素p1的html內容 pNodes[0].innerHTML = "<h1>內容已變</h1>"; }; </script> </head> <body> <p class="p1"> <span>今天禮拜六</span> </p> <p class="p2"> <span>明天禮拜日</span> </p> </body> </html>
三. value屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> // value屬性只存在以下三種標簽中 // input textarea select function setText() { // 修改輸入框value的屬性值 document.getElementById("userName").value = "顯示信息變了"; } function getText() { // 獲得輸入框value的屬性值 let userName = document.getElementById("userName"); alert(userName); } </script> </head> <body> <input type="text" id="userName" value="顯示信息1"> <input type="text" onclick="setText()" value="顯示信息2"> <input type="text" onclick="getText()" value="顯示信息3"> </body> </html>
四. 顯示系統時間
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function showTime() { let dayMsg = new Date(); let year = dayMsg.getFullYear(); // 獲取年份 let month = dayMsg.getMonth(); // 獲取月份 let day = dayMsg.getDate(); // 獲取日 let hour = dayMsg.getHours(); // 獲取小時 let minute = dayMsg.getMinutes(); // 獲取分鍾 let second = dayMsg.getSeconds(); // 獲取秒 let nowTime = year + "年" + month + "月" + day + "日" + hour + "時" + minute + "分" + second + "秒"; let spanNode = document.getElementById("systime"); // 設置span標簽要顯示的內容 spanNode.innerHTML = nowTime.fontcolor("blue"); } window.onload = function () { // 設置一秒的延遲再執行function函數 setInterval("showTime()", 1000); } </script> </head> <body> <span id="systime"></span> </body> </html>
五. 計時器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> let sec = 0; let min = 0; let ho = 0; let taskId; // 設置定時器ID // 開始計時 function start() { if (taskId == null) { taskId = setInterval(function () { sec++; // 先讓秒針計數 if (sec == 60) { min++; // 每60s加1分鍾，秒針重置為0 sec = 0; } if (min == 60) { ho++; min = 0; } if (ho == 24) { sec = 0; min = 0; ho = 0; } // 顯示設置，當秒數、分鍾數、小時數小於10，前面要加個0 if (sec < 10) { document.getElementById("second").innerHTML="0" + sec; } else { document.getElementById("second").innerHTML=sec; } if (min < 10) { document.getElementById("minute").innerHTML="0" + min; } else { document.getElementById("minute").innerHTML=min; } if (ho < 10) { document.getElementById("hour").innerHTML="0" + ho; } else { document.getElementById("hour").innerHTML=ho; } }, 100) } } function stop() { clearInterval(taskId); taskId = null; } </script> </head> <body> <span id="hour">00</span> <span id="minute">00</span> <span id="second">00</span> <hr /> <input type="button" value="點擊開始計時" onclick="start()" /> <input type="button" value="點擊停止計時" onclick="stop()" /> </body> </html>
六. 購物車全選功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function selectAll() { // 設置"全選"所在標簽的狀態 let status = document.getElementById("shopping").checked; // 設置所有"checkbox"的標簽的狀態跟"全選"的狀態一樣 let cbNodes = document.getElementsByTagName("input"); for (let i = 0; i < cbNodes.length; i++) { cbNodes[i].checked = status; } } </script> </head> <body> <!-- cellpadding: 單元格與單元格之間的距離 cellspacing：單元格與格子里的內容的距離 tr: 表格頭 th: 表格行 td: 表格單元 --> <table border="1" cellspacing="0" width="300px"> <tr align="center"> <th><input type="checkbox" id="shopping" onclick="selectAll()" /></th> <th>商品名稱</th> <th>價格</th> <th>庫存</th> </tr> <tr align="center"> <td><input type="checkbox"></td> <td>電冰箱</td> <td>2000</td> <td>100</td> </tr> <tr align="center"> <td><input type="checkbox"></td> <td>洗衣機</td> <td>2500</td> <td>100</td> </tr> <tr align="center"> <td><input type="checkbox"></td> <td>空調</td> <td>3000</td> <td>100</td> </tr> </table> </body> </html>
七. 創建和刪除節點
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function () { // 創建一個元素p let pNode = document.createElement("p"); // 給新建的p元素新建內容 pNode.innerHTML="<h1>這是一個標題</h1>"; // 獲取body元素 // 方法一 // let bodeNode = document.getElementsByTagName("body")[0]; // 方法二 let bodyNode = document.body; // 把剛才新建的元素p添加到body中 // 注意默認放在body中已有元素的后面 bodyNode.appendChild(pNode); // 刪除剛才新建的p元素，這里為了看效果，設置1s的時間延遲 // setTimeout(function () { // // 因為加上剛才新建的p元素，總共有三個p元素，所以這里索引值為2 // let pNode = document.getElementsByTagName("p")[2]; // document.body.removeChild(pNode); // }, 1000); // 現在還剩兩個p元素 // 在兩個p元素之間插入一個p元素的方法 let p1Node = document.createElement("p"); let p2Node = document.getElementsByTagName("p")[1]; p1Node.innerHTML="我是新建的p元素"; document.body.insertBefore(p1Node, p2Node); } </script> </head> <body> <p>這是段落一內容</p> <p>這是段落二內容</p> </body> </html>
八. 添加和刪除附件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function addRow() { // 創建一個新的tr節點 let trNode = document.createElement("tr"); // tr里面還要創建兩個td節點 let td1 = document.createElement("td"); // 注意這里的方法 td1.innerHTML = "<input type='file' />"; let td2 = document.createElement("td"); td2.innerHTML = "<input type='button' value='刪除文件' onclick='delRow(this)' />"; // 把兩個td節點添加進新建的tr節點中 trNode.appendChild(td1); trNode.appendChild(td2); // 把新建的tr節點添加到tbody節點里，注意要放到添加按鈕的前面 let tbodyNode = document.getElementsByTagName("tbody")[0]; let lastTrNode = document.getElementById("lastRow"); tbodyNode.insertBefore(trNode, lastTrNode); } function delRow(inputNode) { // 獲取點擊按鈕所在行的tr節點 let trNode = inputNode.parentNode.parentNode; // 刪除該tr節點 let tbodyNode = document.getElementsByTagName("tbody")[0]; tbodyNode.removeChild(trNode); } </script> </head> <body> <table border="1" cellspacing="0" width="300"> <tr> <td><input type="file" /></td> <!--this表示當前的input元素--> <td><input type="button" value="刪除文件" onclick="delRow(this)"></td> </tr> <tr> <td><input type="file" /></td> <td><input type="button" value="刪除文件" onclick="delRow(this)"></td> </tr> <tr id="lastRow"> <td colspan="2"> <input type="button" value="再添加一行" onclick="addRow()"> </td> </tr> </table> </body> </html>
九. 操作元素CSS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function changeCSS() { let aNode = document.getElementsByTagName("a")[0]; aNode.style.fontSize = "30px"; aNode.style.color = "blue"; aNode.style.textDecoration = "None"; } </script> </head> <body> <a href="">這是一個鏈接</a> <input type="button" value="點我改變前面的樣式" onclick="changeCSS()" /> </body> </html>
十. 生成驗證碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function() { let arr = ["中", "a", "9", "國", "c", "3"]; // 生成四位數驗證碼 let vrCode = ""; for (let i = 0; i < 4; i++) { let index = Math.floor(Math.random() * arr.length); vrCode += arr[index]; } // 把驗證碼顯示在span標簽中 let spanNode = document.getElementById("vrCode"); spanNode.innerHTML = vrCode; spanNode.style.backgroundColor = "lightgray"; spanNode.style.color = "blue"; spanNode.style.fontSize = "100px"; spanNode.style.textDecoration = "line-through"; spanNode.style.display = "block"; spanNode.style.width = "500px"; spanNode.style.textAlign = "center"; } </script> </head> <body> <span id="vrCode" style="display:none"></span> </body> </html>