今日主要内容
- DOM节点的增删改查与级联下拉列表实现
- BOM与window对象
- location对象
- 两种定时器
1、DOM节点的增删改查与级联下拉列表实现
1>查询
- 根据元素id查询,返回一个元素
var obj = docuement.getElementById("id值"); - 根据元素class类名查询,返回多个
var objs = document.getElementsByClassName("类名"); - 根据元素标签名查询,返回多个
var objs = document.getElementsByTagName("标签ming"); - 根据选择器来查询
返回第一个:document.querySelector("选择器");
返回所有:document.querySelectorAll("选择器");
2>创建DOM元素
document.createElement("元素名");
3>添加DOM元素(追加到元素末尾)
父元素.appendChild(子元素)
4>插入到某个DOM元素前面
父元素.insertBefore(插入元素,被插入元素)
5>删除元素
5.1>删除子元素:父元素.removeChild(子元素);
5.2>删除自己:元素.remove();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="p1">第一段落</p>
<p class="bg">第二段落</p>
<p class="bg">第三段落</p>
<div></div>
<script>
//根据元素标签名来进行查询,返回多个元素
var ps = document.getElementsByTagName("p");
console.log(ps);
for(var i=0;i<ps.length;i++){
var p = ps[i];
p.style.fontSize = "50px";
}
//根据元素到的class类名来进行查询,返回多个元素
ps = document.getElementsByClassName("bg");
console.log(ps);
for(var i=0;i<ps.length;i++){
ps[i].style.backgroundColor = "yellow";
}
/*根据选择器来进行查询*/
//根据选择器来进行查询,返回第一个元素
var ps = document.querySelector("#p1");
ps.style.textAlign = "center";
// div.style.border = "1px solid black";
// div.style.width = "100px";
// div.style.height = "100px";
//根据选择器来进行查询,返回查找到的所有元素
ps = document.querySelectorAll(".bg");
for(var i=0;i<ps.length;i++){
ps[i].style.fontFamily = "楷体";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>北京</li>
<li id="sh">上海</li>
<li>广州</li>
<li>深圳</li>
</ul>
<button onclick="doclick()">操作</button>
<script>
function doclick(){
//1、创建一个DOM元素
var li = document.createElement("li");
//给创建的li添加文本内容
li.innerText = "西安";
//将创建li添加到父元素ul上
var ul = document.querySelector("ul");
//ul.appendChild(li);
//插入元素,将创建的li添加到上海前面
var sh = document.querySelector("#sh");
//ul.insertBefore(li,sh);
//替换元素,将创建的li替换掉上海
//ul.replaceChild(li,sh);
//删除子元素
//ul.removeChild(sh);
//删除自己
sh.remove();
}
</script>
</body>
</html>
6>级联下拉列表实现
onchange() 下拉项改变事件
selectedIndex 当前下拉项的下标
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body onload="load()">
<!--改变下拉项时来触发的事件-->
<select onchange="change()">
</select>
<script>
//定义城市数组
var cities = ["西安","咸阳","榆林","商洛","宝鸡"];
//找到select
var select = document.querySelector("select");
function load(){
for(var i=0;i<cities.length;i++){
var option = document.createElement("option");
option.innerText = cities[i];
select.appendChild(option);
}
}
function change(){
//获取下拉项的下标
var index = select.selectedIndex;
//获取选中的城市
alert(cities[index]);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
select{
width: 100px;
}
</style>
</head>
<body onload="load()">
省份:<select id="province" onchange="change()">
</select>
城市:<select id="cities">
</select>
<script src="js/my.js"></script>
<script>
//定义省份数组
var provinces = ["湖南","湖北","陕西","山东"];
//定义城市数组
var cities = [
["长沙","岳阳","株洲","湘潭","郴州"],
["武汉","黄冈","荆州","襄阳","十堰"],
["西安","咸阳","商洛","渭南","安康"],
["济南","青岛","德州","淄博","潍坊"]
];
//获取省份下拉列表
var proviceSel = $("province");
//获取城市下拉列表
var citySel = $("cities");
//页面加载时,往省份下拉列表中添加省份数据
function load(){
for(var i=0;i<provinces.length;i++){
//创建省份下拉项
var option = $M("option");
//往下拉项中填入数据
option.innerText = provinces[i];
//再将下拉项添加到省份下拉列表中
proviceSel.appendChild(option);
//页面加载,默认的城市
if(i==0){
var cityAry = cities[0];
for(var j=0;j<cityAry.length;j++){
var option = $M("option");
option.innerText = cityAry[j];
citySel.appendChild(option);
}
}
}
}
//改变省份下拉项时,往城市下拉项添加相应数据
function change(){
//清空之前的城市
citySel.innerHTML = "";
//获取省份选中下拉项的下标
var index = proviceSel.selectedIndex;
console.log(index);
//通过省份下标获取当前省份对应的城市数组
var cityAry = cities[index];
//遍历城市数组,创建相应option,
//添加到城市下拉列表中
for(var i=0;i<cityAry.length;i++){
var option = $M("option");
option.innerText = cityAry[i];
citySel.appendChild(option);
}
}
</script>
</body>
</html>
