JavaScript入门<3>JS外置对象：HTML DOM与Window子对象实例详解_dom对象模型中window对象直接子对象-CSDN博客

本文链接：https://blog.csdn.net/xiu2016/article/details/52829932

一）HTML DOM

1、什么是HTML DOM?

1）HTML DOM定义了用于HTML的一系列标准的对象，以及访问和处理HTML文档的标准方法（对DOM操作进行了封装，实现代码的简化）。
2）HTML标签对象化：将网页中的每个元素都看作一个对象。
3）常用HTML DOM对象字母图

4）如何解决浏览器兼容性问题：首先代码要符合W3C标准，然后了解各浏览器特殊的地方。
5）多种对象中，重要了解Select对象和Table对象。

2、常用HTML DOM对象有哪些？Select对象与Option对象

1）Select对象

1>Select对象代表HTML表单中的一个下拉列表，<select>标签即表示一个Select对象。
2>常用属性：options（选项数组）、selectedIndex（索引从0开始）、size
3>常用方法：add(option)、remove(index)
4>事件：onchange

<span style="font-size:18px;">	<select οnchange="alert(this.selectedIndex);">	
		<option value="1">a</option>
		<option value="2">b</option>
	</select></span>

2）Option对象

1>Option对象代表HTML表单中下拉列表中的一个选项，<option>标签表示一个Option对象
2>创建对象：var obj=new Option(text,value);
3>常用属性：index、text、value、selected

<span style="font-size:18px;"><html>
<head>
<title>deleteNode1.html</title>
<script type="text/javascript">
	//（结合上例修改οnchange="selFunc();" id="s1"）
	function selFunc() {
		var selObj = document.getElementById("s1");
		var value = selObj.options[selObj.selectedIndex].value;
		alert(value);
		var option = new Option("c", "3");
		selObj.add(option);
	}
</script>
</head>
<body>
	这是一个下拉可选测试<br>
	<select οnchange="alert(this.selectedIndex);">	
		<option value="1">a</option>
		<option value="2">b</option>
	</select>
</body>
</html></span>

经典案例：联动菜单（修改上一篇的案例）

<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
<title>deleteNode.html</title>
<script type="text/javascript">
	//以下为JS代码：声明一个数组类型的全局变量用于存储所有的城市数据 
	var array = new Array();
	array[0] = [ "请选择" ];
	array[1] = [ "海淀", "朝阳", "西城", "东城" ];
	array[2] = [ "石家庄", "邢台", "保定" ];
	function showCities() {//根据省显示城市
		//得到第一个选择框的选中的选项的索引
		var i = document.getElementById("sel1").selectedIndex;
		//先删除选择框中原有的元素
		var sellObj = document.getElementById("sel2");
		//	for(var j=0;j<sellObj.childNodes.length;j++){
		//		sellObj.removeChild(sellObj.childNodes[j]);	
		//	}注意事项：这样操作是删不干净的！
		while (sellObj.childNodes.length > 0) {
			sellObj.removeChild(sellObj.firstChild);
		}
		var cities = array[i];//根据索引找到城市数据
		//循环城市数据，创建option元素，文本写入
		for ( var index = 0; index < cities.length; index++) {
			var newNode = document.createElement("option");
			newNode.innerHTML = cities[index];
			document.getElementById("sel2").appendChild(newNode);
		}
	}
</script>
</head>
<body>
	联动菜单的测试<br>
	<select id="sel1" οnchange="showCities();">
		<option>请选择</option>
		<option>北京</option>
		<option>河北</option>
	</select>
	<select id="sel2">
		<option>请选择</option>
	</select