JavaScriptDOM操作那些事（增删改查）

最新推荐文章于 2023-08-31 09:55:22 发布

dianyaotan3695

最新推荐文章于 2023-08-31 09:55:22 发布

阅读量103

点赞数

原文链接：http://www.cnblogs.com/iostb/p/5561878.html

版权

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" οnchange="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>

转载于:https://www.cnblogs.com/iostb/p/5561878.html

dianyaotan3695

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScriptDOM操作那些事（增删改查）

1.寻找节点//寻找节点 id方法document.getElementById(); //标准//寻找节点层次方法parentNode()、firstChild()和lastChild()；-查找兄弟一个节点previousSibling-查找后一个节点nextSibling//根据签名查找节点document.getElementsByTagN...
复制链接

扫一扫