BOM(浏览器对象模型)
所有浏览器都支持window对象,他表示浏览器窗口。
所有js全局对象,函数,变量均自动成为window对象的成员。
全局变量是window对象的属性。
全局函数是window对象的方法。
基于html dom的document也是window对象的属性之一。
window.document.getElementById("header");
document.getElementById("header");
1. window 获取浏览器c窗口尺寸
浏览器窗口的内部高度(不包括滚动条,菜单栏,工具栏)
window.innerHeight
window.innerWidth
适用于Internet Explorer 8、7、6、5浏览器的window如下:
document.documentElement.clientHeight
document.documentElement.clientWidth
兼容方案获取浏览器宽高`
var width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth
var height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
2. screen 获取电脑屏幕大小
属性返回访问者屏幕的宽/高度,以像素计,减去界面特性,比如窗口任务栏。
screen.availWidth
screen.availHeight
3. window 开启关闭窗口
开启:window.open()
关闭:window.close()
<script type="text/javascript">
var newWindows;
function newWindow() {
newWindows = window.open("https://www.baidu.com/","baidu");
}
function closeWindow() {
newWindows.close();
}
</script>
4. 浏览器事件
名称 | 描述 |
---|---|
window.onload | 浏览器加载事件 |
window.onscroll | 浏览器滚动监听 |
window.onresize | 浏览器缩放监听 |
window.open | 打开事件 |
window.close | 关闭 |
5. location
获取当前网页地址,吧浏览器从定向到新的网页(当前页打开)可以不用写window这个前缀
名称 | 描述 |
---|---|
location.herf | 当前url |
location.hostname | 主机域名 |
location.pathname | 当前页面路径和文件名 |
location.port | 端口 |
location.protocol | 协议(http/https) |
location.assign | 加载新的文档 |
location.search | url参数 |
console.log(location.href);
console.log(location.hostname);
console.log(location.pathname);
console.log(location.port);
console.log(location.protocol);
6. history
浏览器历史,可以不用写window这个前缀
名称 | 描述 |
---|---|
history.length | 次数 |
history.back | 上一页 |
history.forward | 下一页 |
history.go | 小括号中,设定数值和 正负号,+数值 向下一个跳转的次数,-数值 向上一个跳转的次数,次数计算 : 结束页面 - 起始页面 ,错误跳转次数,没有执行效果 |
window.history.back();
7. navigator 获取浏览器相关信息
window.navigator
名称 | 描述 |
---|---|
navagator.userAgent | 型号,内核,版本,平台 |
navagator.appVersion | 浏览器版本信息 |
navagator.appName | 浏览器名称 |
navagator.platform | 操作系统 |
navagator.geolocation | 位置信息包括经度longitude和纬度latitude |
export function GetCurrentBrowser() {
var agent = navigator.userAgent.toLowerCase();
var regStr_ie = /msie [\d.]+;/gi;
var regStr_ff = /firefox\/[\d.]+/gi
var regStr_chrome = /chrome\/[\d.]+/gi;
var regStr_saf = /safari\/[\d.]+/gi;
//IE11以下
if (agent.indexOf("msie") > 0) {
return agent.match(regStr_ie);
}
//IE11版本中不包括MSIE字段
if (agent.indexOf("trident") > 0 && agent.indexOf("rv") > 0) {
return "IE " + agent.match(/rv:(\d+\.\d+)/)[1];
}
//firefox
if (agent.indexOf("firefox") > 0) {
return agent.match(regStr_ff);
}
//Chrome
if (agent.indexOf("chrome") > 0) {
return agent.match(regStr_chrome);
}
//Safari
if (agent.indexOf("safari") > 0 && agent.indexOf("chrome") < 0) {
return agent.match(regStr_saf);
}
}
// get os
export function GetOs() {
let userAgent = navigator.userAgent.toLocaleLowerCase() //toLocaleLowerCase()将字母转小写
let wins = [
{
sys: 'windows nt 5.0',
alias: 'windows 2000',
name: 'Win2000'
},
{
sys: 'windows nt 5.1',
alias: 'windows xp',
name: 'WinXP'
},
{
sys: 'windows nt 5.2',
alias: 'windows 2003',
name: 'Win2003'
},
{
sys: 'windows nt 6.0',
alias: 'Windows Vista',
name: 'WinVista'
},
{
sys: 'windows nt 6.1',
alias: 'Windows 7',
name: 'Win7'
},
{
sys: 'windows nt 6.2',
alias: 'Windows 8',
name: 'Win8'
},
{
sys: 'windows nt 10.0',
alias: 'Windows 10',
name: 'Win10'
},
]
for (let win of wins) {
if (userAgent.indexOf(win.sys) > -1 || userAgent.indexOf(win.alias) > -1) {
return win.name
}
}
}
export function getEdition() {
var userAgent = navigator.userAgent.toLocaleLowerCase()
if (userAgent.indexOf("win64") > -1 || userAgent.indexOf("wow64") > -1) {
return '64位'
} else {
return '32位'
}
}
export function IsPC() {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
//获取url参数 返回对象
export function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = {}
let strs = []
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
export const browser = {
versions: (function() {
let u = navigator.userAgent
// let app = navigator.appVersion
return {
trident: u.indexOf('Trident') > -1, // IE内核
presto: u.indexOf('Presto') > -1, // opera内核
webKit: u.indexOf('AppleWebKit') > -1, // 苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') === -1, // 火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), // 是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, // android终端
iPhone: u.indexOf('iPhone') > -1, // 是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, // 是否iPad
webApp: u.indexOf('Safari') === -1, // 是否web应该程序,没有头部与底部
weixin: u.indexOf('MicroMessenger') > -1, // 是否微信
qq: u.match(/\sQQ/i) === 'qq' // 是否QQ
}
}()),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
8. 弹窗
1、警告框:Window.alert()
2、输入框:Window.prompt()
3、确认框: Window.confirm()
DOM (文档对象模型)
通过 HTML DOM,使用 JavaScript访问 HTML 文档的所有元素。
当网页被加载时,浏览器会创建页面的文档对象模型
DOM 分类
定义了访问和操作前端培训HTML 文档的标准方法。DOM 将 HTML 文档表达为树结构
html中,一切都是节点
- 元素节点
- 文本节点
- 属性节点
各个节点关系为:父子关系\兄弟关系
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML
- JavaScript 能够改变页面中的所有 HTML 元素。
- JavaScript 能够改变页面中的所有 HTML 属性。
- JavaScript 能够改变页面中的所有 CSS 样式。
- JavaScript 能够对页面中的所有事件做出反应。
DOM对象
对象 | 描述 |
---|---|
Document:文档对象 | 每个载入浏览器的 HTML 文档都会成为 Document 对象 |
Element:元素对象 | Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。 |
Attribute:节点属性对象 | Attr 对象表示 HTML 属性 |
Event:事件对象 | 事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状 |
Document文档对象
Document对象所有属性
属性 | 描述 |
---|---|
document.body | 获取body |
document.Head | 获取head |
document.Element | 获取html |
document.cookie | 获取cookie |
document.domain | 当前文档域名,可做跨域操作 |
document.lastModified | 文档最后修改日期时间 |
document.referrer | 当前文档的url |
document.title | 标题 |
document.URL | 当前文档的URL |
Document常用方法
方法 | 描述 |
---|---|
document.write() | 文档写入内容 |
document.open() | 打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。 |
document.close() | 关闭用 document.open() 方法打开的输出流,并显示选定的数据。 |
document.writeIn() | 等同于 write() 方法,不同的是在每个表达式之后写一个换行符 |
获取元素 | |
document.getElementById() | 通过id获取元素 |
document.getElementsByName() | 通过name获取相关元素数组 |
document.getElementsByTagName() | 通过标签获取相关元素数组 不能使用forEach循环 |
document.getElementsByClassName() | 通过class获取相关元素数组 不能使用forEach循环 |
document.querySelector() | 获取第一个匹配条件的标签对象 --- 只会获取一个标签对象 |
document.querySelectorAll() | 获取所有匹配条件的标签对象 执行结果是伪数组 |
创建元素 | |
document.createAttribute() | 创建属性对象 |
document.createElement() | 创建元素对象 |
document.createTextNode() | 创建文本对象 |
document.createComment() | 创建注释 |
element文档对象
element元素对象常用的方法
方法 | 描述 |
---|---|
元素增,删,改,克隆 | |
appendChild(doc) | 插入节点到最后 |
insertBefore(ndoc, oldoc) | 插入节点到某个节点之前 |
removeChild(doc) | 移除该节点 |
replaceChild(doc) | 替换节点 |
cloneNode() | 克隆节点 |
cloneNode(true) | 克隆节点及其内容 |
属性相关 | |
getAttribute() | 获取属性 |
setAttribute() | 设置属性 |
removeAttribute() | 移除属性 |
getAttributeNode() | 指定属性节点 |
setAttributeNode() | 设置属性节点 |
removeAttributeNode() | 移除属性节点 |
getElementsByTagName() | 指定标签名的所有子元素的集合 |
nodelist.item() | NodeList 中位于指定下标的节点 |
.classList.add() | 添加class |
.classList.remove() | 移除class |
element元素对象常用的属性
属性 | 描述 |
---|---|
id | 元素id |
style | 样式 |
className | class属性 |
innerHML | 标签内容 |
innerText | 文本内容 |
获取节点 | |
childNodes | 获取元素子节点 |
parentNode | 获取元素父节点 |
attributes | 获取所有属性 |
children | 获取所有标签子节点 |
firstchild | 第一个子节点 |
lastchild | 最后一个子节点 |
firstElementchild | 第一个标签子节点 |
lastElementChild | 最后一个标签子节点 |
previousSibling | 上一个兄弟节点 |
nextsibling | 下一个兄弟节点 |
previousElementsibling | 上一个标签 |
nextElemntSibling | 下一个标签 |
parentNode | 父级节点 |
parentElement | 父级标签节点 |
nodeName | 名字:元素节点--标签名称、属性节点--属性名、文本节点--#text、注释节点--#comment |
nodeType | 节点类型:1元素, 2属性 3文本, 8注释 |
nodeValue | 元素值:属性值、文本内容、注释内容 |
nodelist.length | NodeList 中的节点数 |
尺寸距离 | |
clientHeight | 高度-内容+padding |
Clientwidth | 宽度 |
offsetHeight | 高度-内容+padding+border |
Offsetwidth | 宽度 |
ClientTop | 上边框宽度 |
clientLeft | 做边框宽度 |
offsetTop | 父物体顶部距离 |
offsetLeft | 父物体左侧距离 |
DOM事件操作
鼠标事件
名称 | 描述 |
---|---|
click | 点击事件 |
dbclick | 双击事件 |
contextmenu | 右键点击事件 |
mousedown | 按下事件,执行一次 |
mouseup | 抬起事件 |
mousemove | 鼠标移动 |
mouseover | 移入 |
mouseout | 移除 |
mouseenter | 移入,不发生冒泡 |
mouseleave | 移除,不冒泡 |
键盘事件
获取点击时的事件对象
- 普通版本
E/event - IE低版本
Window.event
兼容写法:var e=e||window.event
获取案件相关
- 按键名称:
e.Key - 按键编码:
e.Keycode - 兼容火狐:
e.Which
兼容写法: e.Keycode|| e.Which
altkey ctrlkey shiftkey 判断是否按下 alt ctrl shift
触屏事件
名称 | 描述 |
---|---|
touchstart | 开始 |
touchend | 结束 |
touchmove | 移动 |
特殊事件
名称 | 描述 |
---|---|
animationend | 动画结束 |
transitionend | 过度结束 |
表单事件
名称 | 描述 |
---|---|
submit | 只有提交表单时,触发的事件 |
focus | 标签获取焦点会处触发的事件 |
input | 输入数据时会触发的事件 |
change | 失去加并且输入数据改变是触发事件 |
浏览器兼容处理
1、浏览器滚动高度
var height=document.documentElement.scrollTop||document.body.scrollTop
var width=document.documentElement.scrollLeft||document.body.scrollLeft
- 有文档类型声明
document.documentElement.scrollTop
document.documentElement.scrollLeft
- 没有文档类型声明
document.body.scrollTop
document.body.scrollLeft
2、获取非行内样式属性
实际效果是,获取标签执行的样式属性
if(window.getComputedStyle){
window.getComponentStyle(dom).width
}else{
doc.currentStyle.width
}
3、获取事件对象
dom.onclick=function(e){
e=e||window.event
}
4、获取事件对象目标
兼容低版本火狐浏览器,现在基本上不用了
dom.事件=function(){
e=e||window.event
var target=e.target||e.srcElement
}
5、按键数值
兼容低版本火狐浏览器,现在基本上不用了
document.onkeyup=function(e){
e=e||window.event
var keyNum=e.keyCode||e.which
}
6、事件的监听/事件的注册
function myAddEvent(ele,type,fun){
判断addEventListener这个方法是否存在
if(ele.addEventListener){
ele.addEventListener(type,fun)
}else{
ele.attachEvent('on'+type,fun)
}
}
7、删除事件处理函数
function delFun(ele,type,fun){
if(ele.removeEventListener){
ele.removeEventListener(type,fun)
}else{
ele.detachEvent('on'+type,fun)
}
}
8、阻止事件传递
function stopBBle(e){
if(e.stopPropagation){
e.stopPropagation()
}else{
e.cancelBubble=true
}
}
9、阻止默认事件执行
if(e.preventDefault){
e.preventDefault
}else{
e.returnValue=false
}
10、ajax对象
let xhr;
try{
//普通路蓝旗
xhr=new XMLHttpRequest()
}catch(e){
//兼容IE低版本
xhr=new ActiveXObject('Microsoft.XMLHTTP')
}
xhr.open('post','url')
xhr.setRequestHeader('content-type','application/x-www/form-url-encoded')
xhr.send('name=111&age=222')
//标准浏览器
xhr.onload = function(){}
//兼容性写法
xhr.onreadystatechange=function(){
if(xhr.readystate==4){
let reg=/^a\d{2}$/
if(res.test(xhr.status)){
console.lof(json.parse(xhr.response))
}
}
}
兼容性写法,封装工具
生成验证码函数
function mySetVc() {
var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXUZ';
var newStr = '';
for (var i = 1; i <= 6; i++) {
var num = parseInt(Math.random() * str.length)
if (newStr.indexOf(str[num]) === -1) {
newStr += str[num];
} else {
i--;
}
}
return newStr;
}
获取地址栏数据信息
function getUrlVal() {
// 1,获取地址栏参数字符串
let str = decodeURI(window.location.search).substr(1);
// 创建存储结果的对象
let obj = {};
// 2 转化为数组 根据 分号空格转化
const arr1 = str.split('&')
// 3 循环变量数组,将数据字符串,根据=等号分割为数组
arr1.forEach(v => {
let arr2 = v.split('=');
obj[arr2[0]] = arr2[1];
})
return obj;
}
生成table表格函数
// 参数1:数组,需要参照的数据数组
// 参数2:标签,需要写入内容的标签对象
function mySetTable(array, element) {
var str = '';
array.forEach(function (v, k) {
str += '<tr>';
for (var key in v) {
str += `<td>${v[key]}</td>`;
}
str += `<td><button index="${k}">删除</button></td>`
str += '</tr>';
});
element.innerHTML = str;
var oBtns = document.querySelectorAll('button');
mySetButton(oBtns, array, element);
}
给button按钮绑定删除效果函数
// 参数1,button按钮数组
// 参数2,数据数组
// 参数3,写入内容的标签对象
function mySetButton(BtnArray, array, element) {
BtnArray.forEach(function (v) {
v.onclick = function () {
var bool = window.confirm('确定,是否删除');
if (bool) {
var index = v.getAttribute('index');
array.splice(index, 1);
mySetTable(array, element);
}
}
})
}
处理监听事件兼容性函数
// 参数1:需要绑定事件的标签对象
// 参数2:需要绑定的事件类型,没有on
// 参数3:需要绑定的事件处理函数
function myAddEvent(element, type, fun) {
if (element.addEventListener) {
// 普通浏览器
element.addEventListener(type, fun);
} else {
// 低版本IE浏览器
element.attachEvent('on' + type, fun);
}
}
获取css样式函数
// 参数1,需要属性的标签对象
// 参数2,需要属性的属性名称
function myGetStyle(element, type) {
if (window.getComputedStyle) {
return window.getComputedStyle(element)[type];
} else {
return element.currentStyle[type];
}
}
设定 cookie 函数
// 参数1: cookie 的键名
// 参数2: cookie 的键值
// 参数3: cookie 的时效(秒数)
function mySetCookie(key, value, time) {
// 1,获取当前的时间对象
const nowTime = new Date();
// 2,获取当前时间的时间戳 --- 单位是毫秒
let timeStamp = nowTime.getTime();
// 3,计算时间戳 当前时间戳 - 8小时 + 时效的时间(秒)
// 获取带有时效的时间戳 是世界标准时间
let newTimeStamp = timeStamp - 8 * 60 * 60 * 1000 + time * 1000;
// 4,将时间戳设定回时间对象
nowTime.setTime(newTimeStamp);
// 5,兼容没有传第三个参数的情况
// 如果 time 是 undefined ,证明没有第三个参数,执行会话时效,赋值空字符串
// 如果 time 不是 undefined ,证明没有第三个参数,执行 nowTime 时间对象中的时间戳时效
let endTime = time === undefined ? '' : nowTime;
// 6,设定cookie
// 给cookie多设定一个属性,path=/
// 让www中的所有文件都可以使用设定的cookie
document.cookie = `${key}=${value};expires=${endTime};path=/`;
}
获取 cookie 的具体数据
function myGetCookie() {
// 创建存储结果的对象
let obj = {};
// 1 获取cookie字符串
let str = document.cookie;
// 2 转化为数组 根据 分号空格转化
const arr1 = str.split('; ')
// 3 循环变量数组,将数据字符串,根据=等号分割为数组
arr1.forEach(v => {
let arr2 = v.split('=');
obj[arr2[0]] = arr2[1];
})
return obj;
}
function fun(){
console.log('我是新建的js文件中的内容,你压缩我了吗?')
}