对HTML标签的增删改查操作
1.查找页面中的元素,可以通过id查询页面元素,通过元素名称查询,通过层级关系查询,通过name属性值查询
1.1通过id查找
var p = document.getElementById("pid");
1.2通过标签名称查找
var inputs = document.getElementsByTagName("input");
1.3通过层级关系查找:元素.childNodes,获取当前元素内部所有内容,包括文本内容和元素内容
var nodes = p.childNodes;
1.4获取元素的上级元素,格式为:元素名.parnetElement
var div = p.parentElement;
1.5获取兄弟元素,先找到上级在找兄弟,(先找它爸爸元素,再找儿子,爸爸只有一个,儿子可以有很多个)
var nodes2 = p.parentElement.childNoes;
1.6通过name属性获取元素
var inputs = document.getElementsByName("gender");
2.往页面中添加新的元素
var li = document.createELement("li");
2.1元素中添加子元素,需要先得到父元素,和创建新元素
父元素.appendChild("新元素");
onloa = function(){
var newDiv = document.createElement("div");//创建一个新的元素div
newDiv.innerText = "新的div";//给新的div设置元素内容
document.body.appendChild(newDiv);//将newDiv元素添加到body中去
}
![](https://i-blog.csdnimg.cn/blog_migrate/71b36b962100effd36cd7b7bd1ee2e8c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/20418531343bd8ed8647b17b1b9ce3ad.png)
小练习:页面中准备一个文本框和按钮,通过无序列表显示北京,上海,广州,在点击按钮后在广州后面添加内容
<script type="text/javascript">
function add(){
//先得到用户输入的内容
var input = document.getElementById(""muinput);
//在新建一个li标签
var myLi = document.createElement("li");
//将用户输入的内容添加到li中
myLi.innerText = input.value;
//然后要找到ul元素
var myUl = document.getElementsByTagName("ul")[0];//返回的是一个数组,ul标签不止一个,[0]表示获得第一个ul元素开始找
//最后把li添加到ul里面
myUl.appendChild(myLi);
}
</script>
<body>
<input type="text" id="myinput">
<input type="button" value="添加" οnclick="add()">
<hr>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</body>
3.插入元素需要先得到父元素和它的下个元素(弟弟元素)
父元素.insertBefore(新元素,弟弟元素);
4.删除元素
父元素.removeChild("被删除的元素");
根据上面的小练习继续延伸,添加插入和删除功能
<script type="text/javascript">
//添加内容
function add(){
//先得到用户输入的内容
var input = document.getElementById(""muinput);
//在新建一个li标签
var myLi = document.createElement("li");
//将用户输入的内容添加到li中
myLi.innerText = input.value;
//然后要找到ul元素
var myUl = document.getElementsByTagName("ul")[0];//返回的是一个数组,ul标签不止一个,[0]表示获得第一个ul元素开始找
//最后把li添加到ul里面
myUl.appendChild(myLi);
}
//插入内容
function insert(){
//得到用户输入的内容
var input =document.getElementById("myiput");
}
//创建li标签
var newli = document.createElement("li");
//给li添加内容
newli.innerText = input.value;
//得到它的上级元素,它爸ul
var ul = document.getElementsByTagName("ul")[0];
//得到它的同级元素,它弟li
var oldli = document.getElementById("sh");
//把li添加到ul中
ul.insertBefore(newli,oldli);//把你在输入框中输输入的内容插入到它弟上面
//删除内容
function deleteli(){
//先得到被删除的元素和被删除元素的上级,(等于是找到它爸和它自己)
var shli = document.getElementById("sh");
//找到它爸
var ul = document.getElementsByTagName("ul")[0];
//删除上级元素下的shli子元素,如果不加Child就是将子元素全部删除
ul.removeChild(shli);
}
</script>
<body>
<input type="text" id="myinput">
<input type="button" value="添加" οnclick="add()">
<input type="button" value="插入" οnclick="insert()">
<input type="button" οnclick="deleteli()" value="删除">
<hr>
<ul>
<li>北京</li>
<li id="sh">上海</li>
<li>广州</li>
</ul>
</body>
没添加之前:
添加内容后:
插入内容后:
删除内容后:
练习题:页面中准备两个下拉选,然后通过下拉选选择省,从而找到相对应的市
<script type="text/javascript">
var cities = [["唐山","秦皇岛","邯郸"],
["哈尔滨","齐齐哈尔","佳木斯"],
["苏州","南京","江阴"],
["合肥","黄山","芜湖"],
["上海"]];
function changeAction(){
//得到显示省的select
var s1 = document.getElemntById("s1");
//得到用户选择省的数组下标
var index = s1.value;
//通过下标找到对应的城市信息
var cityArr = cities[index];
//得到s2,为了往里面添加内容
var s2 = document.getElementById("s2");
//清除之前s2中的内容,要放在判断之前,添加一个option请选择,覆盖掉原来s2里面的值
s2.innerHTML="<option>请选择</option>";
//判断选择的省份是否是"请选择",因为请选择时s2是没有市内容的
if(cityArr){
//遍历选择的每一个城市
for(var i=0;i<cityArr.length;i++){
//得到每一个城市的昵称
var city = cityArr[i];
//创建option元素,把city放进去
var opt = document.createElement("option");
//将每个城市的昵称city放到option中
opt.innerText = city;
//将创建的option添加到s2中
s2.appendChild(opt);
}
}
}
</script>
<body>
<select οnchange="changeAction()" id="s1">
<option>请选择</option>
<option value="0">河北</option>
<option value="1">黑龙江</option>
<option value="2">江苏</option>
<option value="3">安徽</option>
<option value="4">上海</option>
</select>
<select id="s2">
<option>请选择</option>
</select>
</body>
效果图如下: