JavaScript Class 5
学习内容：
BOM-JavaScript是运行在浏览器中的，
所以提供了一系列对象用于和浏览器窗口进行交互，
这些对象主要包括window、document、location、navigator和screen等。
通常称为浏览器对象模型（Browser Object Model）
1.window对象：
window是顶层对象
document、location、navigator、screen、history是其属性
1 <script> 2 //windows是顶层对象，可以省略 3 function c(){ 4 window.alert("这是alert方法"); 5 } 6 function con(){ //带返回值的方法，确定返回true 取消返回false 7 var a = window.confirm("这是confirm方法"); 8 if(a == true){ 9 alert("bye"); 10 }else{ 11 alert("no"); 12 } 13 alert(a); 14 } 15 function pro(){ //带返回值的方法，点取消返回null 16 var b = window.prompt("这是prompt方法"); 17 if(b!=null){ 18 alert(b); 19 }else{ 20 alert("你点了取消"); 21 } 22 alert(b); 23 } 24 function move(){ 25 window.moveBy(50,50);//窗口移动多少分别定义上下、左右，可多次移动 moveTo移动至 移动一次 26 } 27 function resizeT(){ 28 window.resizeTo(600,500);//设置窗口大小至多大 29 } 30 function resizeB(){ 31 window.resizeBy(100,100);//设置窗口增大多少 32 } 33 </script>
PS 制作一个钟表
1 <html> 2 <head> 3 <script> 4 function startTime(){ 5 var d = new Date(); 6 var h = d.getHours(); 7 var m = d.getMinutes(); 8 var s = d.getSeconds(); 9 m = checkTime(m); 10 s = checkTime(s); 11 document.getElementById("clock").innerHTML=h+":"+m+":"+s; 12 t = setTimeout('startTime()',500); 13 //setTimeout本来只能执行一次指定函数，但是写在要执行的函数内，就可以实现重复调用 14 }
//var t = setInterval("startTime()",500);//setInterval 每隔多长时间执行一次函数 15 function checkTime(i){ 16 if(i<10){ 17 i="0"+i; 18 } 19 return i; 20 } 21 </script> 22 </head> 23 24 <body onLoad="startTime()"> 25 <div id="clock"></div> 26 </body> 27 </html>
2.history对象：
（a）back();返回前一页，只有浏览过两页以上时才会生效
（b）forward();下一页，当前页面如果是第一个打开的，则无效
（c）go(),前进或后退指定数量的页面，正则进，负则退
<a href="javascript:history.forward()">下一页</a> <a href="javascript:history.back()">上一页</a> <a href="javascript:history.go(5)">前进5页</a>
3.DOM
DOM:
DOM是文档对象模型（Document Object Model）的简称。当网页加载时，可以将结构化文档在内存中转换成对象的树。
通俗来说，就是把每一个html标签看做一个个的对象，利用JS来进行各种操作。
DOM模型中的节点——文档可以说是由节点构成的集合。在DOM模型中有以下3种节点：
1.元素节点：各种标签就是这些元素节点的名称，例如p标签等。
2.文本节点：文本节点总是被包含在元素节点的内部，例如a标签内的文字。
3.属性节点：一般用来修饰元素节点就称之为属性节点，例如a标签内的href属性。
常用操作：
1 <body> 2 <div> 3 <ul> 4 <li>123</li> 5 <li id="l1">456</li> 6 <li>789</li> 7 </ul> 8 </div> 9 <script> 10 //document.getElementById 通过id值来访问元素 11 //document.getElementsByTagName 通过标签名来访问元素 12 //var x = document.getElementsByTagName("li")[1].innerHTML;//方括号内为元素顺序 13 //alert(x); 14 //用过标签名来访问元素 15 //document.getElementById().parentNode 返回当前节点的父节点 16 //previousSibling 返回当前节点的前一个兄弟节点 nextSibling 返回当前节点的后一个兄弟节点 17 //document.getElementById().value 返回元素的属性值 18 //document.getElementById().innerHTML 返回元素的文本值 19 </script> 20 </body>
4.访问元素
1 <body> 2 <div id="d1"> 3 我的div块 4 </div> 5 <textarea cols="20" rows="10" id="d2"> 6 好好学习，天天向上 7 </textarea> 8 <input type="text" value="按我呀" id="d3"> 9 <input type="button" value="访问三个元素的内容" onClick="t()"> 10 <script> 11 function t(){ 12 x = document.getElementById("d1").innerHTML; 13 14 y = document.getElementById("d2").value; 15 16 z = document.getElementById("d3").value; 17 alert(x+"\n"+y+"\n"+z); 18 } 19 </script> 20 </body>
5.访问节点
<body>
<ul id="u">
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li style="color: red;" id="f">赵六</li>
<li>小红</li>
<li>小明</li>
</ul>
<input type="button" value="父节点" onClick="f()">
<input type="button" value="第一个子节点" onClick="fc()">
<input type="button" value="上一个节点" onClick="ps()">
<input type="button" value="下一个节点" onClick="ns()">
<input type="button" value="最后一个子节点" onClick="lc()">
<input type="button" value="得到所有li的元素个数" onClick="tn()">
<script>
function f(){
var f = document.getElementById("f").parentNode.innerHTML;
alert(f);
}
function fc(){
var fc = document.getElementById("f").parentNode.firstChild.nextSibling.innerHTML;//ul为块标签，之间的换行也是子节点，
//要找到真正的文字要下一个节点才是
alert(fc);
}
function ps(){
var ps = document.getElementById("f").previousSibling.previousSibling.innerHTML;
alert(ps);
}
function ns(){
var ns = document.getElementById("f").nextSibling.nextSibling.innerHTML;
alert(ns);
}
function lc(){
var lc = document.getElementById("f").parentNode.lastChild.previousSibling.innerHTML;//lastChild是换行
alert(lc);
}
function tn(){
var tn = document.getElementById("u").getElementsByTagName("li").length;
alert(tn);
var arr = document.getElementById("u").getElementsByTagName("li")//这是一个数组，存放了所有li
for(i=0;i<arr.length;i++){
document.write(arr[i].innerHTML+"\n");
}
}
</script>
</body>
2018/02/28
