BOM
Browser Object Model 浏览器对象模型,js封装好的用来操作浏览器的一个对象模型,BOM的顶级对象是window。
window是全局浏览器内置顶级对象
全局变量和全局函数默认是挂在window下的
window上的各种属性,比如:name、length、top,一般不要用作全局变量
window.innerWidth 获取浏览器内容宽度
window.innerHeight 获取浏览器内容高度
window下的子对象
-
location:地址栏
location对象里有很多属性,这些属性想要明白意思就直接在控制台打印就行
location.reload() 刷新,参数传true是强制刷新(清除缓存)
location.replace() replace是替换的意思,页面跳转
-
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; } }
-
history(页面必须有历史纪录才能使用这些方法)
- history.go(1) 参数可写任意整数,正数前进,负数后退
- history.back() 后退一步
- history.forward() 前进一步
-
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树
页面的所有元素可以看作是一颗倒挂的树,标签、文字、属性甚至包括注释都在这棵树上
获取元素
从文档上直接获取
-
document.getElementById 通过id获取到元素对象
-
document.getElementsByClassName 通过class获取元素集合,得到的是一个类数组对象,有length属性,可以通过索引取到某一个对象
-
document.getElementsByTagName 通过标签名获取元素集合,得到的是一个类数组对象,有length属性,可以通过索引取到某一个对象
但是现在因为对浏览器的兼容需求变小了(IE基本不用管了),所以前三种用的很少,用后面两种
-
document.querySelector 这个方法参数传选择器,取到的是第0个满足选择器的对象,就算有多个,仍然只取第0个对象
-
document.querySelectorAll 这个方法参数传选择器,取到所有满足选择器的元素,得到一个类数组对象,有length属性,可以通过索引取到某一个对象
从某个元素出发在DOM树上获取
children 获取所有子元素(用的最多)
parentNode 获取父级元素(用的最多)
firstElementChild 获取当前元素节点的第一个子元素
lastElementChild 获取当前元素节点的最后一个子元素
previousElementSibling 获取上一个兄弟元素
nextElementSibling 获取下一个兄弟元素
属性获取和操作
元素自带的属性
比如:img的src,a标签的href。。。这些属性可以直接用 . 来获取也可以赋值修改
自定义属性
getAttribute( ) 获取
setAttribute( ) 设置,两个参数,属性名和属性值,注意:设置的任意类型的属性值最终都会变成字符串
removeAttribute( ) 移除
class获取和设置
-
className 这个获取或者设置的是整个class的字符串
-
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
让滚动条在最底部的公式