JavaScript入门<3>JS外置对象：Window、Document对象与DOM实例详解_javascriptlanguage.jar里面dhtml.js有window.prototype.-CSDN博客

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

一）window对象

1、什么是DHTML？

1）DHTML是指操作HTML以创造各种动态视觉效果，是一种浏览器端的动态网页技术。
  2）DHTML的功能：
    ①动态改变页面元素。
    ②事件响应机制制作动态折叠的树形结构和菜单。
      ③与用户进行交互等。
  3）DHTML对象模型包括浏览器对象模型和DOM对象模型。

2、DHTML对象模型

将整个窗口均实现了对象化，结构如下：

3、什么是Window对象？它有哪些常用属性？常用子对象？

window对象表示浏览器打开的窗口，也是父对象。

1）常用属性

    ①name：窗口名称。
    ②opener：打开当前窗口的window对象（引用）。
      ③status：窗口底部状态栏信息。

2）常用子对象

      ①document：代表给定浏览器窗口中的HTML文档。
      ②history：包含了用户浏览过的URL信息。
      ③location：包含关于当前URL的信息。
      ④navigator：包含Web浏览器的信息。
        ⑤screen：包含关于客户屏幕和渲染能力的信息。
        ⑥event：代表事件状态。

4、Window对象有哪些常用方法？

1）对话框类

1>alert(str)：提示对话框，显示str字符串的内容。

例如：window.alert("aa"); //window.可省

2>confirm(str)：确认对话框，像是str字符串的内容，按“确定”返回true，其他操作返回false。

3>prompt(str,value)：输入对话框，采用文本框输入信息，str为提示信息，value为初始值，按“确定”返回输入值，其他操作返回undefine，value可省。

<span style="font-size:18px;">function testConfirm() {
		var r = window.confirm("Are you really....");
		alert(r);
		window.prompt("请输入ID：");//因为不能控制它，所以很少用 	
	}</span>

2）窗口的打开与关闭

1>window.open(url)：重复打开。
2>window.open(url,name)：采取命名方式，避免重复打开。
3>window.open(url,name,comfig)：config设置新窗口外观如高和宽。
4>window.close()：关闭窗口。

function testNewWindow(){
	     var config="toolbar=no,location=no,width=300,height=200";
	     window.open("http://www.baidu.com","a",config);		  
              }

3）周期性定时器

1>setInterval(exp,time)：周期性触发代码exp，返回已经启动的定时器。exp：执行语句，time：时间周期，单位为毫秒。
2>clearInterval(tObj)：停止启动的定时器。tObj：启动的定时器对象。

4）一次性定时器

1>setTimeout(exp,time)：一次性触发代码exp，返回已经启动的定时器。exp：执行语句，time：时间周期，单位为毫秒。
2>clearTimeout(tObj)：停止启动的定时器。tObj：启动的定时器对象。

5）动态时钟

<html>
<head>
<title>dClock.html</title>
<script type="text/javascript">
	function showTime() {//显式时间
		var t = new Date();//将当前时间显式在一个文本框中
		document.getElementById("txtTime").value = t.toLocaleTimeString();
	}
	var timer;//设置全局变量
	function startClock() {//启动时钟
		timer = window.setInterval(showTime, 1000);//有返回值的。			
	}
	function stopClock() {//停止时钟
		window.clearInterval(timer);
	}
	var timer1;//设置全局变量
	function wait() {//5秒后弹出一个Hello
		timer1 = window.setTimeout("alert('Hello');", 5000);//可以执行合法的文本表达式
	}
</script>
</head>
<body>
	这是动态时钟的测试<br>
	<input type="button" value="显式时间" οnclick="showTime();" />
	<input type="button" value="启动时钟" οnclick="startClock();" />
	<input type="button" value="停止时钟" οnclick="stopClock();" />
	<input type="button" value="5s后弹出一个Hello" οnclick="wait();" />
</body>
</html>

 注意事项：showTime没有括号，代表每隔一定时间让浏览器去找showTime对象并启动一次；showTime()则为立即启动方法。

二）Document对象与DOM

