一、node的CURD(增、删、改、查):
1.增
a、createElement(name)创建元素
b、appendChild();将元素添加
2.删
a、获得要删除的元素
b、获得它的父元素
c、使用removeChild()方法删除
3.改
第一种方式:使用增和删结合完成修改:
replace(new标签,old标签):用一个标签替换一个标签;
第二种方式:
使用setAttribute();方法修改属性
使用innerHTML属性修改元素的内容
4.查:使用之前方法;
下面截图说明:
二、如何给标签添加属性?
1.修改HTML DOM
- 改变HTML内容
改变元素内容的最简单的方法就是使用innerHTML,innerText;
- 改变CSS样式
<p id="p2">hello world</p>
document.getElementById("p2").style.color="blue";
- 改变HTML属性
elementNode.setAttribute(name.value)
即:元素.setAttribute(属性名,属性值)<-------->等效于:元素.属性="值";
获得属性值:elementNode.getAttribute(name)
2.关于class的操作
elementNode.className >获取元素的classname
elementNode.classList.add >添加classname
elementNode.classList.remove >移除classname
下面作业:需求【点击一个按钮,页面整体出现一个半透明的遮罩层,在页面中央最外层,弹出框;点击弹出框里面的按钮,遮罩层及弹出框消失】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.content{
height: 1800px;
background-color: white;
}
.shade{
position: fixed;
top:0px;
left:0px;
right: 0px;
bottom: 0px;
background-color: gray;
opacity: 0.6;
}
.model{
width: 200px;
height: 200px;
background-color: bisque;
position: absolute;
top: 50%;
right: 50%;
margin-top: -100px;
margin-left: -100px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="content">
<button onclick="func()">show</button>
hello
</div>
<div class="shade hide"></div>
<div class="model hide">
<button onclick="cancel()">取消</button>
</div>
<script>
function func() {
var ele_shade = document.getElementsByClassName("shade")[0];
var ele_model = document.getElementsByClassName("model")[0];
ele_model.classList.remove("hide");
ele_shade.classList.remove("hide");
}
function cancel() {
var ele_shade = document.getElementsByClassName("shade")[0];
var ele_model = document.getElementsByClassName("model")[0];
ele_shade.classList.add("hide");
ele_model.classList.add("hide");
}
</script>
</body>
</html>
下面是作业:正反选:有三个按钮:全选、取消、反选;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px">
<button onclick="getall()">全选</button>
<button onclick="unall()">取消</button>
<button onclick="changegetall()">反选</button>
<tr>
<th>按钮</th>
<th colspan="2">数字</th>
</tr>
<tr>
<td><input type="checkbox" name="get1" class="get get1"></td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox" name="get2" class="get get2"></td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox" name="get3" class="get get3"></td>
<td>333</td>
<td>333</td>
</tr>
</table>
<script>
function getall() {
var one=document.getElementsByClassName("get");
for (var i=0;i<one.length;i++){
one[i].checked=true;
}
}
function unall() {
var one=document.getElementsByClassName("get");
for (var i=0;i<one.length;i++){
one[i].checked=false;
}
}
function changegetall() {
var one=document.getElementsByClassName("get");
for (var i=0;i<one.length;i++){
if (one[i].checked) {
one[i].checked = false;
}
else {
one[i].checked = true;
}
}
}
</script>
</body>
</html>
二级联动:
根据选择的省份,显示可以选择的城市;通过js实现动态的效果;而不是html写死的option;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="shengfeng" id="province">
<option value="">请选择省份</option>
</select>
<select id="city" name="">
<option value="">请选择城市</option>
</select>
<script>
data={"河北省":["石家庄","廊坊"],"山西省":["晋城","大同"],"陕西":["西安","延安"]};
var pro_ele=document.getElementById("province");
var city_ele=document.getElementById("city");
for (var i in data){
var ele=document.createElement("option");
ele.innerHTML=i;
pro_ele.appendChild(ele);
}
pro_ele.onchange=function () {
<!--默认城市的显示option=1,即显示:请选择城市-->
city_ele.options.length=1;
<!--this.opthons:表示onchange的select元素的所有option标签;
this.selectedIndex:表示选择的option元素的索引;-->
var citys=data[this.options[this.selectedIndex].innerHTML];
for (var i=0;i<citys.length;i++){
var ele=document.createElement("option");
ele.innerHTML=citys[i];
city_ele.appendChild(ele);
}
}
</script>
</body>
</html>