javascript：DOM/BOM练习
一、BOM/DOM练习内容
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>菜鸟教程(runoob.com)</title>
6 <style>
7 .st{
8 color:blue;
9 font-size: 2rem;
10 }
11 </style>
12 </head>
13
14 <body>
15 <button id="bt1" onclick="jump()">跳转</button>
16 <button id="bt2" onclick="front()">out2</button>
17 <button id="bt3" onclick="localstorage()">out3</button>
18 <div>
19 <p>显示输入内容：<span id="out1" class="st"></span></p>
20 <p>out2：<span id="out2" class="st"></span></p>
21 <p>out3：<span id="out3" class="st"></span></p>
22 </div>
23
24 </body>
25
26 <script>
27
28
29 // 跳转：向前
30 function front()
31 {
32 // window.history.forward();
33 window.history.go(1);
34 }
35
36
37 // 跳转：向后
38 function back()
39 {
40 window.history.back();
41 }
42
43
44 // 乱七八糟的内容
45 function jump()
46 {
47
48 // 确认按钮
49 // var x = window.confirm("push button");
50 if(1==1){
51
52 // window.alert("press button");
53
54 // 输入提示框
55 var msg1 = window.prompt("输入你的名字", "null");
56
57 // 编码：base64
58 var msg2 = window.btoa(msg1);
59 // 解码：base64
60 var msg3 = window.atob(msg2);
61
62 var hostname = window.location.hostname;
63 // window.location.assign("https://www.runoob.com")
64 var url = window.location.assign("http://www.baidu.com");
65 getElementById("out1").innerHTML=msg1;
66 // getElementById("out2").innerHTML=msg2;
67 getElementById("out2").innerHTML=hostname;
68 // getElementById("out3").innerHTML=msg3;
69 getElementById("out3").innerHTML=url;
70
71 }else
72 {
73 window.alert("not press button");
74 }
75 }
76
77
78 // window.localstorage, window.sessionStorage, 在本地存储数据。
79 function localstorage()
80 {
81 var ls = window.localStorage;
82 var len = ls.length;
83 getElementById("out2").innerHTML=len;
84 var ct="";
85 var count = 1;
86 for( x in ls){
87 ct = count + " || " + ct +"<br/>"+ ls[x];
88 count = count + 1;
89 }
90 getElementById("out3").innerHTML=ct;
91 }
92
93
94 // 封装，封装常用的代码块，写程序变得简洁。 这个思路挺有意思的，值得借鉴下。
95 function getElementById(eid)
96 {
97 // var tmp = document.getElementById(eid);
98 return document.getElementById(eid);
99 }
100 </script>
101 </html>
二、参考资料：
1、bom -- window 对象： https://www.runoob.com/jsref/obj-window.html
标签：function,out3,DOM,javascript,window,innerHTML,getElementById,BOM,var From： https://www.cnblogs.com/lnlidawei/p/17100346.html