JavaScriptDOM操作那些事(增 删 改 查)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScriptDOM操作那些事(增 删 改 查)相关的知识,希望对你有一定的参考价值。
1.寻找节点
//寻找节点 id方法
document.getElementById(); //标准
//寻找节点层次方法
parentNode()、firstChild()和lastChild();
-查找兄弟一个节点
previousSibling
-查找后一个节点
nextSibling
//根据签名查找节点
document.getElementsByTagName();返回数组
//根据name查找节点
getElementsByName();
2.创建一个新节点
//elementName:要创建的元素标签名 在返回创建的节点
var li= document.createElement("li"); 这里创建了一个li节点
//设置节点信息
li.innerhtml="...";
//添加新的节点
-追加方式
var ul = document.getElementById("ul");
ul.appendChild(li) //像节点里面插入新创建的节点
ul.insertBefore(document.getElementById("li"),li) //插入其节点前面
3.删除节点
node.removeChild(child)
说明 child必须是node的子节点
//添加一个案例 城市联动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
省:
<select id="select" onchange="chg();">
<option value="-1">请选择</option>
<option value="0">广东省</option>
<option value="1">江西省</option>
<option value="2">湖南省</option>
</select>
市:
<select id="city">
<option value="-1">请选择</option>
</select>
<script>
function losttes(){
return [
["东莞","深圳","广州"],
["吉安","南昌","上饶"],
["兆头","新干","长沙"]
];
}
var letts = new losttes();
function chg(){
var select = document.getElementById("select");
var option = document.createElement("option");
var city = document.getElementById("city");
var ops = city.getElementsByTagName("option");
for(var i=ops.length-1;i>0;i--){
ops[i].remove();
}
for(var i=0;i<letts.length;i++){
option = document.createElement("option");
option.innerHTML = letts[select.value][i];
city.appendChild(option);
}
}
</script>
</body>
</html>
以上是关于JavaScriptDOM操作那些事(增 删 改 查)的主要内容,如果未能解决你的问题,请参考以下文章