DOM窗口相关数据、操作 & BOM操作

最新推荐文章于 2024-09-19 00:17:27 发布
最新推荐文章于 2024-09-19 00:17:27 发布
阅读量333 收藏 1
点赞数 2
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56668869/article/details/125953027
版权

一、窗口相关数据和操作

（一）让窗口滚动到指定位置

   1.滚到指定坐标：前提是页面够长 要能滚

  • window.scrollTo(x,y)：滚动到指定位置
  • scrollBy(x,y)：在之前滚动的数据基础上做累加（每次滚动一定范围）

   2.滚动到指定元素可见区域：

  • el.scrollIntoView(true)：调用元素的底部会尽量与视口的顶部齐平
  • 若传递参数为true，将元素和视口的上边缘对齐 出现在body顶部
  • 若传递参数为false，将元素的下边缘和视口的下边缘对齐  出现在body底部

   3.页面滚动的距离：

window.pageXOffset/window.pageYOffset   //bom操作，IE8及IE8以下不兼容
document.body.scrollLeft/scrollTop 
document.documentElement.scrollLeft/scrollTop
//兼容做法:
let sX=window.pageYOffset||document.body.scrollLeft || document.documentElement.scrollLeft
let sY=window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop

（二）窗口的可视区域尺寸

  1.查看视口的尺寸（受窗口缩放影响）：

