BOM对象与DOM对象

最新推荐文章于 2024-04-24 09:27:42 发布

John_Wick___

最新推荐文章于 2024-04-24 09:27:42 发布

阅读量594

点赞数 4

文章标签： html

本文链接：https://blog.csdn.net/John_Wick___/article/details/118166850

版权

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则为窗口发生变化时触发

John_Wick___

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
BOM对象与DOM对象

BOM对象与DOM对象一、BOM的概念：浏览器对象模型(包括：地址栏、历史记录、屏幕、滚动条，关闭。) *windows：为BOM的顶级对象 windows的5个子对象： 1、document：文档对象 2、history：历史记录对象 3、location：地址栏对象 4、screen：屏幕对
复制链接

扫一扫