封面图片来源：沙沙野
内容概览
- 获取元素
- 元素属性
- value 属性
- 显示时间
- 计时器
- 节点的增删改查
JS 的 DOM 操作
- 获取元素
<!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>
运行结果：
2. 元素的属性
<!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>
运行结果：
3. 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>
运行结果：
点击第二个框时：
点击第三个框时：
4. 显示系统时间
<!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>
运行结果如下，时间在走动
5. 计时器
<!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>
运行结果如下，点击按钮有反应
6. 购物车全选功能
<!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>
运行结果：
7. 创建和删除节点
<!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>
运行结果：
8. 添加和删除附件
<!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>
运行结果：
9. 操作元素 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>
运行结果：
点击按钮后样式会改变
10. 生成验证码
<!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>
运行结果如下，每次刷新内容不一样
11. JS 知识回顾
ECMA Script：JS的基本语法
变量
数据类型
流程控制语句
函数
对象：
Math
Date
String
Number
Boolean——true, false(小写)
Array []
Object
s = {name: "alex"}
typeof s --> "object"
记住是一个对象, 不是字典，而且前一个键不用加引号，JS 中就是一个属性
JS的序列化与反序列化：
json数据：
1. 一种轻量级的标准数据的交换格式
2. 先将数据序列化成字符串格式
3. 然后不同的语言使用不同的方法，即反序列化该字符串
4. JS 中
s = "[12, 3, 45]"
# 反序列化
l = JSON.parse(s);
# 序列化
// 这是一个对象
s = {name: "alex"};
// 注意：在 JS 中，里面的数据一定是双引号
l = JSON.stringfy(s); --> "{"name": "alex"}"
BOM：browser object model(JS对象控制浏览器)
// 警告框，只有一个确定按钮
window.alert();
// 提示框，有确定按钮和取消按钮，有返回值，确定按钮返回 true，取消按钮返回 false
window.confirm();
let state = window.confirm("是否继续？");
console.log(state);
if (state) {
// 继续逻辑
} else {
// 取消逻辑
}
// 输入框，有返回值
let result = window.prompt("请输入一个数字：");
console.log(result);
DOM：document object model(JS对象控制文档)
1. 查找标签
直接查找：
// 返回 DOM 对象
document.getElementById("idname")
// 返回 DOM 对象数组
document.getElementsByTagName("tagname")
// 返回 DOM 对象数组
document.getElementsByName("name")
// 返回 DOM 对象数组
document.getElementsByClassName("classname")
小技巧：ById的是getElement, 而其他的都是getElements!
因此只要是获取getElements对应元素的一定要加[0]
导航查找：
依赖一个或多个标签找到自己的父子兄弟标签
.parentElement // 父节点标签元素
.chlidren // 字节点标签元素
.fristElementChild // 第一个子标签元素
.lastElementChild // 最后一个子标签元素
.nextElementSibling // 下一个兄弟标签元素
.previousElementSibling // 上一个兄弟标签元素
2. 操作标签
获取文本节点的值：innerText innerHTML
div.innerHTML="alex"
"alex"
div.innerText="yuan" // 这个一般没必要用
"yuan"
div.innerHTML="<a href=''>click</a>"
"<a href=''>click</a>"
div.innerText="<a href=''>click</a>"
"<a href=''>click</a>"
操作属性
ele=document.getElementById("i1")
<div class="c1" id="i1" alex="xxx">alex</div>
ele.getAttribute("class")
"c1"
ele.getAttribute("alex")
"xxx"
ele.setAttribute("class","c2")
undefined
ele.removeAttribute("alex")
undefined
class属性操作
ele.classList
DOMTokenList(3) ["c1", "c2", "c3", value: "c1 c2 c3"]
ele.classList.remove("c3")
undefined
ele.classList.remove("c1")
undefined
ele.classList.remove("c2")
undefined
ele.classList.add("c1")
undefined
ele.classList.add("c2")
undefined
ele.classList.add("c3")
undefined
ele.classList.add("c3")
undefined
ele.classList.add("c3")
undefined
ele.classList.remove("c2")
undefined
ele.classList.remove("c2")
value属性操作(只用在以下三种标签内)
input
textarea
select
节点的增删改查(比如用在onchange事件中，选择省份及对应的城市，二级联动) *****
创建节点(dom)
let p = document.createElement("p");
p.innerHTML="abc";
p.setAttribute("class", "c1");
添加节点
父节点.appendChild(子节点);
删除节点
父节点.removeChile(子节点);
替换节点
父节点.replaceChile(新节点, 旧节点);
117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
