JavaScript知识要点总结之BOM

BOM:Browser Object Model 浏览器对象模型—操作浏览器

* 历史记录的后退和前进 history: back()后退 forward()前进
* 地址栏上的地址的操作 location href属性跳转页面, assgin()跳转页面 reload()刷新 replace()方法替换地址栏上的地址的,没有历史记录的
* 获取系统和浏览器的信息的 navigator userAgent属性---获取系统,浏览器的信息的
* 地址栏上#及后面的内容
* console.log(window.location.hash);
* 主机名及端口号
* console.log(window.location.host);
* 主机名
* console.log(window.location.hostname);
* 文件的路径---相对路径
* console.log(window.location.pathname);
* 端口号
* console.log(window.location.port);
* 协议
* console.log(window.location.protocol);
* 搜索的内容
* console.log(window.location.search);
*  通过userAgent可以判断用户浏览器的类型
console.log(window.navigator.userAgent);
通过platform可以判断浏览器所在的系统平台类型.
console.log(window.navigator.platform);

扩展

//只要页面加载完毕,这个事件就会触发-----页面中所有的内容,标签,属性,文本,包括外部引入js文件
//    window.οnlοad=function () {
//      document.getElementById("btn").οnclick=function () {
//        alert("弹框");
//      };
//    };

三大系列:

在style标签中设置的样式属性获取不到
style属性中设置的样式属性是可以获取到的

*  offset系列:
*  (父级元素margin+父级元素padding+父级元素border+自己的margin)
*  offsetLeft:元素距离左边位置的值
*  offsetTop:元素距离上面位置的值
*  offsetWidth:获取元素的宽度(有边框)
*  offsetHeight:获取元素的高度(有边框)
*
*  scroll系列:卷曲
*  scrollLeft:元素向左卷曲出去的距离
*  scrollTop:元素向上卷曲出去的距离
*  scrollWidth:元素中内容的实际的宽度,如果没有内容,或者内容很少,元素的宽度
*  scrollHeight:元素中内容的实际的高度,如果没有内容,或者内容很少,元素的高度
*
*
*  client系列:
*  clientWidth:可视区域的宽度,没有边框
*  clientHeight:可视区域的高度,没有边框
*  clientLeft:左边框的宽度
*  clientTop:上边框的宽度
*  clientX:可视区域的横坐标
*  clientY:可视区域的纵坐标、；

以后获取元素的宽和高,应该使用offset系列来获取
以后获取元素的宽和高,应该使用offset系列来获取

scrollWidth:元素中内容的实际的宽(没有边框),如果没有内容就是元素的宽
scrollHeight:元素中内容的实际的高(没有边框),如果没有内容就是元素的高
脱离文档流了
主要是自己的left和自己的margin

//获取页面向上或者向左卷曲出去的距离的值
  function getScroll() {
    return {
      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
  }