【JavaScript】学习第十天(BOM、DOM)
2021/12/10 22:20:17
本文主要是介绍【JavaScript】学习第十天(BOM、DOM),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
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>
- 在设置的时候,不管之前有没有类名,都会全部被设置的值覆盖
这篇关于【JavaScript】学习第十天(BOM、DOM)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-21订单系统资料入门教程:轻松管理你的订单
- 2024-09-21Java部署资料:新手入门教程
- 2024-09-21Java部署资料:新手入门教程
- 2024-09-21Java订单系统资料:新手入门教程与实战指南
- 2024-09-21Java管理系统资料入门教程
- 2024-09-21从零开始学习Java监控系统资料
- 2024-09-21Java就业项目资料:新手入门的必备教程
- 2024-09-21Java全端资料:初学者指南
- 2024-09-21Java全栈资料入门教程及资源汇总
- 2024-09-21Java日志系统资料入门教程