javaScript DOM操作 (中)

最新推荐文章于 2024-09-15 11:12:32 发布
最新推荐文章于 2024-09-15 11:12:32 发布
阅读量247 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Her_smile/article/details/81034993
版权

在实际开发中，我们往往需要获取网页上的一些此尺寸，但是官方给出的方法很多，容易混，这里分以下类

查看滚动条的距离

  • window.pageXOffset/pageYOffset 该方法在IE8及IE8以下不兼容， 可以使用下面的方法
  • document.body.scrollLeft || .scrollTop  或者 document.documentElement.scrollLeft || .scrollTop,由于兼容性比较混乱,有时候支持前者，有时候支持后者，但是不会同时支持，所以一般是取两者相加

查看可视区域视口的尺寸

  • window.innerWidth(包括滚动条)/innerHeight 但是该方法在IE8及IE8以下不兼容 可以使用以下方法,
  • document.documentElement.clientWidth(不包括滚动条)/clientHeight, 但是方法只是在标准模式下，任意浏览器都兼容, 标准模式就是使用当前浏览器的最新语法，怪异模式就是向后兼容，通过去除html文档顶部的<!DOCTYPE html>实现, 可通过document.compatMode来查看到底是标准模式还是怪异模式,在怪异模式下面，可以通过下面的方法实现
  • document.body.clientWidth(不包括滚动条)/clientHeight(整个文档高度，包括不可视部分)

查看元素的几何尺寸(宽高)

  • domEle.getBoundingClientRect();该方法会返回一个对象，该方法返回一个对象，对象里面有left,top,right,bottom等属性。left和top或者x和y,代表该元素左上角的X和Y坐标，right和bottom代表元素右下角的X和Y坐标，而且需要注意的是，它们都是相对于文档顶部左上角的坐标而不是窗口。height和width属性代表元素内容区宽高，老版本IE并未实现，而且该方法返回的结果并不是“实时的”。一般我们可以使用下面的方法替代它：
  • dom.offsetWidth，dom.offsetHeight 来获得宽高，dom.offsetLeft, dom.offsetTop来获得左上角位置。需要注意的是，这几个方法对于无定位父级的元素，返回相对文档的坐标。对于有定位父级的元素，返回相对于最近的有定位的父级的坐标。定位也就是(css 的position属性 ),.同时dom.offsetParent返回最近的有定位的父级，如无，返回body

滚动条滚动

  • window上有三个方法， scroll(),scrollTo(),scrollBy()，三个方法功能类似，用法都是将x,y坐标传入。即实现让滚动轮滚动到当前位置。scroll(),scrollTo(),指定的是滚动到哪个左边, 而scrollBy()指定的是滚动一次要滚动多长的距离

使用event 获取鼠标的位置

  • event.clientX | clientY: 返回相对于窗口的位置
  • event.offsetX | offsetY: 返回相对于当前元素的位置
