08-BOM&DOM概念

echozzi

已于 2022-11-08 19:42:22 修改

阅读量326

点赞数

分类专栏： JavaScript基础文章标签： javascript 前端

于 2022-11-05 09:20:09 首次发布

本文链接：https://blog.csdn.net/qq_41570386/article/details/127699710

版权

JavaScript基础专栏收录该内容

19 篇文章 0 订阅

订阅专栏

文章目录

一、BOM的概念和方法

在这里插入图片描述

js基础语法部分，是ECMAScript部分
基础语法只是规定代码怎么写，不能实现很多主流的操作，比如跳转页面，获取浏览器的尺寸等操作
BOM操作浏览器，DOM操作HTML标签

1. BOM的概念

Browser Object Model 浏览器对象模型，提供了一套方法操作浏览器
BOM中最大的对象叫window，是浏览器窗口对象，包含了很多浏览器的操作

在这里插入图片描述

2. 浏览器窗口尺寸

包含滚动条的大小

window.innerWidth 浏览器窗口的宽度
window.innerHeight 浏览器窗口的高度

console.log(innerWidth,innerHeight)

浏览器对象的window都是可以省略的
获取到浏览器窗口的大小单位是像素，但单位是不显示的
浏览器窗口尺寸大小只能读取，不能修改

不含滚动条的大小

document.documentElement.clientWidth 浏览器窗口的宽度
document.documentElement.clientHeight 浏览器窗口的高度

console.log(document.documentElement.clientWidth,document.documentElement.clientHidth)

3. 浏览器的地址栏信息

window下面有个对象location可以查看浏览器的地址栏信息，记录了浏览器地址栏中的相关信息：

console.log(window.location)

location下面使用相对应方法：

打开当前页面会自动跳转到设置的新地址

window.location.href = '跳转的地址'

// 条件判断，满足即跳转
var age = Number(prompt("输入年龄"))
if(age>=18){
    //跳转页面
    location.href='test1.html'
}
else{
    alert("异常")
}

参数可选，当前页面会一直处于加载状态中（不要写在全局中）

window.location.reload(true)

查询地址中的携带参数

window.location.search

<body>
    <form action="">
        <p>name: <input type="text" name="name"></p>
        <input type="submit">
    </form>
</body>
<script>
console.log(location.search)
</script>

4. 浏览器历史记录

history.back() 返回到上一个页面，相当于浏览器的后退按钮

history.forward() 前进到下一个页面（下一个页面必须是点击以后的页面），相当于浏览器的前进按钮

history.go(数值) 正负数都可以（前进和后退的页面数量）

5. 浏览器版本信息

浏览器的名称、版本等信息，关于浏览器的信息，window下面的对象navigator记录

console.log(navigator.appCodeName)//返回浏览器的代码名
console.log(navigator.appName)//返回浏览器的名称
console.log(navigator.appVersion)//返回浏览器的平台和版本信息
console.log(navigator.cookieEnabled)//返回指明浏览器是否启用cookie的布尔值
console.log(navigator.platform)//返回浏览器的操作系统平台
console.log(navigator.userAgent)//返回由客户机发送服务器的user-agent头部的值

6. 浏览器弹窗方法

alert("警告弹窗")
confirm("提示弹窗")
prompt("输入弹窗")

7. 浏览器事件

onload 当页面中所有内容加载完成之后再去执行

window.onload = function(){
    console.log("页面加载结束后出现")
}

onscroll 浏览器滚动条发生滚动的时候会触发事件

var a = 1
window.onscroll = function(){
    console.log('a是'+ a++)
}

onresize 浏览器窗口变化的时候触发事件

var b = 1
window.onresize = function(){
    console.log('b是'+ b++)
}

8. 浏览器滚动条方法

window.scrollTo(x,y) 跳转到坐标位置

function scrollWindow(){
    window.scrollTo(0,200);
}
scrollWindow()//可以给按钮进行绑定，点击跳转到相应的坐标位置

document.documentElement.scrollTop 距离顶部的距离

document.documentElement.scrollLeft 距离左侧的距离

window.onscroll = function(){
    var _top = document.documentElement.scrollTop
    var _left = document.documentElement.scrollLeft
    console.log('距离顶部的间距是'+_top,'距离左侧的间距是'+_left)
}

需要注意获取滚动条间距是否有兼容问题

document.documentElement.scrollTop || document.body

document.documentElement.scrollLeft || document.body.scrollLeft

案例：电商页面的顶部悬浮和回到顶部

9. 浏览器对象方法

window.open() 打开

function _open(){
    window.open("http:www.baidu.com")
}
_open() // 绑定给按钮执行

window.close() 关闭

function _open(){
    myWindow = window.open("http:www.baidu.com")
}
function _close(){
    myWindow.close();
}

<input type="button" value="打开窗口" onclick="_open()">
<input type="button" value="关闭窗口" onclick="_close()">

二、DOM的概念和元素获取

DOM：Document Object Model，文档对象模型。主要用于操作html文档。例如，改变标签的背景颜色，让标签移动产生动画。

DOM元素的获取：通过一些方法获取到DOM结构，输出到控制台中就是当前标签，可以对当前标签做一些绑定事件

1. 通过id名直接获取到元素（最简单但有问题，不建议使用）

控制台输出出现[Object Object]表示当前数据格式有问题

<div id="box">盒子</div>
<script>console.log(box) //div结构</script>

2. 通过document获取节点

<div class="box">1</div>
<div id="box">2</div>
<div name="box">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>

根据标签中的id属性进行获取：document.getElementById('id的名字')
```
var div1 = document.getElementById("box")
console.log(div1[0])
```

根据标签中的类名进行获取：document.getElementsByClassName('class的名字')

var div2 = document.getElementsByClassName("box")
console.log(di2[0]) //获取到的是集合

根据标签名称进行获取：document.getElementsByTagName('标签名称')

var div3 = document.getElementsByTagName("div")
console.log(div3[0]) //获取到的是集合

根据标签中的name属性进行获取：document.getElementsByName('name名字')
```
var div4 = document.getElementsByName('box')
console.log(div4)
```

只有id的是getElement，获取到的不是集合，其他的都是getElements。因为id唯一。

3. 使用css选择器获取元素

低版本浏览器中不可以使用这个方法

获取到匹配css的第一个元素 document.querySelector('css选择器')

document.querySelector('.box')
var _div = document.querySelector('div:nth-child(1)')
console.log(_div)
var _p = document.querySelector('p:nth-of-type(2)')
console.log(_p)

获取到匹配css的所有元素document.querySelectorAll('css选择器')

echozzi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
08-BOM&DOM概念

例如，改变标签的背景颜色，让标签移动产生动画。DOM元素的获取：通过一些方法获取到DOM结构，输出到控制台中就是当前标签，可以对当前标签做一些绑定事件。只有id的是getElement，获取到的不是集合，其他的都是getElements。浏览器的名称、版本等信息，关于浏览器的信息，window下面的对象navigator记录。前进到下一个页面（下一个页面必须是点击以后的页面），相当于浏览器的前进按钮。参数可选，当前页面会一直处于加载状态中（不要写在全局中）返回到上一个页面，相当于浏览器的后退按钮。
复制链接

扫一扫