DOM常用属性

最新推荐文章于 2024-12-17 14:19:18 发布
最新推荐文章于 2024-12-17 14:19:18 发布
阅读量857 收藏
点赞数 3
CC 4.0 BY-SA版权
文章标签： DOM 属性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XYZS_520/article/details/101452206
本文深入解析DOM中与尺寸和位置相关的属性，包括clientWidth、clientHeight、offsetWidth、offsetHeight等，以及如何获取元素的偏移量offsetLeft、offsetTop。同时，探讨了事件对象的使用，如获取鼠标位置、键盘状态等信息。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

快捷尺寸

DOM常用的相关属性

  • clientWidth、clientHeight
    该属性是每一个元素都有的属性，读取到的是该元素的宽度+padding、高度+padding
  • offsetWidth、offsetHeight
    该属性是每一个元素都有的属性，读取到的是该元素的宽度+padding+border、高度+padding+border
  • clientLeft、 clientTop
    该属性是每一个元素都有的属性，读取到的是左、上边框的宽度
  • scrollTop
    获取页面的卷动值页面中位于视口上方的页面的高度
  • window.innerWidth window.innerHeight
    获取窗口的尺寸宽度、高度
  • document.documentElement.clientWidth
  • document.documentElement.clientHeight
    获取视口的尺寸宽度、高度 有滚动条时不包含滚动条宽度默认17px

快捷位置

offsetParent
每一个元素都有一个属性 它指向定位父元素 该元素长辈中第一个具有定位的元素 都没指向的是body
获取到定位父元素的距离
offsetLeft 用于获取距离 左边距离
offsetTop 用于获取距离 顶部距离
都是从自己的边框外 到定位父元素的边框内(IE8除外 IE8是到父元素的边框外)

event 事件对象

事件对象
当浏览器中的事件被触发时，会产生许许多多的信息。有时我们会需要使用到这些信息。
获取方式，就是通过事件对象。
事件对象是：浏览器在触发事件时，帮助我们收集的许多信息的集合对象。
事件对象的位置 有兼容性问题

  • 高级浏览器
    • 事件函数的形参
  • IE浏览器
    • window.event
      event 表示事件对象
      事件绑定给谁谁触发
      altKey 表示事件触发时 键盘的alt键是否按下 false表示没有按下 true表示按下
      shiftKey 表示事件触发时 键盘的shift键是否按下 false表示没有按下 true表示按下
      ctrlKey 表示事件触发时 键盘的ctrl键是否按下 false表示没有按下 true表示按下
      clientX 表示事件触发时 鼠标位置到视口左边的距离
      clientY 表示事件触发时 鼠标位置到视口上边的距离
      offsetX 表示事件触发时 鼠标位置到元素左边的距离
      offsetY 表示事件触发时 鼠标位置到元素上边的距离
      注: offsetX offsetY 会被子元素影响 在最下面一层子元素使用
      绑定父元素 点击子元素会变为到子元素左边和上边的距离
      pageX 表示事件触发时 鼠标到页面左边的距离
      pageY 表示事件触发时 鼠标到页面上边的距离
      注：pageX pageY有兼容性问题 IE没有 可以使用clientX + scrollTop clientY + scrollLeft
      scrollLeft 页面较大时在视口左边的看不到的距离
      scrollTop 页面较大时在视口上边的看不到的距离
      IE的event事件在window上 window.event
      target 在高级浏览器中表示触发事件的元素 有兼容性问题
      srcElement 在IE浏览器中表示触发事件的元素 有兼容性问题