EDB
关注
专栏目录
JavaScript dom操作 dom元素查询 示例代码
06-27
JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码...
JavaScript dom操作 趣味案例
06-25
本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可...
JavaScript DOM操作
好好学习天天向上
03-27 5226
文章目录JavaScript DOM操作事件的冒泡和事件的委托事件冒泡事件委派 JavaScript DOM操作 事件的冒泡和事件的委托 事件冒泡 同一片区域，给其中的元素都绑定了点击事件，点击公共区域时，触发顺序？ 假设如图，从span->box1->body依次触发 事件的冒泡(Bulle)：事件的向上传导，事件在目标元素处理后，会由内向外的一层层传递 在开发中大部分情况冒泡都是有用了，如果不需要可以通过事件对象event.cancelBubbl取消冒泡。 let span = docum
JavaScript DOM—节点操作
Jin_Xiang123的博客
01-04 1534
文档对象模型（Document Object Model，简称DOM）是一种基于树状结构的编程接口，用于操作HTML、XML和SVG等文档。它将文档表示为一个树状结构，其中每个节点代表文档中的一个元素、属性、文本或其他类型的内容。DOM提供了一组标准的对象和方法，可以通过JavaScript等编程语言来访问和操作文档的各个部分。通过DOM，开发者可以使用JavaScript来读取、修改、添加和删除文档的元素、属性和内容。DOM树是由节点组成的。文档节点是DOM树的根节点，它是整个文档的入口点。
JavaScript中DOM操作
10-12 3984
目录 DOM介绍 获取元素 操作元素 节点操作 DOM介绍 JavaScript一共包括三部分，分别是ECMAScript也就是JavaScript基础、DOM和BOM，前面的文章已经讲过ECMAScrit了、这里是ECMAScript的链接：https://blog.csdn.net/HeZhiYing_/article/details/102218018 今天来将一下DO...
JavaScript 操作 DOM 元素
最新发布
疯狂假前端的博客
09-15 1285
DOM 基础：了解 DOM 的概念和如何通过 JavaScript 操作 DOM。选择元素：使用不同方法选择 DOM 元素。操作元素：修改元素的内容、属性和样式，操作子元素。事件处理：添加事件监听器，处理事件对象和事件委托。动态创建元素：创建和插入新元素，使用模板字符串动态生成 HTML 内容。掌握 DOM 操作的这些概念将帮助你动态地创建和更新网页内容。接下来，你可以学习异步编程，了解如何处理异步操作，如 AJAX 请求和 Promise。
JavaScript 之 DOM 操作（一）
m0_73759720的博客
08-11 2192
本文主要讲了获取标签的方法、设置标签的样式、设置文本、标签操作及事件的一些操作。
Javascript中的DOM操作事件
m0_56457325的博客
04-11 885
概念： DOM是指文档对象模型，是HTML和XML文档的编辑接口 HTMLDOM定义了访问和操作HTML文档的标准方法。 DOM以树结构表达HTML文档 Javascript分三个部分： ECMAScript标准：JS的基本的语法 DOM：documentobjectmodel文档对象模型操作页面的元素 BOM：BrowserobjectModel浏览器对象模型操作的是浏览器 DOM：文档对象模型 文档：把一个html文件看成是一个文档，由于万物皆对象...
【JavaScript 】DOM操作快速入门
Joker_ZJN的博客
10-30 2358
相信我，十分钟，快速入门JavaScript dom操作。
JavaScript DOM 对象详解
xycxycooo的博客
07-16 970
在 JavaScript 编程中，DOM（Document Object Model）是指文档对象模型，它提供了一组用于与 HTML 文档进行交互的对象。DOM 是一种跨平台的、独立于语言的接口，它将 HTML 或 XML 文档表示为一个树形结构，其中每个节点都是一个对象，代表文档的一部分（如元素、属性、文本等）。通过 DOM，开发者可以添加、删除、修改和查询文档中的元素和内容。通过本文的详细讲解，相信你已经对 JavaScript 中的 DOM 对象有了全面的了解。方法可以通过元素的标签名获取元素集合。
JavaScript之DOM
qq_43751200的博客
06-05 1791
DOM
JavaScript中DOM的操作方法
qq_57606640的博客
10-31 3401
1、获取元素 document.getElementById（） document.getElementsByClassName（）[0] document.getElementsByName（）[0] document.getElementsByTagName（）[0] document.querySelector（） document.querySelectorAll（）[0] 2、获取内容 alert(a.innerHTML);获取代码和内容，但只显示内容。 alert(a.in
JavaScript dom操作 删除元素 示例代码
06-27
JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 ...
javascript DOM 操作.doc
01-15
javascript DOM 操作 javascript DOM 操作是指在客户端使用javascript语言来操作文档对象模型...javascript DOM 操作可以在客户端动态地更改网页的内容和结构，但是在不同的浏览器中需要使用不同的方法和属性来实现。
JavaScript dom操作 添加和替换元素 示例代码
06-27
JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换...
中文的unicode编码范围
98猛虎的博客
07-31 8705
中文的unicode编码范围是: \u4E00-\u9FA5\uf900-\ufa2d
使用es6模板字符串传参
98猛虎的博客
03-10 4789
模板字符串使用的是返引号，就是键盘左上角esc下面那个键，使用模板字符串可以更方便于传参例如：当我们需要在url后面跟一个参数的时候 以前我们可以这样写var path=path+':'+id.toString() &lt;a href={path}&gt;现在我们可以这样写&lt;a href=`path/:${id}`&gt;上面的path是一个路由...
Regexp 的贪婪和非贪婪模式
98猛虎的博客
08-01 2113
贪婪: 尽可能多的匹配 非贪婪: 尽可能少的匹配    语法：将?紧跟在任何量词 *、 +、? 或 {} 的后面，将会使量词变为非贪婪的（匹配尽量少的字符），和缺省使用的贪婪模式（匹配尽可能多的字符）正好相反。 下面给几个例子: 例一 //不加问号默认为贪婪 var reg = /a.*c/ var string = 'aaaccaa' var result = string.match...
用js实现canvas的绘制
98猛虎的博客
05-01 1987
canvas绘制 在html中嵌入&lt;canvas&gt;&lt;/canvas&gt;标签 使用js得到canvas引用   canvas操作 设置canvas的宽高  var width = canvas.width = window.innerWidth; var height = canvas.height = window.innerHeight;     得到可绘制...
深入理解JavaScript DOM操作技巧
"本文主要介绍了JavaScript中的DOM操作，包括如何获取和操作元素结点、属性结点、文本结点，以及动态改变DOM结构的方法。" DOM（文档对象模型）是Web开发中的一个重要概念，它允许JavaScript与HTML或XML文档进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值