1、什么是Document对象？什么是DOM？

  1）Document对象：每个载入浏览器的HTML文档都会成为Document对象。
      ①通过使用Document对象，可以从脚本中对HTML页面中的所有元素进行访问（操作文档中的任何内容，都过Document）。
        ②Document对象是window对象的一部分，可通过window.document方式对其进行访问。
  2）DOM：Document Object Model，文档对象模型，HTML文档中的所有节点组成了一个文档树（或节点树）。
      ①树起始于文档节点，Document对象是一颗文档树的根。
      ②HTML文档中的每个元素、属性、文本等都代表这树中的一个节点。

2、Document中查找节点的方式有哪几类？

1）根据元素ID查找节点

1>方法：document.getElementById(idValue)
2>忽略文档的结构，通过指定的ID来返回元素节点。
3>可以查找整个HTML文档中的任何HTML元素。
 注意事项：如果ID值错误，则返回null。

2）根据层次查找节点

1>遵循文档的层次结构，查找单个节点：parentNode、firstChild、lastChild
2>遵循文档的层次结构，查找多个节点：
childNodes：以s结尾的都是数组，则有length属性。
3）案例
eg：根据层次查找节点

<html>
<head>
<title>selectIDl.html</title>
<script type="text/javascript">
	var sObj = document.getElementById("sell");
	alert(sObj.childNodes.length);//7？为何是7？！
	var s1 = sObj.firstChild;
	alert(s1.innerHTML);//undefined？这又为何为未定义？
</script>
</head>
<body>
	<select id="sell">
		<option>a</option>
		<option>b</option>
		<option>c</option>
	</select>
	<!-- 注意按此格式 -->
</body>
</html>

解释：childNodes会找到sell下的所有子节点，除了真正的子节点外，还有空格这种特殊节点，所以长度为7。只有不空格，都写一行结果才为3，如：
<select id="sell"><option>a</option>
<option>b</option>
<option>c</option>
</select>

同理，第一个子节点为空格，firstChild的内容当然也就是undefined了。

3）根据标签名称查找节点

1>getElementsByTagName("namestr")：在某个节点的所有后代里查找某种类型的元素（根据指定的标签名），并返回所有的元素（返回一个节点列表）。
  ①忽略文档的结构，查找整个HTML文档中的所有元素。
  ②如果标签名错误，则返回长度为0的节点列表。
       注意事项：单词Elements结尾有s，所以为数组。
2>length属性：返回的是一个节点列表，是个数组，因此可用length属性获取元素个数。使用[index]可定位具体的元素。例如：

<body>
	<span>文本</span>
	<h1>
		一周畅销<span>榜</span>
	</h1>
</body>
var spans=document.getElementsByTagName("span"); 
alert(spans.length);//2
alert(spans[1].innerHTML);//榜

3、读取或者修改节点信息有什么规则限制？

主要有三个规则限制：

  规则一：将HTML标签对象化，操作前先明确被对象化的标签都有什么属性。
如：aObj代表一个<a href="">元素</a>，有aObj.href属性，但没有aObj.value和aObj.src
  规则二：innerHTML：设置或获取位于对象起始和结束标签内的内容。
如：aObj.innerHTML可修改<a href="">元素</a>标签中的“元素”两字
   注意事项：<input />单标签无法用innerHTML修改内容。
  规则三：nodeName：得到某个元素节点和属性节点（即可得到标签或属性名称）及其类型位置。xxx.nodeName：当未知节点类型时，使用该属性获得节点的名称，全大写方式。
如：if(xxx.nodeName == "IMG") xxx.src = "http://...";
注意—节点属性：getAttribute()方法：根据属性名称获取属性的值。
将HTML标签、属性、CSS样式都对象化。

4、如何查找并修改节点？实例演示

1）修改节点样式

1>style属性：语法：node.style.color; node.style.fontSize
 注意事项：CSS样式中属性名内有“-”的，这里省略，并把后面单词首字母大写！
2>className属性：语法：var Obj=document.getElementById("p1");
如：Obj.className="样式类名称";//可用于设置不同的样式。

2）查找并修改节点

1>使用getElectmentById（）方法找到节点元素；

