day35/36-DOM编程
一.获取元素
dom对象和dom集合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
用户名：<input type="text" id="username" value="小宝">
密码：<input type="text" id="passwd" value="小宝">
兴趣爱好：吃<input type="checkbox" name="hobby" value="eat">
喝<input type="checkbox" name="hobby" value="drink">
玩<input type="checkbox" name="hobby" value="play">
<p>今天星期三</p>
<script>
let usernamenode = document.getElementById("username");
alert(usernamenode);
let nodes = document.getElementsByTagName("input");
alert(nodes[0]);
let hobbynodes = document.getElementsByName("hobby");
alert(hobbynodes[0]);
let pnode = document.getElementsByTagName("p")[0];
alert(pnode.parentNode.nodeName);
</script>
</body>
</html>
二. 元素的属性
innerText和innerHTML区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p class="c1">今天星期三</p>
<script>
let pnode = document.getElementsByClassName("c1")[0];
alert(pnode.innerHTML);
pnode.innerHTML = "<h1>更改html</h1>";
alert(pnode.innerText);
alert(pnode.innerHTML);
</script>
</body>
</html>
三.value属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="username" value="凤姐">
<input type="button" onclick="set()" value="设置输入框">
<input type="button" onclick="get()" value="获取输入框">
<script>
function set() {
document.getElementById("username").value="奥巴马";
}
function get() {
value = document.getElementById("username").value;
alert(value);
}
</script>
</body>
</html>
四. 购物车案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function selectAll() {
//获取第一个checkbox的状态
var status = document.getElementById("cb").checked;
//alert(status);
//获取所有checkbox
var cbNodes = document.getElementsByTagName("input");
for (var i = 1; i < cbNodes.length; i++) {
cbNodes[i].checked = status;
}
}
</script>
</head>
<body>
<table border="1" cellspacing="0" width="600">
<tr>
<th><input type="checkbox" id="cb" 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>
</head>
<body>
<p>编程</p>
<p>python</p>
<script>
let node = document.createElement("p");
node.innerHTML = "<h1>go</h1>";
let bodynode = document.body;
bodynode.appendChild(node);
setTimeout(function () {
let node1 = document.getElementsByTagName("p")[0];
document.body.removeChild(node1);
},1000);
let node2 = document.createElement("p");
node2.innerHTML = "<h1>java</h1>";
let node3 = document.getElementsByTagName("p")[0];
document.body.insertBefore(node2,node3);
</script>
</body>
</html>
六. 添加和删除附件
inputnode传参
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<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>
<script>
function delRow(inputnode) {
let trnode = inputnode.parentNode.parentNode;
let tbodynode = trnode.parentNode;
tbodynode.removeChild(trnode);
}
function addRow() {
let trnode = document.createElement("tr");
let td1 = document.createElement("td");
let td2 = document.createElement("td");
td1.innerHTML = "<input type=\"file\"/>";
td2.innerHTML = "<input type=\"button\" value=\"删除\" onclick=\"delRow(this)\"/>";
trnode.appendChild(td1);
trnode.appendChild(td2);
let tbodynode = document.getElementsByTagName("tbody")[0];
let lastnode = document.getElementById("lastRow");
tbodynode.insertBefore(trnode,lastnode);
}
</script>
</body>
</html>
七. 生成并显示验证码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span id="vrcode" style="display: none"></span>
<script>
var arr = ["中", "a", "9", "国", "c", "3"]; //0~5
//生成四位数验证码
var vrcode = "";
for (var i = 0; i < 4; i++) {
var index = Math.floor(Math.random() * arr.length);
vrcode += arr[index];
}
let spannode = document.getElementById("vrcode");
spannode.innerText = vrcode;
spannode.style.backgroundColor = "grey";
spannode.style.color = "#fff";
spannode.style.fontSize = "20px";
spannode.style.textDecoration = "line-through";
spannode.style.display = "block";
spannode.style.width = "80px";
spannode.style.textAlign = "center";
</script>
</body>
</html>
八. 计时器
绑定事件两种方式：
1. 在body中onclick函数
2. 在script中node.onclick=函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="timer" type="text" value="">
<button class="start">start</button>
<button class="stop">stop</button>
<script>
let startnode = document.getElementsByClassName("start")[0];
let stopnode = document.getElementsByClassName("stop")[0];
let inputnode = document.getElementById("timer");
let ID;
startnode.onclick = function () {
if (ID === undefined){
start();
ID = setInterval(start,1000);
}
}
function start() {
let now = (new Date()).toLocaleString();
inputnode.value = now;
}
stopnode.onclick = function () {
clearInterval(ID);
ID = undefined;
}
</script>
</body>
</html>
九. 菜单栏案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.left{
width: 20%;
height: 500px;
float: left;
background-color: wheat;
}
.right{
float: left;
width: 80%;
height: 500px;
background-color: lightgray;
}
.title{
text-align: center;
line-height: 40px;
background-color: #0e90d2;
color: white;
}
.item{
padding: 10px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="outer">
<div class="left">
<div class="item">
<div class="title">菜单一</div>
<ul class="con">
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</div>
<div class="item">
<div class="title">菜单二</div>
<ul class="con hide">
<li>222</li>
<li>222</li>
<li>222</li>
</ul>
</div>
<div class="item">
<div class="title">菜单三</div>
<ul class="con hide">
<li>333</li>
<li>333</li>
<li>333</li>
</ul>
</div>
</div>
<div class="right"></div>
</div>
<script>
let titlenode = document.getElementsByClassName("title");
for (var i=0;i<titlenode.length;i++){
titlenode[i].onclick = function () {
for (var j=0;j<titlenode.length;j++){
titlenode[j].nextElementSibling.classList.add("hide");
}
this.nextElementSibling.classList.remove("hide");
}
}
</script>
</body>
</html>
