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

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

本文详细介绍了HTML DOM，包括DOM的定义、HTML标签对象化、Select对象与Option对象、Table对象及其相关对象的属性和方法。此外，还讨论了Window的其他子对象如screen、history、location和navigator，以及事件处理、event对象和面向对象基础，提供了实例和兼容性考虑。

摘要由CSDN通过智能技术生成

一）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>
</body>
</html></span>

3）Table对象

<span style="font-size:18px;">1>Table对象代表一个HTML表格，<table>标签表示一个Table对象。
2>常用属性：rows（返回所有行数组）、cells（返回所有单元格数组）
3>常用方法：①table.insertRow(index)：返回TableRow对象（插入新行）。
<span style="font-size:18px;">       </span><span style="font-size:18px;">   </span> ②table.deleteRow(index)：删除TableRow对象（删除行）。</span>

4）TableRow对象

1>TableRow对象代表一个HTML表格行，<tr>标签表示一个TableRow对象
2>常用属性：cells、innerHTML、rowIndex
3>常用方法：①row.insertCell(index)：返回TableCell对象（插入单元格）。
②row.deleteCell(index)：删除TableCell对象（删除单元格）。

5）TableCell对象

1>TableCell对象代表一个HTML表格单元格，<td>标签表示一个TableCell对象。
2>常用属性：cellIndex、innerHTML、colSpan、rowSpan
3>案例：产品列表

<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
<title>productTable.html</title>
<script type="text/javascript">
	function modiTable() {//增加行
		var table = document.getElementById("t1");//得到表格对象
		var row = table.insertRow(table.rows.length);//创建新行
		var cell1 = row.insertCell(0);//为行创建产品名称单元格
		cell1.innerHTML = document.getElementById("txtID").value;
		var cell2 = row.insertCell(1);//为行创建价格单元格
		cell2.innerHTML = document.getElementById("txtName").value;
		var buttonCell = row.insertCell(2);//为行创建操作按钮的单元格
		var button = document.createElement("input");
		button.type = "button";
		button.value = "删除";
		button.onclick = function() {
			delFunc(this);
		};
		buttonCell.appendChild(button);
	}
	function delFunc(btnObj) {//删除按钮的单击事件
		var isDel = confirm("真的要删除吗？");
		if (!isDel)
			return;
		//找到当前行的 ID
		var rowObj = btnObj.parentNode.parentNode;
		var id = rowObj.getElementsByTagName("td")[0].innerHTML;
		//循环行，根据id定位需要删除的行，并删除
		var table = document.getElementById("t1");
		for ( var i = 1; i < table.rows.length; i++) {
			if (table.rows[i].cells[0].innerHTML == id) {
				table.deleteRow(i);
				break;
			}
		}
		alert("删除 ID 为 " + id + " 的数据。");//提示							
	}
</script>
</head>
<body>
	产品列表测试<br> 
	ID号：<input type="text" id="txtID" /><br />
	 名称：<input type="text" id="txtName" /><br />
	<input type="button" value="增加" οnclick="modiTable();" />
	<table id="t1" border="1">
		<tr>
			<td>产品ID</td>
			<td>产品名称</td>
			<td></td>
		</tr>
	</table>
</body>
</html></span>

二）Window其他子对象（DHTML模型）

1、screen对象

1）包含有关客户端显示屏幕的信息（封装了屏幕相关的信息，供读取）。
2）常用属性：width/height、availWidth/availHeight
例如：var n = screen.width//ok！

screen.width = 1000;//error！只能读不能写

2、history对象

1）包含用户在浏览器窗口中访问过的URL（封装了历史访问记录）。
2）length属性：浏览器历史列表中的URL数量。
3）方法：①history.back()：单击后退按钮。
②history.forward()：单击向前按钮。
③history.go(n)：单击n次后退按钮。

3、location对象

