DOM操作 JS事件 节点增删改查
--------------------------习惯是社会的巨大的飞轮和最可贵的维护者。——威·詹姆斯
day 49
[value属性操作]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
姓名:
<input type="text" name="user" value="" id="i1">
<hr>
籍贯:
<select name="pro" id="i2" multiple="multiple">
<option value="1">湖北省</option>
<option value="2">湖南省</option>
<option value="3">河南省</option>
</select>
<hr>
简介:
<textarea name="info" id="i3" cols="30" rows="10">
</textarea>
<hr>
<input type="submit">
</form>
<script>
let i1=document.getElementById("i1");
let i2=document.getElementById("i2");
let i3=document.getElementById("i3");
console.log(i1.value);
console.log(i2.value);
console.log(i3.value);
</script>
</body>
</html>
[节点的增删改查]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="p1">
<h3 class="title">WELCOME!</h3>
</div>
<hr>
<div class="c1">
<div><button class="add">一 展示图片</button></div>
</div>
<hr>
<div class="c2">
<button class="rem">删除节点 </button>
<h4>欢迎删除,圣诞快乐!</h4>
</div>
<hr>
<div class="c3">
<button class="replace">替换节点 </button>
</div>
<script>
// 1 创建节点添加节点
let ele=document.getElementsByClassName("add")[0];
ele.onclick=function () {
// 1 创建节点对象 <img src="imgs/圣诞老人.png" alt="" width="200" height="200">
let img=document.createElement("img") ; // <img >
img.setAttribute("src","imgs/圣诞老人.png");// <img src="imgs/圣诞老人.png">
img.setAttribute("width","200");
img.setAttribute("height","200");// <img src="imgs/圣诞老人.png" alt="" width="200" height="200">
console.log(img);
// 2 添加节点 父节点.appendchild(添加节点)
let pele=document.getElementsByClassName("c1")[0];
pele.appendChild(img)
};
// 2 删除节点 父节点.removeChild(删除节点)
let ele2=document.getElementsByClassName("rem")[0];
ele2.onclick=function () {
let pele2=document.getElementsByClassName("c2")[0];
pele2.removeChild(this.nextElementSibling);
};
// 替换节点 父节点.replaceChild(新节点,旧节点)
let ele3=document.getElementsByClassName("replace")[0];
ele3.onclick=function () {
// 父节点
let pele3=document.getElementsByClassName("p1")[0];
// 新节点
let p=document.createElement("p"); // <p></p>
p.innerHTML="深圳欢迎您!";
// 旧节点
let title=document.getElementsByClassName("title")[0];
pele3.replaceChild(p,title)
}
</script>
</body>
</html>
[js事件]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
color: red;
margin-left: 10px;
}
</style>
<script>
window.onload=function(){
// 1 创建节点添加节点
let ele=document.getElementsByClassName("c1")[0];
ele.onfocus=function () {
console.log("获取光标!")
};
ele.onblur=function () {
console.log("退出光标!")
};
ele.onselect=function () {
console.log("正在拷贝该文本!")
};
let form=document.getElementById("form");
form.onsubmit=function () {
// 校验数据
let user=document.getElementById("user").value;
let email=document.getElementById("email").value;
console.log(user,email);
if (user.length<5){
console.log("长度不够!");
document.getElementById("user").nextElementSibling.innerHTML="长度不够";
setTimeout(function () {
document.getElementById("user").nextElementSibling.innerHTML="";
},1000);
return false
}
};
}
</script>
</head>
<body>
<input type="text" class="c1">
<hr>
<form id="form" action="" method="get">
<div>
<label for="user">姓名</label>
<input type="text" name="user" id="user"><span class="error"></span>
</div>
<div>
<label for="email">邮箱</label>
<input type="text" name="email" id="email"><span class="error"></span>
</div>
<input type="submit">
</form>
</body>
</html>
[二级联动]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="" id="pros">
<option value="0">请选择省份</option>
<option value="1">河北省</option>
<option value="2">广东省</option>
<option value="3">湖南省</option>
</select>
<select name="" id="citys">
<option value="">请选择城市</option>
</select>
<script>
// 1 数据结构
let data={
"1":["石家庄","邯郸","邢台","衡水","保定"],
"2":["东莞","惠州"," 广州","汕头","深圳"],
"3":["长沙","张家界","湘潭","娄底"],
};
let pro=document.getElementById("pros");
let city=document.getElementById("citys");
pro.onchange=function () {
console.log(this.value);
//2 获取用户选择省份
let choose_pro=this.value;
// 3 获取省份对应的城市列表
let citys=data[choose_pro];
console.log(citys);
// 清除操作
city.options.length=1;
// 循环添加
for(var i=0;i<citys.length;i++){
// 创建option标签
let option=document.createElement("option")// <option></option>
option.innerText=citys[i];
option.value=i+1;
// 添加标签
city.appendChild(option);
}
}
</script>
</body>
</html>
