JavaScript基础 DOM节点、BOM（二）

BOM相关操作

window.open()

window.navigator

window.location

window相关事件

clientHieght、offsetHeight、scrollHeight的区别

BOM : Browser Object Model

window.open()

<input type="button" id="btn" value="点我打开一个新窗口">

document.getElementById('btn').onclick = function(){
		window.open('http://www.baidu.com');
		open('http://www.baidu.com', '_new');
		/*
 var newWin = window.open();
 newWin.document.title = '这是一个新的窗口';  // ^_^
 newWin.document.body.innerHTML = '晚上好！！！！！！！';  // ^_^
 */
 // var newWin = window.open('http://www.baidu.com');
 // newWin.document.title = '这是一个新的窗口';  // -_-  跨域了
 // newWin.document.body.innerHTML = '晚上好！！！！！！！'; // -_-
/*
 close();
 关闭窗口
 */ 
 var newWin = window.open();
 newWin.document.title = '这是一个新的窗口';  // ^_^
 newWin.document.body.innerHTML = '晚上好！！！！！！！<br/><input type="button" id="btn" value="点我关闭当前窗口">';  // ^_^
 newWin.document.getElementById('btn').onclick = function(){
  newWin.close();
 }
 }

window.navigator

查看浏览器的相关信息

console.log( window.navigator.userAgent ); // "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.62 Safari/537.36"
// 判断浏览器
var info = window.navigator.userAgent;
if(info.indexOf('MSIE') != -1){
 alert('我是IE')
}else{
 alert('我不是IE')
}

window.location

// http://www.yw.nodejs.com:88/js09/index2.html
window.location.hash   ==>''
      .host   ==>'www.yw.nodejs.com:88'
      .hostname   ==>'www.yw.nodejs.com'
      .href    ==>'http://www.yw.nodejs.com:88/js09/index2.html'
      .origin  ==>'http://www.yw.nodejs.com:88'
      .pathname  ==>'/js09/index2.html'
      .port    ==>'88'
      .protocol  ==>'http:'

window相关事件

window.onresize:窗口放大缩小时触发
window.onscroll:滚动条滚动时触发

clientHieght、offsetHeight、scrollHeight的区别

alert(oBox.clientHeight); // height+padding
alert(oBox.offsetHeight); // height+padding+border
alert(oBox.scrollHeight); // height+padding