BOM对象与DOM对象
一、BOM的概念:浏览器对象模型(包括:地址栏、历史记录、
屏幕、滚动条,关闭。)
*windows:为BOM的顶级对象
windows的5个子对象:
1、document:文档对象
2、history:历史记录对象
3、location:地址栏对象
4、screen:屏幕对象
5、navigtor:浏览器对象
BOM的内置对象: Arry(数组)、String(字符串)
Math(数)
document:文档对象
1、body 获取body的 console.log(document.body)
2、documentElement 获取html的 console.log(document
.documentElement)
screen: 屏幕对象
console.log(screen.width) console.log(screen.height)
history: 历史对象
console.log(history);
方法:back() 后退一个页面
forward() 前进一个页面
history.go(-1) 往后退
history.go(1) 往前进
location: 地址栏对象
host:主机、域名 host:“www.jd.com”
herf:地址栏信息
pathname:路径名
port:端口
方法:reload()刷新 window.location.reload() 刷新的意思
navigator: 浏览器县官信息对象
console.log(navifator)
(二)window相对的属性和方法
浏览器的可视宽度:document.body.clientWidth
window对象的属性:innerHeight(浏览器的高度,带滚动条)
innnerWidth(浏览器额宽度,带滚动条)
console.log(window.innerWidth)
等同于console.log(innerWidth)window可省略
获取元素的可视宽:console.log(window.body.clientwidth)
window的方法:
alert():弹出框,等价于window.alert()
confirm():确认框 带返回值,(返回值)点确定是ture,
取消是false
prompt():输入框 带返回值 返回输入的内容
*定时器一般给声明一个null比较方便
var timer =bull
timer=setInterval*
setInterval(回调函数,毫秒):设置间歇性定时器
clearInterval(定时器名称):删除间歇性定时器
setTimeout(回调函数,毫秒值):延迟性定时器(超时定时器)
clearTimeout(定时器名称):清除定时器
onload():当页面加载完毕执行
onscroll():页面滚动时会触发
onresize():页面窗口变化时触发
eg:window.οnresize=function(){console.log(11)}
二、DOM的概念
DOM:文档对象模型
一句话理解:先获取页面的元素,增删改查,改变样式等操作。
(一) 获取元素的4+2种办法:
@1:document.getElementById()通过id名查找元素 只能获取一个
@2:document.getElementByClassName()通过类名查找元素
//获取的是一组数据。类似于数组,但并不是数组,不能使用数组中的方法
eg:var oitems=document.getElementByClassName("item")
console.log(oitems);
console.log(oitems[0]);
console.log(oitems.length);
@3:通过标签名来获取元素:
document.getElementByTagName();
获取的也是一组数据,类似于数组,但并不是数组,是不能使用数组的方法
eg:var odivs=document.getElementByTagName("div");
console.log(odivs[1]);获取的是页面第二个div;
@4:通过表单的name属性来获取元素,获取的是多个
eg:var oipts=document.getElementByName("abs") ;
console.log(oipts[0]);
(二) 创建元素 creat
eg:var odiv=document.creatElementById("div") ;
//紧接着给div设置样式
odiv.style.width=" px" odiv.style.height=" px"
//给创建的div取类名,好在head里用<style>.box</style>给此div加样式
odiv.ClassName="box";
(三) 追加到页面
eg:document.body.appendChild.(odiv)
三、DOM操作元素
@1: 获取
比如页面有5个div依次排列;那么获取div时要带下标,可以精确获取到想用的div
eg: var odivs=document.getElementByTagName("div")[0]
@2: 设置样式;
odiv.style.width/height/color/backgroundColor/fontSize=?
顺便给div取类名 odiv.className=“box”
@3: 设置内容
innerHTML支持标签 :
odvs.innerHTML = '<a href="http://www.baidu.com">百度</a>'
像上面这个链接内容在获取到的div里显示就是一个可以点击的百度链接:“百度”
innerTEXT不支持标签 所以在获取到的div里显示一行代码
(一)DOM元素的删除
<body>
<div>
<p><input type="button" value="删除" onclick=“deal(this)”></p>
//this指代的是按钮本身,自己
</div>
</body>
//为了能够确定删除的元素,需要在点击函数参数位置写一个参数
function deal(this){
obj.remove()
obj.parentNode //找到按钮的父元素
obj.parentNode.remove();//删除的是P标签
obj.parentNode.parentNode();//删除的是div
}
*属性怎么切换删除和隐藏
<style>
.show_hide{width="100px";height="100px"}
</style>
<input type="buttom" value="出现" onclick=“show()”>
<input type="buttom" value="隐藏" onclick=“hide()”>
<div></div>
<script>
//先获取
var odiv=document.getElementById(“div”);//通过querySelector也可以
//点击出现
function show(){
//点击出现按钮 赋值类名则div会在页面中显示
odiv.ClassName="show_hide"
}
function hide(){
//设置类名为空则div隐藏
odiv.ClassName=""
}
</script>
*小知识点1(页面的跳转)
<p>页面1<p>
<a href=“02.html”>跳转的页面2</a>
<p>页面2</p>
<a herf="03.html">跳转到页面3</a>
*在中间页面添加前进后退按钮实现从页面2到页面1、从页面2到页面3.
<button oncilck="qianjin()">前进</botton>
<button oncilck="houtui()">后退</botton>
<script>
function qianijn(){
//history.forward()
history.go(1)
}
function houtui(){
//通过历史记录返回上个页面
//history.back()
history.go(-1)
}
*可以试着输出一下console.log(history.length)
</script>
<p>页面3</p>
*小知识点2(获取页面滚动距离)
(一)、获取页面滚动出去的高
window.οnscrοll=function(){
var otop=document.body.scrollTop||document.documentElement。scrollTop
console.log(otop)
}
//把scroll改为resize则为窗口发生变化时触发