BOM
【浏览器对象模型,即所用内容都在对象中操作】
浏览器的顶级对象:window;
其他指向window:this 、top;其中name是window中的属性,属性值为空字符串;
浏览器的尺寸
- innerHeight 可视窗口的高度(包括底边滚动条)
- innerWidth 可视窗口的宽度(包括侧边滚动条)
console.log(window.innerHeight);
console.log(window.innerWidth);
浏览器信息
【是浏览器存储浏览器信息的对象】
- navigator.appName 浏览器名称,html5的兼容问题;
- navigator.appVersion 浏览器版本;
- navigator.platform 浏览器平台操作系统;不正确
- navigator.userAgent 浏览器的整体信息;
console.log(navigator.appName);
console.log(navigator.appVersion);
console.log(navigator.platform);
console.log(navigator.userAgent);
弹出层
【浏览器弹出层,会中断程序】
- alert() 弹窗;点击确认后消失;
- confirm() 询问弹窗;确定返回true,取消返回false
- prompt() 提示输入弹窗; 输入内容确认 返回结果是输入的内容,没有输入确认 返回空字符串,点击取消 返回null
浏览器的地址栏信息
1、location.href 获取当前浏览器访问url完整地址
若url中有中文会被转为url编码字符(乱码); 也可赋值一个地址;
console.log(location.href); //获得当前浏览器的地址
//给location.href赋值一个地址,页面就跳转到该地址
btn.onclick = function(){
location.href = 'http://www.baidu.com'
}
2、location.reload() 页面重新重载, 不要写在全局中,否则会一直加载
btn.onclick = function(){
location.reload()
}
浏览器历史记录对象
history.back() //退回到历史记录的上一个页面
history.forward() //前进到历史记录的下一个页面
history.go(参数) //传正数,前进;传负数,后退
浏览器事件
1、页面加载事件,页面中所有的资源加载完毕后触发 onload
window.onload = function(){
console.log('页面加载完毕')
}
2、窗口改变事件,窗口大小改变触发 onresize
window.onresize = function(){
console.log('窗口大小发生改变')
}
3、浏览器滚动事件 ,滚动条变化触发 onscroll
window.onscroll = function(){
console.log('滚动条变化')
}
定时器
【都有返回值,返回值一个定时器的标识id】
1、间隔定时器:每间隔一段时间就执行一次函数
单位:毫秒;
//语法:setInterval(函数,时间)
var timerId = setInterval(function(){
console.log(666)
},1000)
2、倒计时定时器(爆炸定时器) 隔一段时间之后执行一次函数(函数最多执行一次)
单位:毫秒
//语法:setTimeout(函数,时间)
var timerId = setTimeout(function(){
console.log(999)
},1000)
3、关闭定时器
clearInterval(定时器id) 关闭间隔定时器;
clearTimeout(定时器id) 关闭倒计时定时器;
但,两个可以混用;
DOM操作
【Doument Object Model 文档对象模型;DOM中的顶级对象是document对象,document的上一级对象是window】
1、通过id值获取元素 document.getElementById('id值')
返回页面中的标签为对应id值得元素;若找不到则返回null;
//语法:document.getElementById(id值)
console.log(document.getElementById('id值'));
//若有对应的id值则返回该id对应的元素,没有则返回null
2、通过tagName获取元素 document.getElementsByTagName('标签名')
返回对应标签名的元素结合(伪数组);若找不到则返回空伪数组;
//语法:document.getElementsByTagName('标签名')
console.log(document.getElementsByTagName('标签名'));
//有对应标签名则得到伪数组;没有则返回空伪数组
//可将伪数组中的集合遍历出来
for(var i = 0;i<标签名.length;i++){
console.log(标签名[i])
}
3、通过className获取元素 document.getElementsByClassName('类名')
返回对应有该类名的元素集合(伪数组);没有则返回空伪数组;
//语法:document.getElementsByClassName('类名')
console.log(document.getElementsByClassName('类名'))
//返回有该类名的对应元素集合也叫伪数组;没有则返回空伪数组
4、通过name属性 获取元素 document.getElementsByName('name属性值')
返回对应有该类名的元素集合,是伪数组;若找不到则返回空伪数组;
//语法:document.getElementsByName('name属性值')
console.log(document.getElementsByName('name属性值'))
//找到则返回对应有该类名的元素集合(伪数组),没有则返回空伪数组
5、通过选择器获取元素
document.querySelector 只能获取到一个元素,且是页面中第一个满足条件的;
document.querySelectorAll 能获取到所有满足条件的元素,以伪数组形式返回;
//语法:document.querySelector('选择器')
//语法:document.querySelectorAll('选择器')
console.log(document.querySelector('#top'));
属性操作
1、获取设置元素的文本内容 innerText
设置元素的文本内容(覆盖式设置),不识别html
console.log(div.innerText); //打印出div标签的文本内容
div.innerText = '我是div标签'
//覆盖div中原有的文字内容,并在原位置输出我是div标签
div.innerText = '<div>我是div标签</div>'
//覆盖div中原有的文字内容,并在原位置输出<div>我是div标签</div>,不识别html标签
2、获取设置元素的超文本内容(包括html标签) innerHTML
设置元素的超文本内容(覆盖式设置),能识别html标签
console.log(div.innerHTML); //打印出带有html标签的超文本内容
div.innerHTML = '<h1>我是好标签</h1>'
//覆盖原本div文本内容,并识别html标签,在原文本位置输出覆盖的内容
div.innerHTML += '<h1>我是好标签</h1>'
//不覆盖原文本内容,在原内容上新增
3、样式属性操作—给元素添加css样式—添加的都是行内样式 style
样式名称,在css中用-连接单词的样式名称,在js中需要改为小驼峰写法;
//语法:元素.style.样式名称 = '值';
console.log(div.style); //打印出div的所有样式
div.style.backgroundClock = 'pink'
4、类名操作 className
//获取设置元素的类名 元素.className
console.log(box.className);
//设置元素的类名 元素.className = "类名" (覆盖式设置)
box.className = 'box'
//给元素添加类名
box.className += 'cls'
console.log(box)
5、获取元素的某个属性(包括自定义属性) getAttribute
//语法:元素.getAttribute('属性名') 所有属性都能获取
console.log(box.getAttribute('name'))
6、给元素设置属性(包括自定义属性) setAttribute
//语法:元素.setAttribute('属性名','属性值') 所有属性都能设置
box.setAttribute('id','box')
7、移除元素属性 removeAttribute
//语法:元素.removeAttribute('属性名')
box.removeAttribute('name')