1）包含有关当前URL的信息（地址栏），常用于获取和改变当前浏览的网址。
2）href属性：当前窗口正在浏览的网页地址。
3）方法：①location.href="url"：在当前页面打开，保留历史访问记录。
②location.replace("url")：在当前页面打开url，不保留历史访问记录。
③location.reload()：重新载入当前网址，等同于按刷新。
 注意事项：
 location.href="url"也等同于location["href"]，但很少这么用。
 location="url"好像也可以。

4、navigator对象

包含浏览器软件的相关信息，常用于获取客户端和操作系统信息。

eg：遍历navigator对象的所有属性

function testNavigator(){
     var s="";	 
     for(var p in navigator){//p代表对象中的每一个属性
			s +=p +"："+navigator[p]+"\n" 	
		}	  	
	alert(s);	
}

5、事件模型

1）事件：指DHTML对象在状态改变、鼠标操作或键盘操作时触发的动作。
2）事件的类别：
   ①鼠标事件：onclick/ondblclick/onmouseover/onmouseout ……
   ②键盘事件：onkeydown/onkeyup ……
   ③状态改变事件：onblur/onfocus/onchange/onload（body里）/onsubmit（form里） ……
3）如何定义事件：
   ①<标签里 onXXX="代码">：静态，写在html代码中
   ②obj.onclick = function(){}：动态，在JavaScript代码中定义
4）事件可以被取消：onXXX = "return false;"
例如：ID：<input id="txtID" type="text" />
      <input type="submit" value="Delete" οnclick="return deleteFunc();" />
案例：删除某ID

<html>
<head>
<title>rollEvent.html</title>
<script type="text/javascript">
	function deleteFunc(){
	 		var data=document.getElementById("txtID").value;
            var spanObj=document.getElementById("info");
	        if(isNaN(data)){ 
		          info.innerHTML="请录入数值";
	             return false;	
			} else
			 return confirm("真的要删除吗？");	
	}
	</script>
</head>
<body>
	This is my HTML page.
	<br> ID：
	<input id="txtID" type="text" />
	<input type="submit" value="Delete" οnclick="return deleteFunc();" />
	<span id="info"></span>
</body>
</html>

5）事件的处理机制（冒泡机制）

事件冒泡机制：当处于DHTML对象模型底部的对象事件发生时，会依次激活上面对象定义的同类事件处理（即当有层次关系，且定义了相同事件时，会发生）。
例如：现象：单击按钮，则会弹出“1”、“2”、“3”。
单击段落，则会弹出“2”、“3”
单击div，则会弹出“3”

	<div style="width:100px;height:100px;border:1px solid red;"
		οnclick="alert('3');">
		<p οnclick="alert('2');">
			p text <input type="button" value="1" οnclick="alert('1');" />
		</p>
	<div>

注意事项：使用event对象可以禁止事件冒泡，也可详见jQuery笔记。

6、event对象

1）任何事件触发后将会产生一个event对象。
2）event对象记录事件发生时的鼠标位置、键盘按键状态和触发对象等信息（获得event对象后，可以获得相关信息）。
3）常用属性：clientX/clientY/cancelBubble=true（取消冒泡） ……
4）使用event对象
①如何获得event对象
A. IE/Chrome等浏览器：直接使用event关键字。
B. Firefox浏览器：在事件定义中，使用event关键字将事件对象作为参数传入方法。
 注意事项：在Firefox里直接在JavaScript中使用event，则不行！不认识！即只能在html页面获得event对象！其他浏览器既可以在JavaScript中获得，也可以在html页面中获得。
②如何获得事件源
A. IE/Chrome等浏览器：event.srcElement
B. Firefox浏览器：event.target
 注意事项：两种获得事件源对象的方式最新的Chrome浏览器都支持。

<!DOCTYPE html>
<html>
<head>
<title>rollEvent.html</title>
<script type="text/javascript">
  //IE/Chrome等浏览器
     function func(){    alert(event.clientX+":"+event.clientY);
	                  alert(event.srcElement.nodeName);//DIV（大写的）  
	}
     //Firefox浏览器
     function func(e){    alert(e.clientX+":"+e.clientY);
	                   alert(e.target.nodeName);//DIV（大写的）	
	  }	
	</script>