XYZS_520
关注
JavaScript之DOM常用属性及方法详解
发果叁
10-21 9372
自定义属性目的∶是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。自定义属性获取是通过getAttribute ('属性〉获取。element.getAttribute(‘属性’)//自己定义的element.setAttribute(‘属性’,‘值’)//主要针对自定义属性removeAttribute(‘属性’)但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。H5给我们新增了自定义属性设置H5自定义属性H5规定自定义属性data-开头做为属性名并且赋值。
dom 常用属性
qq_43643182的博客
06-08 1765
DOM常用属性： <!-- 1.nodeName 属性 :节点名称 nodeName 是只读的 元素节点的 nodeName 与标签名相同 属性节点的 nodeName 与属性名相同 文本节点的 nodeName 始终是 #text 文档节点的 nodeName 始终是 #document 2.nodeValue 属性：节点的值。 元素节点的 nodeValue 是 undefined 或 null 文本节点的 nodeValu
DOM中常用的属性
......的博客
10-12 1886
DOM中常用的属性1.innerHTML<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <a id="link" href="http://www.baidu.com">百度</a> <script type="text/javascript"> var node = d
DOM常见属性
哪有那么可爱的小蝈蝈的博客
10-20 1441
DOM常见属性 以下属性必须保证DOM已经添加在页面中，如果没有添加则无法调用 client(客户) offset(偏移) scroll(滚动条) 宽 clientWidth offsetWidth scrollWidth 高 clientHeight offsetHeight scrollHeight client(客户) offset(偏移 scroll(滚动条) 位 clientLeft offsetLeft scrollLeft 置 clien
dom常用属性
ymmygtl的专栏
09-24 332
innerHTML 获取节点内容 nodeName 获取节点名称 元素节点的 nodeName 与标签名相同属性节点的 nodeName 与属性名相同文本节点的 nodeName 始终是 #text文档节点的 nodeName 始终是 #document   nodeValue 获取节点值 元素节点的 nodeValue 是 undefined 或 null文本节点的 nodeV
dom 基本属性
qq_44036956的博客
12-15 2673
dom 选择器 document.getElementsByTagName(); 根据元素标签获取元素集合 document.getElementsByClassName(); 通过class类名获取元素集合 document.getElementById(); 通过id获取元素 document.getElementsByName(); 通过name属性查找html元素集合 参数...
DOM常用属性和方法
10-21
### DOM常用属性和方法 #### 一、DOM与HTML文档结构理解 在DOM（Document Object Model，文档对象模型）的世界里，HTML文档被视作一种树状结构，其中`<html>`作为根节点，而其他诸如`<head>`、`<title>`、`<body>`...
js基础之DOM中document对象的常用属性方法详解
10-21
下面我们就来详细探讨document对象的常用属性和方法。 1. document.anchors属性：它返回对文档中所有锚点（Anchor）对象的引用。锚点指的是那些带有name属性的a标签元素。通过这个属性可以访问文档中所有的锚点元素...
DOM操作一些常用的属性汇总
12-09
【DOM操作常用属性详解】 DOM（Document Object Model）是HTML和XML文档的一种标准表示形式，它将文档解析成一个可编程的节点树，允许开发者通过JavaScript等脚本语言对文档内容进行读取、修改和操控。DOM的核心...
HTML DOM 常用的属性和方法
04-09
HTML DOM（文档对象模型）是Web开发中用于...这些属性和方法构成了DOM的核心，让开发者能够高效地查找、修改和操作HTML页面中的元素和内容，实现动态效果和交互。了解并熟练掌握这些知识点对于进行前端开发至关重要。
DOM常用属性【DOM】
QQ1012421396的博客
08-20 8050
DOM属性：     DOM属性是节点（HTML 元素）的值，您能够获取或设置。文档里的每个节点都有以下3个属性：nodeName, nodeType, nodeValue。更有一些常用属性：innerHTML，parentNode，childNodes ，attributes ，firstChild，lastChild， nextSibling， previousSibling， leng
DOM对象中的常用属性（innerHTML属性，innerText属性，className属性，style属性）
最新发布
2401_89733599的博客
12-17 432
innerHTML属性。innerText属性。className属性。
dom的中node常用属性和方法
tuku0801的专栏
10-01 1400
HTML DOM Nodes In the HTML DOM (Document Object Model), everything is a node: The document itself is a document nodeAll HTML elements are element nodesAll HTML attributes are attribute nodesText
dom元素对象常用的属性和原生js方法总结
qq_38888512的博客
03-30 368
getAttribute(prop) 获取dom元素的属性值。 <div name="demo" id="demo" class="demo"> <!-- 我是注释 --> <span></span> </div> <script> var re...
DOM常用的属性
等，你的到来。
10-19 1644
offsetHeight height+padding+border，当前对象的高度 clientHeight 获取对象可视高度，不包括滚动条，不包括边框 scrollHeight 获取对象的滚动高度/内容总高度 offsetWidth clientWidth scrollWidth offsetTop 当前对象相对于定位父级的top值 clientTop 获取对象上边框的bor
DOM元素的特性和属性
05-13 495
首先来看一下他们的概念： 特性(Attribute):是DOM元素在文档中作为html标签拥有的属性； 属性(Property):是DOM元素在js中作为对象拥有的属性； 首先来了解一下DOM的五个标准特性（id、title、lang、dir、class） 对于标准特性来说，Attribute和Property是同步的，是会自动更新的， 对于自定义的特性来说，他们是不同步的（自...
DOM中常用的操作元素属性
qq_41189709的博客
08-04 288
操作元素 1，操作元素内容 innerText 2，操作常用属性 3，操作表单元素属性 4，操作元素样式属性
dom元素属性操作---属性获取或属性设置
赵佳敏的博客
12-01 3461
一、dom属性操作 属性获取或属性设置 1. 操作类名称 属性的获取 输出当前对象的类名称 <button class="btn list" name="but" id="data">按钮</button> <script> var btn = document.getElementsByClassName("btn")[0]; console.log(btn.className); </script> <button class="b
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值