原文链接
一. 获取元素
<!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>
网友评论