2> 修改元素内容

3>修改样式：style属性或者className属性

4>修改属性：html属性

3）经典案例：

案例1：表单验证

<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
<title>validateForm.html</title>
<script type="text/javascript">
	function validName() {//验证用户名
		var name = document.getElementById("txtName").value;//得到录入的用户名
		var r = /^[a-z]{3,5}$/;//验证
		if (r.test(name))//根据验证结果显示不同的样式
			document.getElementById("nameInfo").className = "success";
		else
			document.getElementById("nameInfo").className = "fail";
		return r.test(name);//添加返回										
	}
	function validAge() {//验证年龄
		var age = document.getElementById("txtAge").value;//得到录入的年龄
		var r = /^[0-9]{2}$/;//验证
		if (r.test(age))//根据验证结果显示不同的样式
			document.getElementById("ageInfo").className = "success";
		else
			document.getElementById("ageInfo").className = "fail";
		return r.test(age);//添加返回											
	}
	function validDatas() {//验证所有数据，验证name和age，return true和false
		var r1 = validName();
		var r2 = validAge();
		return r1 && r2
	}
</script>
</head>
<body>
	This is my HTML page.
	<br>
	<form>
		Name：<input type="text" id="txtName" οnblur="validName();" />
		      <span id="nameInfo">3-5个小写字母</span> <br /> 
			
		Age：<input type="text" id="txtAge" οnblur="validAge();" /> 
			 <span id="ageInfo">2位数字</span><br />
		<input type="submit" value="保存" οnclick="return validDatas();" />
	</form>
</body>
</html></span>

 注意事项：οnclick="return validDatas();返回值为true则提交表单，否则取消提交，即为return false时取消某事件。

案例2：读取或者修改节点信息

<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
<title>testDoc.html</title>
<script type="text/javascript">
function testDocument(){ var imgObj
	= document.getElementById("img1"); 
	imgObj.src = "ok.png";//修改图片
	//修改段落：字体颜色，背景色，字体大小，段落文本
	 var pObj = document.getElementById("p1");
	pObj.style.color = "red";//注：pObj.style = "color:red";不够对象化
	pObj.style.backgroundColor = "silver"; //注：pObj.style.background-color不认识减号，去掉减号，下个单词首字母大即可。
	pObj.style.fontSize = "25";//单位由浏览器的默认值决定
	pObj.innerHTML = "new text"; //修改某元素的样式：样式复杂时用
	document.getElementById("h2").className = "style1";
	//复杂样式先定义一个样式类
}
</script>
<style type="text/css">
 h2.style1{ border-top:1px solid red;
	        border-right:2px solid blue;
	       } 
h2.style1{}//（定义在内部样式或外部样式都可以），再用className操作，不能用class，被系统用了。
//正常情况是标签中直接写class="style1"，但为了实现动态效果而使用className进行操作。
</style>
</head>
<body>
	这是一个读取以及修改节点的测试哦！<br>
	<input type="button" value="读取或修改节点信息" οnclick="testDocument();" />
	<h2 id="h2">h2文本</h2>
	<p id="p1">段落文本</p>
	<img id="img1" src="delete.png" />	
</body>
</html></span>

案例3：购物车