</head>
<body>
<div οnclick="func();"> div text</div>
      <div οnclick="func(event);"> div text</div>
     <!--注意把event传入方法中！这样也可以在JavaScript中写复杂代码了！-->
</body>
</html>

5）考虑各浏览器的兼容性

<span style="font-size:18px;">	<div οnclick="func(event);">div text</div>
    <!--注意把event传入方法中！这样也可以在JavaScript中写复杂代码了！-->
    //如下操作可兼容各浏览器
    function func(e){	
    		alert(e.clientX+":"+e.clientY);
	        var obj=e.srcElement || e.target;
	        alert(obj.nodeName);//DIV（大写的）	
	</span><span style="font-size:18px;">}</span>

6）案例

eg：简单计算器（简化版）

<!DOCTYPE html>
<html>
<head>
<title>cal.html</title>
<script type="text/javascript">
	function cal(e) {
		var obj = e.target || e.srcElement;//获得被单击的对象
		//判断只有单击的是button
		if (obj.nodeName == "INPUT" && obj.type == "button") {
			if (obj.value == "=") {//=按钮进行eval；其他按钮做拼接操作
				var s = document.getElementById("txtNumber").value;
				var data = eval(s);
				document.getElementById("txtNumber").value = data;
			} else {
				document.getElementById("txtNumber").value += obj.value;
			}
		}
	}
</script>
</head>
<body>
	简易计算器测试<br>
	<div style="border:1px solid red;" οnclick="cal(event);">
		<input type="button" value="1" /> <input type="button" value="2" />
		<input type="button" value="3" /> <input type="button" value="4" />
		<input type="button" value="+" /> <input type="button" value="-" />
		<input type="button" value="=" /> <input type="text" id="txtNumber" />
	</div>
</body>
</html>

三）面向对象基础

1、什么是JS对象、属性、方法？

对象：对象是一种特殊的数据类型，由属性和方法封装而成；

属性：属性是指与对象有关的值：对象名.属性名；

方法：方法指的是对象可以执行的行为货可以完成的功能：对象名.方法名（）

2、定义JS对象有哪几种方式？

主要有三种方式：

1）创建对象的实例；

2）创建对象的模版；

3）使用JSON（相当于Java中的Map）。

4）经典案例

案例1：创建通用对象（使用Object创建对象以实现简单的封装，但不方便重用！）

<html>
<head>
<title>testObject.html</title>
<script type="text/javascript">
	function TestObject() { //创建对象，封装数据和行为
		var s = new Object();
		s.name = "mary";
		s.age = 18;
		s.sing = function() {
			alert("hello");
		};
		//匿名方法，赋进去一个function，所以sing是个方法
		alert(s.name);
		alert(s.age);
		s.sing();
	}
</script>
</head>
<body>
	This is my HTML page.
	<br>
	<input type="button" value="使用Object创建对象" οnclick="testObject();" />
</body>
</html>

注意事项：．后写啥属性名都行，因为JavaScript是松散类型语言
案例2：创建对象模板

可重用的封装；定义构造函数，以创建自定义的对象。
语法：function ObjName(参数1,参数2,…){}

<!DOCTYPE html>
<html>
<head>
<title>demo.html</title>
<script type="text/javascript">
	function Student(n1, a1) {//定义一个对象的模版：Student
		this.name = n1;//用了this关键字，就认为Student是一个类，而不是方法
		this.age = a1;
		this.introduceSelf = function() {
			alert("i am " + this.name + ", i am " + this.age + " year old");
		}
	}
	function testOwnObject() {//测试自定义的Student对象
		var p1 = new Student("mary", 18);
		var p2 = new Student("join", 20);
		alert(p1.name);
		alert(p2.age);
		p1.introduceSelf();
		p2.introduceSelf();
	}
</script>
</head>
<body>
	<h3>测试创建对象模板<br></h3>
	<input type="button" value="自定义对象" οnclick="testOwnObject();" />
</body>
</html>