BOM: browser object model 浏览器对象模型,提供了一系列操作浏览器的方法
BOM:核心对象,顶级对象叫window
对象的方法:
window. 可以省去
window.alert('弹出框')
window.prompt('输入框')
返回值: 输入的内容
window.confirm('输入框'):
返回值:点击确定返回true, 点击取消,返回false
window.open("网址"): 一般会点击按钮,打开网址
window.close()
var 定时器的名字 = window.setInterval(函数,毫秒) 开启间隙性定时器
window.clearInterval(定时器的名字) 关闭间隙性定时器
var timer = setInterval(function(){},1000)
window.clearInterval(timer)
过了几秒后弹出一次
超时定时器: window.setTimeOut(函数,毫秒) 开启超时定时器
超时定时器: window.clearTimeOut(函数,毫秒) 关闭超时定时
var flag = window.confirm('亲,你确定要删除吗?')
console.log(flag);
if (flag == true) {
执行删除操作
}
var num= prompt('')
console.log(num);
获取元素:
var oOpen = doc
history:window的子对象,浏览器历史记录的一个对象
history.go(1)/history.forward(): 前进一个页面
history.go(-1)/history.back(): 后退一个页面
history.go(0): 刷新当前页面
在history中演示
window的子对象:localtion对象
localtion.reload(): 刷新
localtion.href = "网址" 跳转页面
DOM:文档对象模型:document object model
DOM提供了一套操作文档(页面)的api
1、获取页面元素
常规元素:
语法1: document.getElementById('box') 只能找到一个
语法2: document.getElementsByTagName('div') 获取的是所有标签名叫div (获取的是一组数据,伪数组)
document.getElementsByTagName('div')[0] 获取的是所有div的第一个
语法3:
document.getElementsByClassName('box')获取的是所有类名叫box的(获取的是一组数据,伪数组)
document.getElementsByClassName('box')[0] 获取的是所有div的第一个
语法4:
document.getElementsByName('text') 获取的是所有name值叫text的 ( 获取的是一组数据,伪数组)
获取页面中所有name值叫text的元素
document.getElementsByName('text')[0] 获取页面中所有name值叫text的第一个元素
语法5:
通过选择器( .box #box ul>li)来获取页面元素
document.querySelector('.box') 获取页面中类名叫box的第一个
document.querySelectorAll('.box') 获取页面中所有类名叫box的元素
非常规的:
document.documentElement ---》获取html标签
document.body ---》获取body标签
document.title ---》获取title标签
document.head ---》获取head标签
2、 操作页面元素
2.1 操作元素的内容
支持标签
获取元素的内容:对象(获取的元素).innerHTML
设置元素的内容:对象(获取的元素).innerHTML =
不支持标签
获取元素的内容:对象(获取的元素).innerText
设置元素的内容:对象(获取的元素).innerText =
针对于表单控件:
获取元素的内容:对象(获取的元素).value
设置元素的内容:对象(获取的元素).value =
不常用:<div>张三</div>
获取元素的内容:对象(获取的元素).outerHTML 标签的内容+标签本身(是一个字符串形式) <div>张三</div>
设置元素的内容:对象(获取的元素).outerHTML =
2.2 操作元素的样式
设置样式: 对象(获取的元素).style.属性名=属性值 获取样式:对象(获取的元素).style.属性名 (没啥用)
对象(获取的元素).className = '类名'
对象(获取的元素).classList.add('类名')
对象(获取的元素).classList.remove('类名')
2.3 操作元素的属性:
<div id='' xx='' class='' aa=''></div>
<img src='' y=''>
属性分为固有属性(元素自身携带的属性)和自定义属性(aa,xx,y)
自定义属性的设置和修改 <div></div>
设置自定义属性:
对象(获取的元素).setAttribute('属性名','属性值')
获取
对象(获取的元素).getAttribute('属性名')
删除
对象(获取的元素).removeAttribute('属性名')
<div index="1" id="box" class='box'></div>
<img src=''>
<input type='text' value='neir'>
设置(修改)固有属性:
对象(获取的元素).属性名 = '属性值' oImg.src = '图片地址'
获取固有属性:
对象(获取的元素).属性名
oImg.src
oIpt.value
history:window的子对象,浏览器历史记录的一个对象
history.go(1)/history.forward(): 前进一个页面
history.go(-1)/history.back(): 后退一个页面
history.go(0): 刷新当前页面
在history中演示
window的子对象:localtion对象
localtion.reload(): 刷新
localtion.href = "网址" 跳转页面
var oBtn = document.getElementById('btn')
var oBtn1 = document.getElementById('btn1')
oBtn.onclick = function () {
location.reload();
}
oBtn1.onclick = function(){
location.href = "http://www.baidu.com"
}