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+"
"+y+"
"+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+"
");
            }
        }
    </script>
</body>

2018/02/28