<span style="font-size:18px;"><!DOCTYPE html>
<html>
  <head>
    <title>buy.html</title>
	<script type="text/javascript">
	function add(btnObj){//增加购物的数量
   		var tdObj = btnObj.parentNode;//得到当前按钮所在的td
		for(var i=0;i<tdObj.childNodes.length;i++){//得到td的所有子元素，找到那个文本框
			var childNode = tdObj.childNodes[i];
			if(childNode.nodeName == "INPUT" && childNode.type == "text"){
			var oldData = parseInt(childNode.value);//得到旧数据，操作，并显示
			oldData++;	childNode.value = oldData;
			}
		}
	    calTotal();												
	 }
	function sub(btnObj){//减少购物的数量，代码与增加一样，仅仅将oldDate--即可！	
	 }
	function calTotal(){//计算小计和总计
		var tableObj = document.getElementById("shoppingCart");//得到表格的所有行
		var rows = tableObj.getElementsByTagName("tr");
		var total = 0;	
		for(var i=1;i<rows.length;i++){//循环从第二行开始
			var curRow = rows[i];
			//得到第一格中的价格
			var price = curRow.getElementsByTagName("td")[0].innerHTML;
				//得到第二格中的第二个input的value
			var q = curRow.getElementsByTagName("td")[1].getElementsByTagName("input")[1].value;
			var sum = parseFloat(price) * parseFloat(q);//算完，写入第三格
			curRow.getElementsByTagName("td")[2].innerHTML = sum.toFixed(2);
			total += sum;//总计		
		}
		document.getElementById("spanTotal").innerHTML = total.toFixed(2);//显示	
	 }	
	</script>
  </head> 
  <body>
         购物车付款验证！ <br>
    <form>	<table border="1" id="shoppingCart">
	<tr>		<td>价格</td><td>数量</td><td>小计</td>	</tr>
	<tr>		<td>10.00</td>
			<td><input type="button" value="-" οnclick="sub(this);" />
				<input type="text" value="1" />
				<input type="button" value="+" οnclick="add(this);" /></td>
			<td>10.00</td>		</tr>
	<tr>		<td>20.00</td>
			<td><input type="button" value="-" οnclick="sub(this);" />
				<input type="text" value="1" />
				<input type="button" value="+" οnclick="add(this);" /></td>
			<td>20.00</td>		</tr>		</table>		
	总计：<span id="spanTotal">00.00</span>						</form>
  <!--总计不能写到表格中，与前几行格式不一致，取得的数为null或未定义，无法计算-->  
  </body>
</html></span>

5、如何用Document增加新节点？删除节点？

1）步骤：
第一步：创建一个新元素，document.createElement("elementName");

比如：元素名可为a/input/option等；返回新创建的节点。
第二步：为新元素设置相关的数据

比如：var newNode=document.createElement("input");
newNode.type="text";

newNode.value="mary";

newNode.style.color="red";
第三步：把新节点加入树上（新元素加入文档），作为树上某个节点的子节点存在。
xxx.appendChild(newNode);//追加
xxx.insertBefore(newNode,oldNode);//新节点放在旧节点之前
2）案例
eg：添加新节点

<!DOCTYPE html>
<html>
<head>
<title>addNode.html</title>
<script type="text/javascript">
	function addNewNode() {
			var formObj = document.getElementById("form1");
			var obj = document.createElement("input");//为form添加一个文本框
				obj.value = "mary";
				formObj.appendChild(obj);
			var aObj = document.createElement("a");//form最后添加一个超级连接
				aObj.href = "http://tts6.tarena.com.cn";
				aObj.innerHTML = "cilck me";
				formObj.appendChild(aObj);
			var btnObj = document.createElement("input");//在原有按钮的前面加入一个按钮
				btnObj.type = "button";
				btnObj.value = "new button";
				btnObj.onclick = function() {
					alert("hello");
				};//function方法
		formObj.insertBefore(btnObj, formObj.firstChild);//由于第一个子节点为空白，所以此处oldNode可用firstChild去定位（放在空白前）。							
	}
</script>
</head>
<body>
	它会不断产生新节点的哦！<br>
	<form id="form1">
		<input type="button" value="新节点" οnclick="addNewNode();" />
	</form>
</body>
</html>

（为什么我的截图老被系统吃掉啊，无语！）

6、如何用Document删除节点？

  1）语法：parentNode.removeChild(childNode);
   注意事项：一定是从父节点删除子节点，不能直接删除子节点。
  2）经典案例

案例1：

<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
<title>deleteNode1.html</title>
<script type="text/javascript">
	function deleteNode() {
		var delNode = document.getElementById("a1");
		delNode.parentNode.removeChild(delNode);
	}
</script>
</head>
<body>
	节点是可以删除的哦<br>
	<input id="btn1" type="button" value="删除节点" οnclick="deleteNode();" />
	<a id="a1" href="#">link1</a>
</body>
</html></span>

案例2：联动菜单

<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>

结果有没有被吞掉啊？系统大神！