定时器、BOM、DOM

最新推荐文章于 2024-03-28 23:55:28 发布

skt__

最新推荐文章于 2024-03-28 23:55:28 发布

阅读量205

点赞数 1

分类专栏： JAVASCRIPT 文章标签： javascript

本文链接：https://blog.csdn.net/skt__/article/details/119809298

版权

JAVASCRIPT 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

定时器

JS提供的两种异步定时器机制

异步机制代码：在同步机制代码执行后执行的

返回值：不区分定时器类型，表示你是页面中的第几个定时器，number数据类型

返回值的作用：关闭定时器

setTimeout()

语法：setTimeout(函数，时间)

说明：在一段时间后，执行一次函数代码 /延迟定时器

setInterval()

语法：setInterval(函数，时间)

说明：每隔一段时间，执行函数代码 /间隔定时器

关闭定时器方法

clearInterval()

语法：clearInterval(要关闭的定时器的返回值)
clearTimeout()

语法：clearTimeout(要关闭的定时器的返回值)

BOM（浏览器对象模型）

浏览器顶级对象：window

全局中this、top都指向window

window中默认有name属性，属性值为空的字符串

浏览器尺寸

innerWidth、innerHeight : 获取浏览器可视窗口宽高（含滚动条）

弹出层

alert()：提示弹框没有返回值

confirm(): 询问弹窗确定返回true，取消返回false

prompt(): 提示输入弹窗取消返回null，输入并确认返回输入内容

浏览器地址信息

loaction 对象时浏览器用来存储地址信息的

会将地址中的中文转为url编码格式

location.href（属性）

获取浏览器地址栏内的url地址

可以给他赋值个地址，打开页面就会跳转
location,reload()（方法）

刷新浏览器，当在全局中使用时，浏览器会一直刷新

拓展属性：
1. location.host：访问主机地址
2. search：浏览器（?后面的内容）
3. hash：地址中（#后面的内容）

浏览器历史记录

window中的history对象，用作储存浏览器历史记录

history里面的length属性为1的话就是只有一个当前的页面

history.back()

返回上一个页面，前提要有上一个页面的记录，否则不会回退
history.forword()

进入下一个页面，前提之前要有回退操作，否则就不会进行前进操作
history.go()

回到指定位置的页面

浏览器滚动距离

scrollTop

获取的是页面向上滚动的距离

一共有两种获取方式

document.body.scrollTop             //1
document.documentElement.scrollTop  //2
//区别：有兼容性问题
//声明<!DOCTYPE html>时，第一种不能用

scrollLeft

获取页面向左滚动的距离

两种获取方式

document.body.scrollLeft        //1
document.documentElementLeft    //2
//区别：有兼容性问题
//声明<!DOCTYPE html>时，第一种不能用

浏览器的onscroll事件

在浏览器中鼠标滚轮滚动时触发的事件

window.onscroll = function () { alert ( '滚动了' ) }

DOM（文档对象模型）

document 是 DOM中的顶级对象模型上一级是window对象

作用：获取一个元素、移除一个元素、创建一个元素、向页面里面添加一个元素、给元素绑定一些事件、获取元素的属性、给元素添加一些 css 样式

获取标签元素的方法

伪数组不能使用数组方法

通过id获取

语法：document.getElementById(标签的id值)

返回值：对应的标签元素、没有对应id值则返回null
通过类名获取（class）

语法：document.getElementsByClassName(类名class)

返回值：对应类名的标签组成的伪数组、没有对应的类型则返回空的伪数组
通过标签名获取

语法：document.getElementsByTagName(标签名)

返回值：对应标签组成的伪数组，没有则返回空伪数组
通过选择器获取

语法：document.querySelector(选择器)

返回值：返回选择器匹配的第一个元素，没有则null
通过选择器获取

语法：document.querySelectorAll(选择器)

返回值：返回选择器匹配的所以元素，没有则null

操作属性

通过获取标签元素之后就可以操作DOM元素的属性，把想要的效果渲染在页面

名称	操作	作用
innerHTML	标签名.innerHTML=''	设置HTML内部结构	识别HTML标签
innerText	标签名.innerText=‘’	设置标签文本	不识别HTML标签
getAttribute	getAttribute(属性名)	获取元素属性值
setAttribute	setAttribute(属性名，属性值)	给元素添加属性
removeAttirbute	removeAttirbute(属性名)	移除某个属性
style	获取的标签.style.属性='属性值'	给元素添加CSS样式
className	获取的标签.className	设置标签的类名	覆盖

skt__

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
定时器、BOM、DOM

定时器JS提供的两种异步定时器机制异步机制代码：在同步机制代码执行后执行的返回值：不区分定时器类型，表示你是页面中的第几个定时器，number数据类型返回值的作用：关闭定时器setTimeout()语法：setTimeout(函数，时间)说明：在一段时间后，执行一次函数代码 /延迟定时器setInterval()语法：setInterval(函数，时间)说明：每隔一段时间，执行函数代码 /间隔定时器关闭定时器方法 clearInterval() 语法：c
复制链接

扫一扫