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操作那些事(增 删 改 查)的主要内容,如果未能解决你的问题,请参考以下文章

Javascript操作Cookie(增,删,改,查)

Python---MySQL数据库之四大操作(增 删 改 查)

使用Java操作HBase(增,删,改,查操作)

微信小程序云开发,数据库“增”“删”“改”“查”操作

Mysql---4 修改表字段操作(增,删,改,重命名)

php开发_留言板的CRUD(增,删,改,查)操作