HTML:JS DOM和BOM操作实践 
 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4       <meta charset="utf-8">
 5     <title>visit-website.html</title>
 6 
 7     <script type="text/javascript">
 8         function visit(){
 9             var newUrl = document.getElementById("newsite").value;
10             location.href=newUrl;
11 
12         }
13 
14     </script>
15 
16     
17 
18   </head>
19   
20   <body>
21    请输入您要访问的网站：<input type="text" id="newsite">
22    <button onclick="visit();">去访问</button>
23   </body>
24 </html>
visit-website
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script>
 7         function calc(){
 8             var selector = document.getElementsByTagName("SELECT")[0];
 9             var goodsInfo = "";
10             var totalPrice = 0.0;
11             
12             for(var i=0;i<selector.options.length;i++){
13                 goodsInfo += selector.options[i].text+",";
14             }
15             
16             var resultObj = document.createElement("DIV");
17             resultObj.innerHTML = goodsInfo;
18             resultObj.className = "resultStyle"
19             
20             document.body.appendChild(resultObj);
21         
22         
23         }
24     
25     </script>
26 </head>
27 
28 <body>
29     购物清单：
30     <select id="goodList" size="4">
31         <option>土豆 1.2</option>
32         <option>西红柿 3.2</option> 
33         <option>黄瓜 2.5</option> 
34         <option>苹果2.0</option> 
35     </select>
36     <button onclick="calc();">计算商品个数和费用</button>
37     
38     
39 
40 </body>
41 
42 
43 </html>
calFee
 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <title>windows-work.html</title>
 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6     <script>
 7         function openWin(){
 8             window.open("http://www.163.com");
 9         
10         }
11     
12     </script>
13   </head>
14   
15   <body>
16     <button onclick="openWin();">打开窗口</button>
17   </body>
18 </html>
windows-work

总结：

DOM:Document_Object_Model
针对于文档对象api操作。
BOM：Browser_Object_Model
针对浏览器反映所进行的操作。
posted on 2017-04-05 12:59  随心随行  阅读(153)  评论(0)    收藏  举报