javascript&dom学习之dom增删改查

window.onload=function(){
//1. 创建一个“广州”结点，添加到#city下
myClick("btn01",function(){
//创建广州
广州
节点
//创建li 元素节点
//document.createElement()
//可以用于创建一个元素节点对象
//他会将一个标签名作为参数，将会根据该标签名创建元素对象，并将创建号的对象作为返回值进行返回
var li=document.createElement("li");
//创建文本节点
//document.createTextNode()
//可以用于创建一个文本节点对象
//需要一个文本内同作为参数，将会根据该内容创建文本节点，并将新的节点返回
var gztext=document.createTextNode("广州");
//将广州添加到city下
//将gzText设置成为li的子节点
//apendChild（）：可以向父节点中添加一个新的子节点
//用法：父节点.appendChild(子节点);
li.appendChild(gzText);
//获取id 为city的节点
var city=document.getElementById("city");
//将广州添加到city下
city.appendChild(li);

//2. 将“广州”节点插入到#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);
});


//3. 使用广州节点来替换#bj节点
myClick("btn03",function(){
//创建一个广州
var li =document.createElement("li");
var gzText=document.createTextNode("广州");
li.appendChild(gzText);
//获取id 为bj 的节点
var bj=document.getElemnetById("bj");
//获取父节点city
var city=document.getElementById("city");
//replacechild():
//可以用指定的子节点去替换已经有的子节点
//语法：
//父节点.replaceChild(新节点，旧节点);
city.replaceChild(li，bj);
});


//4. 删除#bj 节点
myClick("btn04",function){
//获取id 为bj 的节点
var bj=document.getElementById("bj");
//获取city
var city=document.getElementById("city");
//removeChild（）这个是可以删除一个子节点
//语法：
//父节点.removeChild（子节点);
//city.removeChild(bj);
//子节点.parentNode.removeChild(子节点);
bj.parentNode.removeChild(bj);



//5. 读取#city 内的HTML 代码
myClick("btn05",function){
var city=document.getElementById("city");
alert(city.innerHTML);
});


//6. 设置#city 内的HTML 代码
myClick("btn06",function(){
var bj=document.getElementById("bj");
bj.innerHTML="昌平";
});


//6. 向city中添加广州
myClick("btn07",function(){
var city=document.getElementById("city");
//使用innerHTML 也可以完成dom 的增删改的操作
//但是一般我们会两种方式结合使用

//city.innerHTML+="
广州
";
//下面的这种我们是推荐使用的
var li=document.createElement("li");
li.innerHTML="广州";
city.appendChild(li);

});

};



function myClick(idStr,fun){
var btn=document.getElementById(idStr);
btn.oncllck=fun;
};