BOM和DOM详细知识点总结

BOM

Browser Object Model 浏览器对象模型，js封装好的用来操作浏览器的一个对象模型，BOM的顶级对象是window。

window是全局浏览器内置顶级对象

全局变量和全局函数默认是挂在window下的

window上的各种属性，比如：name、length、top，一般不要用作全局变量

window.innerWidth 获取浏览器内容宽度

window.innerHeight 获取浏览器内容高度

window下的子对象

1. location：地址栏

   location对象里有很多属性，这些属性想要明白意思就直接在控制台打印就行

   location.reload() 刷新，参数传true是强制刷新（清除缓存）

   location.replace() replace是替换的意思，页面跳转

2. navigator 这个对象里可以获取浏览器相关的信息，但是以前的各种属性已经在逐渐被抛弃了

   navigator.userAgent 返回浏览器信息（可用此属性判断当前浏览器）

   判断当前浏览器类型的代码：这段代码拿去用就行

   function isBrowser() {
       var userAgent = navigator.userAgent;
       //微信内置浏览器
       if(userAgent.match(/MicroMessenger/i) == 'MicroMessenger') {
           return "MicroMessenger";
       }
       //QQ内置浏览器
       else if(userAgent.match(/QQ/i) == 'QQ') {
           return "QQ";
       }
       //Chrome
       else if(userAgent.match(/Chrome/i) == 'Chrome') {
           return "Chrome";
       }
       //Opera
       else if(userAgent.match(/Opera/i) == 'Opera') {
           return "Opera";
       }
       //Firefox
       else if(userAgent.match(/Firefox/i) == 'Firefox') {
           return "Firefox";
       }
       //Safari
       else if(userAgent.match(/Safari/i) == 'Safari') {
           return "Safari";
       }
       //IE
       else if(!!window.ActiveXObject || "ActiveXObject" in window) {
           return "IE";
       }
       else {
           return "未定义:"+userAgent;
       }
   }
   

3. history（页面必须有历史纪录才能使用这些方法）

   • history.go(1) 参数可写任意整数，正数前进，负数后退
   • history.back() 后退一步
   • history.forward() 前进一步

4. screen: 屏幕，用的很少

   • window.screen.width 返回当前屏幕宽度(分辨率值)
   • window.screen.height 返回当前屏幕高度(分辨率值)

window下的弹框方法

• alert() 警告框
• prompt() 输入框
• confirm() 确认框

定时器

• 超时定时器

  setTimeout 打开定时器

  clearTimeout 清除定时器

• 间隔定时器

  setInterval 打开定时器

  clearInterval 清除定时器

不管是哪种定时器都可以用一个变量接收定时器的id，清除的时候用id来清除

window的各种事件

• window.onload 页面加载完成

• window.onscroll 页面滚动

  var scrolltop=document.documentElement.scrollTop||document.body.scrollTop; //兼容

  window.scrollTo(x, y) // 设置滚动条位置，x代表横坐标，y代表纵坐标

• window.onresize 窗口大小改变

DOM

Document Object Model 文档对象模型，定义了表示和修改文档所需的对象、行为和属性，以及这些对象之间的关系

DOM是ECMAScript来操作页面元素的一种工具

DOM的核心对象是document

DOM树

页面的所有元素可以看作是一颗倒挂的树，标签、文字、属性甚至包括注释都在这棵树上

获取元素

从文档上直接获取

1. document.getElementById 通过id获取到元素对象

2. document.getElementsByClassName 通过class获取元素集合，得到的是一个类数组对象，有length属性，可以通过索引取到某一个对象

3. document.getElementsByTagName 通过标签名获取元素集合，得到的是一个类数组对象，有length属性，可以通过索引取到某一个对象

   但是现在因为对浏览器的兼容需求变小了（IE基本不用管了），所以前三种用的很少，用后面两种

4. document.querySelector 这个方法参数传选择器，取到的是第0个满足选择器的对象，就算有多个，仍然只取第0个对象

