JS BOM（也是超级长的单词哦）

• BOM：Browser Object Model 浏览器对象模型

• window和document

  • window：js中最顶层的一个对象，窗口

  • document：文档

window提供的方法

系统对话框（是查错改错的好办法！！！！！）

• alert(message) : 警告框

• confirm("message"): 带确认的对话框

• prompt(message,default) : 带输入的对话框

  //1.   alert(message) : 警告框
  alert("今天周一!!!");
  ​
  //2. confirm("message"): 带确认的对话框  确定---true  取消---false
  var s = confirm("明天听写吗？");
  console.log(s);
  ​
  //3. prompt(message,default) : 带输入的对话框   确定--输入的内容  取消--null 
  var text = prompt("请输入今天的作业个数",0);  
  console.log(text);

open与close

• open（）打开一个新窗口

  /*open写在行间，需要添加window
  open(url,target[_self,_blank],特殊字符串,是否取代当前窗口在浏览记录中的位置)
  返回新窗口的window*/
  <button onclick = "window.open('http://www.taobao.com')">taobao</button>
  <button onclick='fun()'>京东</button>
  <script>
      function fun(){
      var newWindow = open("http://www.jd.com","_blank","width:500px;height:500px");
      newWindow.alert("0713到处一游");
  }
  </script>

• close（）关闭当前窗口

  <button onclick="window.close()">关闭当前窗口</button>

 loaction

• location.href : 获取或设置当前窗口显示的url地址

• location.search:获取url中搜索内容

• location.protocol：协议

  //1.location.href : 获取或设置当前窗口显示的url地址
  console.log(location.href);
  setTimeout(function(){
      //location.href = "http://www.baidu.com";
      // location.reload(); //重构 刷新
  },2000);
  ​
  ​
  //2.如何快速获取url中搜索内容
  console.log(location.search);
  ​
  //3.协议
  console.log(location.protocol);

 history

1---》2----》3

当前处于2的页面，history.forward():前进 就会去到 3

当前处于2的页面，history.back() : 后退 就会去到 1

history.go() : 跳转 ，正数，前进n级，负数，后退n级

• history.forward():前进

• history.back() : 后退

• history.go() : 跳转

 BOM三大系列

获取元素的宽高

client : 可视区

• 元素.clientWidth : 获取元素的可视宽 content+padding

• 元素.clientHeight : 获取元素的可视高 content+padding

• 元素.clientTop/Left：获取元素的上/左边框

• 获取屏幕的可视宽高：document.documentElement.clientWidth/Height

  client系列：
      元素.clientWidth : 获取元素的可视宽   content+padding
      元素.clientHeight : 获取元素的可视高
      元素.clientTop: 获取元素的上边框
      元素.clientLeft:获取元素的左边框
  ​
      获取窗口的可视宽高：
      document.documentElement.clientWidth/clientHeight
  ​
    
  var oDiv = document.getElementsByTagName("div")[0];
  ​
  //1.获取元素的可视宽高
  console.log(oDiv.clientWidth); //120  content+padding
  ​
  //2.元素.clientTop: 获取元素的上边框
  console.log(oDiv.clientTop);
  ​
  //3.document.documentElement.clientWidth/clientHeight
  console.log(document.documentElement.clientWidth);

 offset：占位

• 元素.offsetWidth : 获取元素的占位宽 content+padding+border

• 元素.offsetHeight : 获取元素的占位高 content+padding+border

• 元素.offsetTop:获取当前元素的顶部到定位父元素的距离，如果没有定位父元素到body的距离

• 元素.offsetLeft:获取当前元素的左部到定位父元素的距离，如果没有定位父元素到body的距离

  offset系列：占位宽高
      元素.offsetWidth：获取元素的占位宽
      元素.offsetHeight：获取元素的占位高
      元素.offsetTop : 获取元素的顶部距离定位父元素的距离，如果没有定位父元素获取到body的距离
      元素.offsetLeft : 获取元素的左部距离定位父元素的距离，如果没有定位父元素获取到body的距离
  ​
  var oDiv = document.getElementsByTagName("div")[0];
  var oP = document.getElementsByTagName("p")[0];
  ​
  //1.元素.offsetWidth：获取元素的占位宽
  console.log(oDiv.offsetWidth); //240  content+padding+border
  ​
  //2元素.offsetTop : 获取元素的顶部距离定位父元素的距离，如果没有定位父元素获取到body的距离
  console.log(oP.offsetTop); //120

 scroll：滚动

• 元素.scrollWidth：元素的实际内容宽

• 元素.scrollHeight：元素的实际内容高

• 元素.scrollTop：元素被卷去的高

• 元素.scrollLeft：元素被卷去的宽

• onscroll：滚动条滚动的时候触发

• 页面被卷去的高：document.documentElement.scrollTop||document.body.scrollTop

  注意：只有滚动距离可以设置：document.documentElement.scrollTop = 0;

  //1.获取元素
  var oDiv = document.getElementsByTagName("div")[0];
  ​
  //2.元素.scrollWidth：元素的实际内容宽
  console.log(oDiv.scrollWidth); //1300
  ​
  //3.onscroll ： 滚动条滚动的时候触发
  oDiv.onscroll = function(){
      console.log(oDiv.scrollTop); //元素.scrollTop：元素被卷去的高
      console.log(oDiv.scrollLeft); //元素.scrollTop：元素被卷去的宽
  }
  ​
  //页面的滚动距离
  window.onscroll = function(){
      console.log(document.documentElement.scrollTop || document.body.scrollTop);
  }

BOM三大事件

• window.onscroll : 页面滚动事件，滚动条滚动的时候触发

• window.onresize : 窗口可视区大小发生变化时触发

• window.onload : 加载事件，等文档和资源都加载完成后触发