![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
DOM
文章平均质量分 86
JJ_Smilewang
这个作者很懒,什么都没留下…
展开
-
元素可视区client系列和元素滚动 scroll 系列
client 翻译过来就是客户端,我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。注意:client 宽度/高度 和 offset 宽度/高度 最大的区别是它不包括边框。scroll 翻译过来就是滚动的,我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。 如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被隐藏掉的高度,我们就称为页面被卷去的头原创 2022-06-22 14:00:00 · 247 阅读 · 0 评论 -
元素偏移量 offset 系列
offset 翻译过来就是偏移量, 我们使用 offset 系列相关属性可以动态的得到该元素的位置(偏移)、大小等。(1) 获得元素距离带有定位父元素的位置(2) 获得元素自身的大小(宽度高度)(3) 注意: 返回的数值都不带单位offset 系列常用属性有:(1)offset ① offset 可以得到任意样式表中的样式值② offset 系列获得的数值是没有单位的③ offsetWidth、offsetHeight包含padding+border+width④ offsetWidth、原创 2022-06-21 15:38:44 · 1056 阅读 · 0 评论 -
DOM--节点操作
我们知道,DOM主要是对元素进行增删改查和绑定事件,那么获取元素作为前提,就显得格外的重要。获取元素通常使用两种方式:(1) 利用 DOM 提供的方法获取元素 (2) 利用节点层级关系获取元素DOM提供的方法,在前面的文章里已经介绍过了,就是 document.getElementById()document.getElementsByTagName()、document.querySelector 等。这些方法其实逻辑性不强、而且相对来说有些繁琐。所以,本文将介绍第二种方式-原创 2022-06-16 21:19:41 · 753 阅读 · 2 评论 -
DOM--自定义属性的操作
DOM元素属性分为内置属性和自定义属性,比如我们常见的class、id、src、input等属性,都是内置属性,简单理解就是元素自带的属性。而自定义属性就是程序员为了方便使用而自己给元素设置的属性。① element.属性 获取属性值。② element.getAttribute('属性');区别:(1) element.属性 获取内置属性值(元素本身自带的属性),如img..src(2) element.getAttribute(‘属性’); 主要获得自定义的属性 (标准) 我们程序员自定义的属性;原创 2022-06-15 20:50:14 · 2294 阅读 · 0 评论 -
DOM--排他思想
排他思想在进行页面交互时经常用到,所谓排他思想,顾名思义就是其他元素无此样式效果或事件,只有当前操作的元素拥有。如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法:1. 所有元素全部清除样式(干掉其他人)2. 给当前元素设置样式 (留下我自己)3. 注意顺序不能颠倒,首先干掉其他人,再设置自己接下来,以几个案例来更直观的介绍下该思想的核心点:需求:1. 点击上面全选复选框,下面所有的复选框都选中(全选)2. 再次点击全选复选框,下面所有的复选框都不中选(取消全选)3.原创 2022-06-14 20:51:11 · 255 阅读 · 0 评论 -
DOM--操作元素
JavaScript 的 DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等。改变元素内容有两种方式,分别如下那么,要想实现以上需求,该怎么办呢?这就需要使用改变文本内容的另一个属性——innerHTML,它也是我们实际开发中最常用的。具体使用如下:通过代码演示,可以直观的感受到 innerText 和 innerHTML 的作用和区别,作用就是用来改变元素的内容,删除元素中的内容,则只需要设置 element.innerText="" 或者 eleme原创 2022-06-13 21:04:55 · 1021 阅读 · 1 评论 -
DOM--事件操作
1. 事件基础JavaScript可以让我们创建动态页面,而事件是可以被 JavaScript 侦测到的行为。简单理解事件就是: 触发--- 响应机制。网页中的每个元素都可以产生某些可以触发 JavaScript 的事件,例如,用户点击某按钮时产生一个事件,然后去执行某些操作。1.1 事件三要素① 事件源 (谁)② 事件类型 (什么事件)③ 事件处理程序 (做啥事)1.2 案例解析<body> <button>点击</button>.原创 2022-05-30 21:06:10 · 974 阅读 · 0 评论 -
DOM--获取元素
1. 什么是DOM文档对象模型(Document Object Model,简称 DOM),是 W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。 W3C 已经定义了一系列的 DOM 接口,通过这些 DOM 接口可以改变网页的内容、结构和样式。2. 什么是DOM树(1)DOM树:在内存中,集中保存一个网页中所有内容的树状图。(2)为什么使用DOM树:能够直观的保存上下级包含关系的数据结构,html标签就是包含的关系,所以网页中每一项内容,在内存中,都是存在树形结构.原创 2022-05-24 20:55:43 · 577 阅读 · 0 评论