1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <script> 7 /* 8 BOM : Browser Object Model 浏览器对象模型 9 */ 10 window.onload = function() { 11 var aInput = document.getElementsByTagName('input'); 12 var opener = null; 13 14 aInput[0].onclick = function() { 15 16 //open(地址默认是空白页面，打开方式默认新窗口) 打开一个新窗口 17 //window.open('http://www.baidu.com', '_self'); 18 19 opener = window.open();//返回值 返回的新开页面的window对象 20 21 //alert(opener == window) 22 23 //opener.document.body.style.background = 'red'; 24 25 } 26 27 aInput[1].onclick = function() { 28 29 window.close(); 30 /* 31 ff : 无法关闭 32 chrome : 直接关闭 33 ie : 询问用户 34 */ 35 36 } 37 38 aInput[2].onclick = function() { 39 opener.close(); //可以通过关闭用window.open方法打开的窗口 40 } 41 } 42 </script> 43 </head> 44 45 <body> 46 <input type="button" value="打开新窗口" /> 47 <input type="button" value="关闭窗口" /> 48 <input type="button" value="关闭新窗口" /> 49 </body> 50 </html>
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <script> 7 /* 8 DOM : Document Object Model 文档对象模型 9 文档：html页面 10 文档对象：页面中元素 11 文档对象模型：定义 为了能够让程序(js)去操作页面中的元素 12 13 DOM会把文档看作是一棵树，同时定义了很多方法来操作这棵数中的每一个元素（节点） 14 DOM节点 15 16 getElementById 17 getElementByTagName 18 document 19 document.body 20 */ 21 </script> 22 </head> 23 24 <body> 25 <div id="div1"> 26 <p>11111111</p> 27 <ul id="ul1"> 28 <li>11111</li> 29 <li>22222</li> 30 <li>33333</li> 31 <li>44444</li> 32 </ul> 33 </div> 34 </body> 35 </html>