码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScriptDOM操作那些事(增 删 改 查)

时间:2016-06-05 22:49:59      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:

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操作那些事(增 删 改 查)

标签:

原文地址:http://www.cnblogs.com/iostb/p/5561878.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!