//标准模式下(<!DOCTYPE html>，渲染模式) 任意浏览器都兼容
document.documentElement.clientWidth
document.documentElement.clientHeight
//bom操作，IE8及IE8以下不兼容
window.innerWidth
window.innerHeight
//适用于混杂模式下的浏览器
document.body.clientWidth
document.body.clientHeight
//可区分标准模式与否(BackCompat：标准兼容模式关闭。CSS1Compat：标准兼容模式开启)
document.compatMode
//判断是否是ie浏览器
console.log(window.navigator.appVersion.toLocaleLowerCase().indexOf("msie")

  2.兼容做法： 

let cWidth,cHeight;
if (document.compatMode == "BackCompat") {
        cWidth = window.innerWidth||document.body.clientWidth;
        cHeight =window.innerHeight||document.body.clientHeight;
} else {
        //document.compatMode == "CSS1Compat"
        cWidth = window.innerWidth||document.documentElement.clientWidth;
        cHeight = window.innerHeight||document.documentElement.clientHeight;
}

（三）元素的几何尺寸

  1.获取元素的几何尺寸：(元素隐藏状态下获取不到相关信息)

  •  el.getBoundingClientRect()：
  • 该方法返回一个对象 对象里边有 left,top,right,bottom,height,width属性
  • ​ left 和 top 代表该元素左上角的 X 和 Y 坐标
  • right 和 bottom 代表元素右下角的 X和 Y 坐标 ​
  • 返回的对象里边还有属性x,y，表示元素左顶点相对于页面 body 左顶点的距离
  • ​ height和 width属性老版本的IE并未实现 ​

注：getBoundingClientRect().width=不能设置  是错误的，因为对象里面没有单位 只能获取 要设置必须用style属性

  2.获取视觉宽高：

  • el.offsetWidth
  • el.offsetHeight ​
  • 可完全替代getBoundingClientRect()方法 

二、BOM操作

（一）概念

BOM 是Browser object model 浏览器对象模型 ==>把浏览器功能封装到了window中  --缺乏标准 但是所有浏览器厂商制作的这个API的功能基本类似都支持

DOM 是Document object model 文档对象模型 ==>把文档的功能封装到了document中 --是W3C的标准模型

（二）window

  1.window对象

  • 是BOM的顶层(核心)对象 所有对象(也称为window的子对象)都是通过它延伸出来的
  • 由于window是顶层对象故调用它的子对象时可以不显示的指明
window.document.write("我是window对象")
//===>等价于
document.write("我也是window对象")

  2.window的属性

  • closed            返回窗口是否已被关闭
  • document       对 Document 对象的只读引用
  • history            对 History 对象的只读引用
  • innerHeight    返回窗口的文档显示区的高度
  • innerWidth     返回窗口的文档显示区的宽度
  • outerHeight    返回窗口的外部高度，包含工具条与滚动条
  • outerWidth     返回窗口的外部宽度，包含工具条与滚动条
  • screenLeft     返回相对于屏幕窗口的x坐标
  • screenTop     返回相对于屏幕窗口的y坐标
  • screenX        返回相对于屏幕窗口的x坐标
  • screenY        返回相对于屏幕窗口的y坐标
  • location         用于窗口或框架的 Location 对象
  • navigator       对 Navigator 对象的只读引用
  • onload           指定所有配置都加载完成时(图片例外)调用的函数.
  • pageXOffset 返回当前页面相对于窗口显示区左上角的 X 位置(body横向滚动的距离)
  • pageYOffset 返回当前页面相对于窗口显示区左上角的 Y 位置(body纵向滚动的距离)
  • screen           对 Screen 对象的只读引用

  3.window的方法

  • alert()  显示带有一段消息和一个确认按钮的警告框
  • close()  关闭浏览器窗口
  • confirm()   显示带有一段消息以及确认按钮和取消按钮的对话框
  • open(url,打开方式,新窗口配置,BOOL)  打开一个新的浏览器窗口
  • print()  打印当前窗口的内容
  • prompt(tishi,value)  显示可提示用户输入的对话框
  • scrollBy()  按照指定的像素值来滚动内容(前提是你的有滚动条:内容够多)
  • scrollTo()  把内容滚动到指定的坐标。(前提是你的有滚动条:内容够多)
  • setInterval(callback,times)   按照指定的周期（以毫秒计）来调用函数
  • setTimeout(callback,times) 在指定的毫秒数后调用函数
  • clearInterval()   取消由 setInterval() 设置的 timeout
  • clearTimeout() 取消由 setTimeout() 方法设置的 timeout

  4.navigator

   属性:

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

 5.screen

  属性:

  • availHeight 返回屏幕的高度（不包括Windows任务栏）
  • availWidth  返回屏幕的宽度（不包括Windows任务栏）
  • height   返回屏幕的总高度
  • width 返回屏幕的总宽度
  • pixelDepth  返回屏幕的颜色分辨率（每象素的位数）

 6.history

  属性:

  • length        返回访问历史列表中的网址数
  • back()        加载 history 列表中的前一个 URL
  • forward()    加载 history 列表中的下一个 URL
  • go(number|url)   加载 history列表中的某个具体页面（负数后退,正数前进）

 7.location（当前页面的url）   

  属性:

  • hash   返回一个URL的锚部分
  • host  返回一个URL的主机名和端口
  • hostname 返回URL的主机名
  • href  返回完整的URL
  • pathname 返回的URL路径名。
  • port  返回一个URL服务器使用的端口号
  • protocol 返回一个URL协议
  • search   返回一个URL的查询部分

   方法:

  • assign(url)    载入一个新的文档
  • reload()         重新载入当前文档
  • replace(url)   用新的文档替换当前文档
哈哈ha~
关注
数据类型、DOM、BOM
m0_46201565的博客
07-06 805
数据类型、BOM、DOM
BOM与DOM操作
Eiji的博客
02-14 339
文章目录BOM与DOM操作1.BOM操作 BOM与DOM操作 BOM 浏览器对象模型>>>:使用js操作浏览器 DOM 文档对象模型>>>：使用js操作前端页面 1.BOM操作 window.open() 打开新窗口 window.close() 关闭当前窗口 history.forward() 前进一页 history.back() 后退一页 location.href() 获取URL location.href='URL' 跳转刀片指
DOM窗口操作
在风雨中奔跑
11-04 1026
a1.html a.html 客户id: 客户名称 /** * * vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures]) * */ functi
DOM所有的命令(CMD)
aaulbyf330132的博客
05-22 563
刚接触电脑的时候是从DOS系统开始，DOS时代根本就没有Windows这样的视窗操作界面，只有一个黑漆漆的窗口，让你输入命令。所以学DOS系统操作，cmd命令提示符是不可或缺的。可以告诉大家，大多数的程序员牛人或计算机专家在DOS系统下的操作是非常了得的，所以菜鸟要想成为计算机高手，DOS命令是非学不可。　　直到今天的Windows系统，还是离...
XML 学习 （7）
weixin_30432179的博客
09-15 129
XML技术系列讲座（7）通过DOM操作数据（上） １、DOM树 所有类型的XML解析器都要求处理对象是“格式良好”的XML文档，有些还能根据DTD或XML Schema进行有效性验证，DOM（Document Object Model）解析器将XML文档一次性解析，生成一个位于内存中的对象树用以描述该文档。 DO...
DOM数据解析
weixin_34221775的博客
03-03 931
//DOM : Document Object Model ,一种XML解析的方式,先读取整篇的内容,然后再进行解析,解析速度比较快,如果内出现错误,解析就会失败,iOS不支持DOM解析,goole提供了一个DOM解析的类库(GDataXMLNode) //注: 使用GDataXMLNode,需要进行2步设置,详情见GDataXMLNode.h 第30行 (1) ...
JavaScript基础&BOM，学习Java第42天
07-31
BOM是浏览器特有的特性，它允许开发者访问和操作浏览器窗口，包括创建、移动、关闭窗口以及处理cookies等。BOM提供了如window对象，用于获取浏览器窗口信息，navigator对象，用于获取浏览器信息，以及screen对象，...
js学习资源(js基础、BOM和DOM操作)
03-08
在"js学习资源(js基础、BOM和DOM操作)"这个主题中，我们主要探讨JavaScript的基础知识，包括变量、数据类型、控制流程、函数等基本概念，以及如何使用JavaScript来操作浏览器对象模型（BOM）和文档对象模型（DOM）。...
关于JavaScript BOM&DOM&Ajax
Aowu_Y_y的博客
08-31 476
JavaScript基础及其BOM 1.JavaScript简介 1.1.JavaScript是一种解释性脚本语言（代码不进行预编译），由浏览器解释执行，用来向页面添加交互行为； 1.2.Java Script由三个主要组成部分：ECMAScript（核心），BOM（浏览器对象模型），DOM（文档对象模型）； （1）核心（ECMAScript）：这一部分主要是js的基本语法。 （2）BOM：Brower Object Model（浏览器对象模型），主要是获取浏览器信息或操作浏览器的，例如：浏览器的前进与后退
javascript-DOM&BOM
最新发布
JavaZwb的博客
09-19 1082
`DOM` 是 `JavaScript` 操作网页的接口，全称为“文档对象模型”（`Document Object Model`）。它的作用是将网页转为一个 `JavaScript` 对象，从而可以通过脚本对网页元素进行操作，浏览器会根据 `DOM` 模型，将结构化文档解析成一系列的节点，再由这些节点组成一个树状结构（`DOM Tree`）；而BOM指的是浏览器提供了各种接口，让 JavaScript 脚本可以控制浏览器的各种功能
DOM
李刚的学习专栏
11-01 3509
下述内容主要讲述了《JavaScript高级程序设计（第3版）》第10章关于“DOM”。 DOM（文档对象模型）是针对HTML和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次变化的节点树，允许开发人员添加、移除和修改页面的某一部分。###一、节点层次 在HTML页面中，文档元素始终都是``元素。 1. Node类型JavaScript中的所有节点类型都继承自Node类型，因此所有节
DOM数据绑定
m0_37068028的博客
10-18 514
DOM数据绑定<ul id="ul"> <li>【 js 基础 】为什么 call 比 apply 快？</li> <li> Node.js 8.5 正式发布，新特性一览</li> <li>【服务端与客户端同构 —— Vue.js 应用框架 Nuxt.js</li> </ul>给元素动态绑定事件，改变背景色 var oul = document.getElementById
DOM笔记（四）：HTML 5 DOM复杂数据类型
淡忘~浅思
12-11 1709
HTML 5 DOM定义了一下集合、列表等复杂的数据类型用于实现便捷的操作。相对于HTML 4 DOM，HTML 5 DOM增加了HTMLCollection、DOMTokenList、DOMStringMap、HTMLAllCollection、HTMLFormControlsCollection等。 一、HTMLCollection、HTMLAllCollection和HTMLFormControlsCollection 三个接口均用于表示一组元素组成的列表。HTMLAllCollecti
DOM 数据属性
weixin_43117402的博客
03-18 1272
网页设计的初衷是数据和特定的 HTML 标签相关联。而我们肉眼能看到的数据只是 HTML 标签内部纯文本（innerText）部分，数据肯定不止肉眼所见那么少，那我们该怎么利用 HTML 存储呢？ HTML 提供一种数据属性的标准，利用data-*允许我们在标准内于 HTML 元素中存储额外的信息。例如下代码： <!DOCTYPE html> <head> <me...
DOM windows对象 navigator对象 详细介绍
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
08-22 295
今日任务 ：BOM Window对象是什么 BOM中最核心的对象就是Window对象，该对象表示运行HTML页面的浏览器窗口。 在浏览器环境中，Window对象具有双重角色。该对象既是允许JavaScript逻辑访问测览器窗口的一个对象，又是ECMAScript规范中的Global全局对象。 这就说明了，在浏览器环境中运行JavaScript逻辑时，在全局作用域中定义的对象、变量和函数都是Window对象的属性和方法。 也可以通过Window对象访问Global全局对象的属性和方法。例如NaN、undef
java JavaScript DOM基础
JIE_ling8的博客
08-12 181
JavaScript变量类型 5种基本类型：unll，undefined，boolean，number，string 1种复杂类型：object 5种引用类型：Array，Object，Function，Date，RegExp 3种基本包装类型：Boolean，Number，String 2种单体内置对象：Global，Math DOM： Document类型：Document类型表示文档。document对象是HTMLDocu...
DOM详解
m0_48224507的博客
06-10 7830
文章目录一、什么是DOM1. 什么是DOM2. 为什么学习DOM3. 何时会用到DOM4. DOM标准5. DOM能做的5件事二、DOM树1. 什么是DOM树2. 何时会生成DOM树三、查找1. 不需要查找就可直接获得的4种节点对象:2. 按节点间关系查找3. 示例: 输出指定元素，并用节点间关系查找想要的元素4. 按HTML特征查找: 4个函数5.查找指定的元素，并修改元素的样式总结 一、什么是DOM 1. 什么是DOM 一套专门操作网页内容的对象和方法的集合。 2. 为什么学习DOM ECM
JavaScript基础常识：数据类型判断与DOM/BOM操作
BOM关注浏览器本身的操作，如window对象，而DOM则处理HTML文档的结构和内容。 2. **数据类型检测**：`typeof()`函数用于判断一个值的数据类型，这对于错误处理和兼容性非常重要。比如，`typeof null`会返回"object...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

哈哈ha~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值