5. document.querySelectorAll 这个方法参数传选择器，取到所有满足选择器的元素，得到一个类数组对象，有length属性，可以通过索引取到某一个对象

从某个元素出发在DOM树上获取

children 获取所有子元素（用的最多）

parentNode 获取父级元素（用的最多）

firstElementChild 获取当前元素节点的第一个子元素

lastElementChild 获取当前元素节点的最后一个子元素

previousElementSibling 获取上一个兄弟元素

nextElementSibling 获取下一个兄弟元素

属性获取和操作

元素自带的属性

比如：img的src，a标签的href。。。这些属性可以直接用 . 来获取也可以赋值修改

自定义属性

getAttribute( ) 获取

setAttribute( ) 设置，两个参数，属性名和属性值，注意：设置的任意类型的属性值最终都会变成字符串

removeAttribute( ) 移除

class获取和设置

1. className 这个获取或者设置的是整个class的字符串

2. classList （新增属性，低版本浏览器用不了）

   获取到的是一个伪数组，帮我们把元素的多个class切开

   add() 可以添加class

   remove() 可以移除某个class

操作DOM元素

增：

var oDiv = document.createElement(“div”) 创建一个div

document.body.appendChild(oDiv) 把div插入到body最后

parentNode.insertBefore(newNode, targetNode); //将newNode插入targetNode之前

改：

替换

parentNode.replaceChild(newNode, targetNode); //使用newNode替换targetNode

克隆（复制）

clonedNode = Node.cloneNode(boolean) // 只有一个参数，传入一个布尔值，true表示深客隆，复制该节点下的所有子节点；false表示浅克隆，只复制该节点，不会复制里面的内容

删：

parentNode.removeChild(childNode); // 移除目标节点

node.parentNode.removeChild(node); //在不清楚父节点的情况下使用

childNode.remove() // IE8-不支持

补充

节点和元素

DOM树上的所有东西都是节点，包括换行，注释，属性。。。

元素也是节点中的一种，称之为元素节点，也叫DOM元素，也叫DOM对象

Node.nodeName 获取节点的名称，#text文本节点，#comment注释节点，元素可以得到大写的标签名

如果你已经确定这是一个元素节点了，可以使用tagName属性获取大写标签名

body

因为body在页面上是唯一的，所以DOM提供了一种特殊获取方式，document.body

像这样的还有 document.title 也可以直接获取或者设置title的内容

而不用自己取查找一遍

当然，你也可以使用 document.querySelector(‘body’) 来获取，但是没有必要

DOM尺寸和坐标

尺寸

• box.style.width、box.style.height可以获取和设置内联样式

• getStyle(box,“width”) 可以获取最终生效得样式值（无论是行内内部还是外部）

  function getStyle(obj,attr){    //获取非行间样式，obj是对象，attr是值
        if(obj.currentStyle){   //针对ie获取非行间样式
              return obj.currentStyle[attr];
        }else{
              return getComputedStyle(obj,false)[attr];   //针对非ie
        };
  };
  

• box.offsetWidth、box.offsetHeight 获取占位尺寸，包含 width、padding以及border

• box.clientWidth、box.clientHeight 获取内部大小，包含width和padding

• box.scrollWidth、box.scrollHeight 获取滚动内容宽高，如果box没有滚动条，跟clientHeight是一样的，有的话就是整个所有内容得高度，宽度也一样

后三种都是只读的，可以实时获取尺寸，但是不能设置

位置坐标

• box.offsetLeft、box.offsetTop 获取元素当前相对于offsetParent父元素的位置

  offsetParent指的是box向上查找最近的有定位属性祖先元素，如果没有，则得到body

• box.clientLeft、box.clientTop 获取左边框和上边框的宽度，获取的是元素加边框前后的偏移量，也就是左边框和上边框的宽度

• box.scrollLeft、box.scrollTop 获取滚动内容上方的位置(就是隐藏的内容的高度)获取滚动内容左方的位置，一般配合onscroll事件来使用

附：box.scrollTop = box.scrollHeight - box.clientHeight

让滚动条在最底部的公式