此程序对dom节点进行操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
//创建一个“广州”节点,添加到city下
myClick("btn01",function(){
//1.创建广州节点
/* 可以创建一个元素节点对象
需要一个标签名作为参数,根据该标签创造元素节点对象
并将创建好的对象返回。 */
var li = document.createElement("li");
//2.将广州添加到city下
/* document.createTextNode()
可以用来创建一个文本节点对象
需要一个文本内容返回参数,将会根据该内容创建文本节点返回 */
var GZtext = document.createTextNode("广州");
/* appendChild()
向一个父节点添加一个新的子节点
父节点.appendChild(子节点) */
li.appendChild(GZtext);
//获取id为city的节点
var city = document.getElementById("city");
//将广州添加到city下
city.appendChild(li);
});
//将“广州”节点插入到#bj前面
myClick("btn02", function(){
//创建一个广州
var li = document.createElement("li");
var GZtext = document.createTextNode("广州")
li.appendChild(GZtext);
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取city
var city = document.getElementById("city");
/* insertBefore()
可以在指定子节点前面插入新的子节点
语法: 父节点.insertBefore(新节点,旧节点); */
city.insertBefore(li,bj);
})
//将“广州”节点替换bj节点
myClick("btn03", function(){
//创建一个广州
var li = document.createElement("li");
var GZtext = document.createTextNode("广州")
li.appendChild(GZtext);
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取city
var city = document.getElementById("city");
city.replaceChild(li,bj);
})
//将“北京”节点删除
myClick("btn04" ,function(){
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取city
var city = document.getElementById("city");
// city.removeChild(bj);
bj.parentNode.removeChild(bj);
})
myClick("btn05",function(){
var city = document.getElementById("city");
alert(city);
})
myClick("btn06",function(){
var city = document.getElementById("city");
alert(city.innerHTML);
})
myClick("btn07",function(){
var city = document.getElementById("city");
//此方法不用手动寻找父节点,直接调用。但是此方法为全部替换,改动太大
// city.innerHTML += "<li>广州</li>"
var li = document.createElement("li");
li.innerHTML = "广州";
city.appendChild(li);
})
};
function myClick(idStr,fun){
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
</script>
</head>
<body>
<div id = "total">
<div class = "inner">
<p>你最喜欢哪个城市</p>
<ul id="city">
<li id="bj">北京</li>
<li>杭州</li>
<li>吉林</li>
<li>上海</li>
</ul>
<br>
<br>
</div>
</div>
<div id="btnList">
<div><button id="btn01">创建一个广州节点,添加到#city</button></div>
<div><button id="btn02">将“广州”节点添加到bj前面</button></div>
<div><button id="btn03">使用广州节点替换bj节点</button></div>
<div><button id="btn04">删除bj节点</button></div>
<div><button id="btn05">读取city内的html代码</button></div>
<div><button id="btn06">设置bj内的html代码</button></div>
<div><button id="btn07">设置插入广州</button></div>
</div>
</body>
</html>