释放双眼，带上耳机，听听看~！
本节讲Dom和Bom模型概念讲解(节点获取,window对象)。
out.js:
写了2个输出到页面的函数。
2
3
4
5
6
7
2 document.write(param+"<br/>");
3}
4function print(param){
5 document.write(param);
6}
7
window对象中的方式：
方法：
confirm ：
bConfirmed = window.confirm( [sMessage])
显示一个确认对话框，其中包含一个可选的消息和确定取消按钮。
setInterval ：
iTimerID = window.setInterval(vCode, iMilliSeconds [, sLanguage])
每经过指定毫秒值后计算一个表达式。
setTimeout ：
iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])
经过指定毫秒值后计算一个表达式。
clearInterval:
window.clearInterval(iIntervalID)
使用 setInterval 方法取消先前开始的间隔事件。
navigate:
在当前窗口中装入指定 URL。
open:
打开新窗口并装入给定 URL 的文档。
moveBy:
将窗口的位置移动指定 x 和 y 偏移值。
moveTo:
将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
演示代码：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4 <title>Bom模型演示2---window对象中的方式</title>
5 </head>
6 <body>
7 <script type="text/javascript" src="out.js">
8 </script>
9 <script type="text/javascript">
10 //1. confirm方法
11 function methodDemo(){
12 //window. 可不写
13 var boo = window.confirm("真的要删除吗？");
14 alert(boo);
15 }
16
17 //2 setTimeout方法---只激活一次动作，setInterval方法
18 //---每隔设定的时间就激活一次动作
19 var timer1, timer2;
20 function methodDemo2(){
21 //setTimeout("alert('时间到...')",2000);//过3秒，执行:alert('时间到...')
22
23 //setTimeout("methodDemo()",3000);//过3秒，执行methodDemo()方法
24 //setTimeout(methodDemo,3000);//和上面那句一样的
25 timer1 = setInterval("alert('时间到...')", 3000);//每隔2秒，会执行一次：alert('时间到...')
26 timer2 = setInterval(methodDemo, 3000);//每隔2秒，会执行一次：alert('时间到...')
27 }
28
29 function timeStop1(){
30 clearInterval(timer1);
31 }
32
33 function timeStop2(){
34 clearInterval(timer2);
35 }
36
37 //3 moveBy---相对移动和moveTo方法---移动到
38
39 function moveWindow(){//--IE11.3支持，360 8.1不支持
40 //window.moveBy(10, 10);//“window.”可以省略
41 //moveBy(-10, -10);
42 //moveTo(40, 50);
43
44 //窗口抖动
45 for(var x=0;x<500;x++){
46 moveBy(15,0);
47 moveBy(0,15);
48 moveBy(-15,0);
49 moveBy(0,-15);
50 }
51 }
52
53 //4 open--打开窗口 close--关闭窗口
54 var timer3;
55 var aNewWindow;
56 function openWindow(){
57 aNewWindow = window.open("ad.html",null,"height=200,width=400, status=yes,toolbar=no,menubar=no,location=no");
58 aNewWindow.moveTo(100,200);
59 //timer3 = setTimeout(closeWin,3000);//这句实现的功能可以写在ad.html中
60 }
61 function closeWin(){
62 aNewWindow.close();
63 }
64
65 </script>
66 <input type="button" value="confirm方法" onclick="methodDemo()"/>
67 <input type="button" value="定时器-开始" onclick="methodDemo2()"/>
68 <input type="button" value="定时器1-停止" onClick="timeStop1()"/>
69 <input type="button" value="定时器2-停止" onClick="timeStop2()"/>
70 <br/>
71 <input type="button" value="移动窗口" onClick="moveWindow()" />
72 <input type="button" value="打开窗口" onClick="openWindow()" />
73 </body>
74</html>
75
ad.html:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2 <head>
3 <title>广而告之</title>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 </head>
6 <body>
7 <h1>特价大优惠!!!</h1>
8 <h2>走过路过，不要错过!!!</h2>
9 <h3>电器大赌场!!!</h3>
10 <h3>特价大优惠!!!</h3>
11 <script type="text/javascript">
12 //setTimeout("close()",3000);//绿色广告，3秒后自己关闭
13 </script>
14
15 <script type="text/javascript">
16 //垃圾广告，用户关闭之后，又打开
17 onunload = function(){
18 open("ad.html","_blank","height=200,width=400, status=yes,toolbar=no,menubar=no,location=no");
19 };
20 setInterval(focus,1000);// 如果当前窗口在后面 就每过1s---闪烁--IE11.3支持，360 8.1不支持
21 //setInterval("focus()",1000);
22 </script>
23 </body>
24</html>
25
26
里面窗口抖动和那个关闭窗口继续弹窗口和setInterval(focus,1000);
IE11.3支持，360 8.1不支持
window对象中的事件
onload 在浏览器完成对象的装载后立即触发。
onbeforeunload 在页面将要被卸载前触发。
onunload 在对象卸载前立即触发。
演示代码：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4 <title>Bom模型演示3---window对象中的事件</title>
5 </head>
6 <script type="text/javascript">
7 //“window.”可以省略。onload事件是在浏览器解析完页面文档时触发，
8 //只有当该事件触发时才会调用它的事件处理方法
9 window.onload = function(){
10 //window.status="欢迎来到湖南城市学院...";//浏览器的状态栏-360浏览器8.1不支持 -IE11.3支持
11 //alert("2222...");
12 setInterval(horse, 500);
13 }
14
15 window.οnunlοad=function(){//是浏览器关闭之后才触发的-360浏览器8.1不支持 -IE11.3支持
16 alert("ddddd...");//我们看不到
17 }
18
19 //是浏览器将要关闭之前触发的-360浏览器8.1不支持 -IE11.3支持
20 window.onbeforeunload = function(){
21 alert("kkkkk...");//我们看得到
22 }
23
24 var strs = ['欢', '迎', '来', '到', '湖', '南', '城', '市', '学', '院', ''];
25 var index = 0;
26 function horse(){
27 window.status = window.status + strs[index++];
28 if (index == strs.length) {
29 window.status = "";
30 index = 0;
31 }
32 }
33 </script>
34 <body>
35 <h1>湖南城市学院</h1>
36 <script type="text/javascript">
37 alert("1111...");
38 </script>
39 </body>
40 </body>
41</html>
42
43
状态栏：（浏览器右下角位置）
window对象中的document对象
2
3
4
5
6
7
8
9
10
11
12
13
2 * ※※获取元素的3种方式：
3 * 1、getElementById(): 通过标签中的id属性值获来取该标签对象
4 * 2、getElementsByName(): 通过标签中的name属性值来获取该标签对象集合
5 * 3、getElementsByTagName(): 通过标签名来获取该标签对象集合
6
7 ※※所有节点(标签、属性、文本)都有3个属性：nodeName、nodeType、nodeValue
8 1、nodeName： 节点的名称
9 2、nodeType："标签"为1， "属性"为2，"文本"为3
10 3、nodeValue："标签"节点是没有值的即null，属性和文本节点是有值的
11 */
12
13
演示代码：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4 <title>Dom模型演示1---window对象中的document对象</title>
5 </head>
6 <script type="text/javascript">
7 /*
8 * ※※获取元素的3种方式：
9 * 1、getElementById(): 通过标签中的id属性值获来取该标签对象
10 * 2、getElementsByName(): 通过标签中的name属性值来获取该标签对象集合
11 * 3、getElementsByTagName(): 通过标签名来获取该标签对象集合
12
13 ※※所有节点(标签、属性、文本)都有3个属性：nodeName、nodeType、nodeValue
14 1、nodeName： 节点的名称
15 2、nodeType："标签"为1， "属性"为2，"文本"为3
16 3、nodeValue："标签"节点是没有值的即null，属性和文本节点是有值的
17 */
18 //1、getElementById(): 通过标签中的id属性值获来取该标签对象
19 function getElementDemo1(){
20 var divNode = document.getElementById("divId1");
21 alert(divNode.nodeName+","+divNode.nodeType+","+divNode.nodeValue);
22 alert(divNode.innerText);//标签容器包含的文字
23 }
24
25
26 //2、getElementsByName(): 通过标签中的name属性值来获取该标签对象集合
27 function getElementDemo2(){
28 var aNode = document.getElementsByName("userName");
29 alert(aNode);//Object，其实是一个数组※※※※
30 alert(aNode[0].nodeName+","+aNode[0].nodeType+","+aNode[0].nodeValue);
31
32 //注意，是编辑框元素，但它的nodeValue值仍是null，因为是标签节点。而如果要获取该编辑框中的内容，则采用如下方式:
33 alert(aNode[0].value);//其实是读取aNode[0]节点中的属性"value"的值
34 }
35
36 // 3、getElementsByTagName(): 通过标签名来获取该标签对象集合
37 function getElementDemo3(){
38 var aNode = document.getElementsByTagName("input");
39 alert(aNode);//Object，其实是一个数组※※※※
40 alert(aNode[0].nodeName+","+aNode[0].nodeType+","+aNode[0].nodeValue);
41 }
42
43 </script>
44 <body>
45 <div id="divId1">
46 div区域1中的文字
47 </div>
48 <br/>
49 <input type="button" value="获取元素byId-1" onClick="getElementDemo1()">
50 姓名:<input type="text" name="userName"/>
51 <hr/>
52 <input type="button" value="获取元素byName-2" onClick="getElementDemo2()">
53 <input type="button" value="获取元素byTagName-3" onClick="getElementDemo3()">
54 </body>
55 </body>
56</html>
57
获取元素byName-2:
编辑框中的字符：
Dom模型演示—节点获取方式的一个示例
演示代码：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2 <head>
3 <title>Dom模型演示2---节点获取方式的一个示例</title>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <script type="text/javascript">
6 onload = function(){
7 var divNode = document.getElementById("link1");
8 var aNodes = divNode.getElementsByTagName("a");//获取当前div元素下面的所有节点
9 for(var x=0;x<aNodes.length;x++){
10 aNodes[x].target="_blank";//新窗口打开
11 aNodes[x].innerHTML="<b><font color='red'>商品"+(x+1)+"</font></b>";
12 //aNodes[x].innerText="<b><font color='red'>商品"+(x+1)+"</font></b>";
13 //innerHTML 设置或获取位于对象起始和结束标签内的 HTML。( HTML格式)
14 //innerText 设置或获取位于对象起始和结束标签内的文本(文本格式)。
15 }
16 }
17 </script>
18
19 </head>
20
21 <body>
22 <h2>友情链接：</h2>
23 <a href="http://www.hncu.net">城院首页</a>
24 <a href="http://www.sina.com">新浪首页</a>
25 <br/>
26
27 <h2>特价商品:</h2>
28 <div id="link1">
29 <a href="a.html">水杯</a>
30 <a href="b.html">风扇</a>
31 <a href="c.html">鼠标</a>
32 <a href="d.html">背包</a>
33 </div>
34 </body>
35
36</html>
37
38
a.html代码：
2
3
4
5
6
7
8
9
10
11
12
13
2 <head>
3 <title>水杯</title>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 </head>
6 <body>
7 <h1>特价水杯!!!</h1>
8 <h1>特价水杯!!!</h1>
9 <h1>特价水杯!!!</h1>
10 </body>
11</html>
12
13
