BOM / DOM(上)
- 今天我们开始使用 js 去操作浏览器和页面中的 html 元素了
BOM
-
BOM(Browser Object Model):浏览器对象模型
-
其实就是操作浏览器的一些能力
-
我们可以操作哪些内容
1.获取一些浏览器的相关信息(窗口的大小) 2.操作浏览器进行页面跳转 3.获取当前浏览器地址栏信息 4.操作浏览器的滚动条 5.浏览器的信息(浏览器的版本) 6.让浏览器出现一个弹出框(alert/confirm/prompt)
-
BOM的核心就是 window 对象
-
window 是浏览器内置的一个对象,里面包含着操作浏览器的方法
获取浏览器窗口的尺寸
innerHeight
和innerWidth
- 这两个方法分别是用来获取浏览器窗口的宽度和高度(包含滚动条的)
var windowHeight = window.innerHeight
console.log(windowHeight)
var windowWidth = window.innerwidth
console.log(windowWidth)
浏览器的弹出层
alert
是在浏览器弹出一个提示框
window.alert('我是一个提示框')
1.这个弹出层只是一个提示内容,只有一个确定按钮
2. 点击确定按钮以后,这个提示框就消失了
confirm
是在浏览器弹出一个询问框
var boo = window.confirm('我是一个询问框')
console.log(boo)
- 这个弹出层有一个询问信息和两个按钮
- 当你点击确定的时候,就会得到 true
- 当你点击取消的时候,就会得到 false
prompt
是在浏览器弹出一个输入框
var str = window.prompt('请输入内容')
console.log(str)
- 这个弹出层有一个输入框和两个按钮
- 当你点击取消的时候,得到的是null
- 当你点击确定的时候得到的就是你输入的内容
浏览器的地址信息
- 在 window 中有一个对象叫做
location
- 就是专门用来存储浏览器的地址栏内的信息的
location.href
location.href
这个属性存储的是浏览器地址栏内 url 地址的信息
console.log(window.location.href)
- 会把中文编程url编码的格式
location.href
这个属性也可以给他赋值
window.location.href = './index.html'
//这个就会跳转页面到后面你给的那个地址
location.reload
location.reload()
这个方法会重新加载一遍页面,就相当于刷新是一个道理
window.location.reload()
注意:不要写在全局,不然浏览器就会一直处在刷新状态
浏览器的历史记录
- window 中有一个对象叫做
history
- 是专门用来存储立誓记录信息的
history.back
history.back
是用来回退历史记录的,就是回到前一个页面,就相当于浏览器上的 ⬅ 按钮
window.history.back()
前提是你要有上一条记录,不然就是一直在这个页面,也不会回退
history.forword
- hisory.forword是去到下一个历史记录里面,也就是去到下一个页面,就相当于浏览器上的➡ 按钮
window.history.forward()
前提是你要之前有过回退操作,不然的话你现在就是最后一个页面,没有下一个
定时器
- 在js 里面,有两种定时器,倒计时定时器 和 间隔定时器
倒计时定时器
- 倒计时多少时间以后执行函数
- 语法:
setTimeout(要执行的函数,多长时间以后执行)
- 会在你设定的时间以后,执行函数
var timerId = setTimeout(function(){
console.log('我执行了')
},1000)
console.log(timerId)// 1
1.时间是按照毫秒进行计算的,1000 毫秒就是 1秒钟
2.所以会在页面打开 1 秒钟以后执行函数
3.只执行一次,就不在执行了
4.返回值是,当前这个定时器是页面中的第几个定时器
间隔定时器
- 每隔多少时间就执行一次函数
- 语法:
setInterval(要执行的函数,间隔多少时间)
var timerId = setInterval(function () {
console.log('我执行了')
}, 1000)
1.时间和刚才一样,是按照毫秒进行计算的
2.每间隔 1 秒钟执行一次函数
3.只要不关闭,会一直执行
4.返回值是,当前这个定时器是页面中的第几个定时器
定时器的返回值
- 设置定时器的时候,他们的返回值是部分
setTimeout
和setInterval
的 - 只要有一个定时器,那么就是一个数字
var timerId = setTimeout(function(){
console.log('倒计时定时器')
}, 1000)
var timerId2 = setInterval(function(){
console.log('间隔定时器')
}, 1000)
console.log(rimerId)//1
console.log(timerId2)//2
关闭定时器
- 我们刚才提过一个 timerld,是表示这个定时器是页面上的第几个定时器
- 这个 timerId 就是用来关闭定时器的数字
- 我们有两个方法来关闭定时器
clearTimeout
和clearInterval
var timerId = setTimeout(function () {
console.log('倒计时定时器')
}, 1000)
clearTimeout(timerId)
关闭以后,定时器就不会在执行
var timerId2 = setInterval(function () {
console.log('间隔定时器')
}, 1000)
coearInterval(timerId2)
关闭以后,定时器就不会在执行了
- 原则上是
clearTimeout
关闭setTimeout
clearInterval
关闭setInterval
- 但是其实是可以通用的,他们可以混着使用
var timerId = setTimeout(function () {
console.log('倒计时定时器')
}, 1000)
// 关闭倒计时定时器
clearInterval(timerId)
var timerId2 = setInterval(function ()}
console.log('间隔定时器')
}, 1000)
// 关闭间隔定时器
clearTimeout(timerId2)
DOM(上)
-
DOM (Document Object Model) : 文档对象模型
-
其实就是操作 html 中的标签的一些能力
-
我们可以操作哪些内容
1.获取一个元素 2.移除一个元素 3.创建一个元素 4.向页面里面添加一个元素 5.给元素绑定一些事件 6.获取元素的属性 7.给元素添加一些 css 样式 8. ...
-
DOM 的核心对象就是 docuemnt 对象
-
document 对象是浏览器内置的一个对象,里面存储着专门用来操作元素的各种方法
-
DOM:页面中的标签,我们通过js获取到以后,就把这个对象叫做 DOM 对象
获取一个元素
- 通过 js 代码来获取页面中的标签
- 获取到以后我们就可以操作这些标签了
getElementById
getElementById
是通过标签的 id 名称来获取标签的- 因为在一个页面中 id 是唯一的,所以获取到的就是一个元素
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box')
console.log(box) // <div></div>
</script>
</body>
- 获取到的就是页面中的那个 id 为 box 的 div 标签
getElementsByClassName
getElementsByClassName
是用过标签的 class 名称来获取标签的- 因为页面中可能有多个元素的 class 名称一样,所以获取到的是一组元素
- 哪怕你获取的 class 只有一个,那也是获取一组元素,只不过这一组中只有一个 DOM 元素而已
<body>
<div calss="box"></div>
<script>
var box = document.getElementsByClassName('box')
console.log(box) // [<div></div>]
console.log(box[0]) // <div></div>
</script>
</body>
- 获取到的是一组元素,是一个长得和数组一样的数据结构,但是不是数组,是伪数组
- 这个一组数据也是按照索引排列的,所以我们想要准确的拿到这个 div,需要用索引来获取
getElementsByTagName
getElementsByTagName
是用过标签的 标签 名称来获取标签的- 因为页面中可能有多个元素的 标签 名称一样,所以获取到的是一组元素
- 哪怕真的只有一个这个标签名,那么也是获取一组元素,只不过这一组中只有一个 DOM 元素而已
<body>
<div></div>
<script>
var box = document.getElementsByTagName('div')
console.log(box) // [<div></div>]
console.log(box[0]) // <div></div>
</script>
</body>
- 和
getElementsByClassName
一样,获取到的是一个长得很像数组的元素 - 必须要用索引才能得到准确的 DOM 元素
querySelector
querySelector
是按照选择器的方式来获取元素- 也就是说,按照我们写 css 的时候的选择器来获取
- 这个方法只能获取到一个元素,并且是页面中第一个满足条件的元素
console.log(document.querySelector('div')) // 获取页面中的第一个 div 元素
console.log(docuemnt.querySelector('.box')) // 获取页面中第一个有 box 类名的元素
console.log(document.querySelector('#box')) // 获取页面中第一个 id 名为 box 的元 素
querySelectorAll
querySelectorAll
是按照选择器的方式来获取元素- 这个方法能获取到所有满足条件的元素,以一个伪数组的形式返回
console.log(document.querySelectorAll('div')) // 获取页面中的所有的 div 元素
console.log(docuemnt.querySelectorAll('.box')) // 获取页面中所有有 box 类名的元素
- 获取到的是一组数据,也是需要用索引来获取到准确的每一个 DOM 元素
操作属性
- 通过我们各种获取元素的方式获取到页面中的标签以后
- 我们可以直接操作 DOM 元素的属性,就能直接把效果展示在页面上
innerHTML
- 获取元素内部的 HTML 结构
<body>
<div>
<p>
<span>hello</span>
</p>
</div>
<script>
var div = document.querySelector('div')
console.log(div.innerHTML)
/*
<p>
<span>hello</span>
</p>
*/
</script>
</body>
- 设置元素的内容
<body>
<div></div>
<script>
var div = document.querySelector('div')
div.innerHTML = '<p>hello</p>'
</script>
</body>
- 设置完以后,页面中的 div 元素里面就会嵌套一个 p 元素
innerText
- 获取元素内部的文本(只能获取到文本内容,获取不到 html 标签)
<body>
<div>
<p>
<span>hello</span>
</p>
</div>
<script>
var div = document.querySelector('div')
console.log(div.innerText) // hello
</script>
</body>
- 可以设置元素内部的文本
<body>
<div></div>
<script>
var div = document.querySelector('div')
div.innerText = '<p>hello</p>'
</script>
</body>
- 设置完毕以后,会把
<p>hello</p>
当作一个文本出现在 div 元素里面,而不会把 p 解析成标签
getAttribute
- 获取元素的某个属性(包括自定义属性)
<body>
<div a="100" class="box"></div>
<script>
var div = document.querySelector('div')
console.log(div.getAttribute('a')) // 100
console.log(div.getAttribute('class')) // box
</script>
</body>
setAttribute
- 给元素设置一个属性(包括自定义属性)
<body>
<div></div>
<script>
var div = document.querySelector('div')
div.setAttribute('a', 100)
div.setAttribute('class', 'box')
console.log(div) // <div a="100" class="box"></div>
</script>
</body>
removeAttribute
- 直接移除元素的某个属性
<body>
<div a="100" class="box"></div>
<script>
var div = document.querySelector('div')
div.removeAttribute('class')
console.log(div) // <div a="100"></div>
</script>
</body>
style
- 专门用来给元素添加 css 样式的
- 添加的都是行内样式
<body>
<div></div>
<script>
var div = document.querySelector('div')
div.style.width = "100px"
div.style.height = "100px"
div.style.backgroundColor = "pink"
console.log(div)
// <div style="width: 100px; height: 100px; background-color: pink;">
</div>
</script>
</body>
- 页面中的 div 就会变成一个宽高都是100,背景颜色是粉色
className
- 专门用来操作元素的 类名的
<body>
<div class="box"></div>
<script>
var div = document.querySelector('div')
console.log(div.className) // box
</script>
</body>
- 也可以设置元素的类名,不过是全覆盖式的操作
<body>
<div class="box"></div>
<script>
var div = document.querySelector('div')
div.className = 'test'
console.log(div) // <div class="test"></div>
</script>
</body>
- 在设置的时候,不管之前有没有类名,都会全部被设置的值覆盖