您的位置：首页 > Web前端 > JavaScript

javaScript---文档对象模型(DOM)

2015-11-15 14:20 639 查看

DOM(Document Object Model):文档对象模型

1.通过html标签属性找节点

2.通过关系找节点

3.创建节点、插入节点

一个html页面被浏览器加载的时候，浏览器就会对整个html页面上的所有标签都会创建一个对应的
对象进行描述，我们在浏览器上看到的信息只不过就是这些html对象的属性信息而已。我们只要能找到
对应的对象操作对象的属性，则可以改变浏览器当前显示的内容。

整个形状如同树一般，所以又叫文档树(document):

<html >
<head>
<title> new document </title>
<script type="text/javascript">
var citys = [[],["长沙","邵阳","衡阳","郴州","湘潭","株洲"],["广州","佛山","中山","东莞"],["杭州","宁波","温州","金华"]];

function showCity(provinceNode){
//取得城市信息
var cityDatas = citys[provinceNode.selectedIndex];
//获取显示城市下拉列表框节点
var cityNode = document.getElementById("city");
//每次显示城市信息前，将显示城市的下拉框长度清除，以保证省份换了一个时上次添加的城市信息不会残留
cityNode.length = 1;
//遍历城市信息并将其添加到city节点中
for ( var i=0; i<cityDatas.length; i++)
{
//将城市信息加入到city节点中
var optionNode = document.createElement("option");
optionNode.innerHTML = cityDatas[i];
cityNode.appendChild(optionNode);
}
}

</script>
</head>
<body>
<table>
<tr>
<td>省份</td>
<td>
<select id="province" onclick="showCity(this)">
<option>省份</option>
<option>湖南</option>
<option>广东</option>
<option>浙江</option>
</select>
</td>
<td>
<select id="city">
<option>城市</option>
</select>
</td>
</tr>
</table>
</body>
</html>

View Code

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航