获取DOM元素

最新推荐文章于 2024-07-16 17:56:11 发布
最新推荐文章于 2024-07-16 17:56:11 发布
阅读量273 收藏 2
点赞数 10
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengxutu/article/details/137041880
版权
  • 选取第一个元素
    • 语法：
      + 
        <body>
    <ul>
      <li>测试1</li>
      <li>测试2</li>
      <li>测试3</li>
    </ul>
  <script>
      const li=document.querySelector('ul li:first-child')
      console.log(li)
      <!-- 选择所有小li -->
      const lis=document.querySelectorALL('ul li')
      console.log(lis)
  </script>
  </body>
    • 参数：
      • 包含一个或多个有效的CSS选择器字符串
    • 返回值
      • CSS选择器匹配的第一个元素，一个HTMLElement对象
      • 如果没有匹配到，则返回null
  • 选取匹配的多个元素
  • 语法：
    + 
      const lis=document.querySelectorAll('ul li')
  console.log(lis)
  • 参数：
    • 包含一个或多个有效的CSS选择器字符串
  • 返回值
    • CSS选择器匹配的NodeList对象组合
  • 补充：
    • 获取一个DOM元素可以直接操作修改
    • 获取多个DOM元素不可以直接修改，因为多个来的是数组，所以可以通过遍历的方法
  • 通过CSS选择器来获取DOM元素（重点）
    +
      document.querySelectorALL('css选择器')
    • 得到的是一个伪数组：
      • 有长度有索引号的数组
      • 但是没有pop() posh()等数组方法
      • 想要得到里面的每一个对象，则需要遍历（for)的方式获得
      • 哪怕只有一个元素，通过querySelectALL()获取过来也是一个伪数组，里面也只有一个元素而已
chengxu兔
关注
  • 10
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js之DOM学习获取元素
m0_61547956的博客
04-14 447
目录 DOM树 获取元素的方式 getElementById根据id来选 getElementByTagName根据标签名来选 getElementByClassName根据类的名字来选，把类是xxx的都会选出来 H5新增获取元素方式 获取body和html DOM（Document Object Model)文档对象模型，是W3C组织推荐的处理可扩展标记语言的（HTML或XML）的标准编程接口。通过这些接口可以改变网页的内容、结构和样式。 DOM树 获取元素的方式 getElem
vue 3.0 使用ref获取dom元素
热门推荐
好巧的博客
09-24 13万+
答：检查是在哪里进行的console.log，setup函数相当于vue2中的beforeCreate, created阶段，如果直接在setup中直接使用console.log获取ref，返回的自然是null。当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。最后，希望在提出疑问前请创建一个新项目，将文章中的示例代码完完整整的拷贝到新项目的app.vue中，运行后可直接查看效果。// 存储dom数组。
jQuery获取dom元素
dywtsh的博客
05-05 1226
可以根据确定的jQuery对象，利用遍历函数查询目标dom元素。方法直接定位目标dom元素组。目标元素是被选元素的祖先。目标元素是被选元素的后代。目标元素是被选元素的同辈。
vue3中获取dom元素和操作
weixin_42349568的博客
02-09 3万+
一，需求概述 直接举例子来说明吧，我想要做的是，遍历这几个菜单，获取他们的dom元素的宽度。当文字dom元素宽度太长的话，需要滚动显示文本。 二，实现思路 对应的html: <div class="icon-box" ref="menu_item"> <div class="menu-box" v-for="(item, index) in iconMenus" :key="index" @click="clickItem(item)" >
vue 获取dom子元素_vue获取dom元素注意事项
weixin_39929813的博客
12-24 2709
mounted(){setTimeout(()=>{this.contentToggle();},1000)},methods:{contentToggle(){console.log(this.$refs.bodyFont.offsetHeight);}}vue想要获取dom元素的高，一般情况下我们都可以想到写在mounted函数里，即dom加载完再获取，但是结果并不如我们所想，又想到用一...
vue获取dom元素注意事项
08-28
vue获取DOM元素注意事项 vue获取DOM元素注意事项是vue开发中的一個重要知识点。获取DOM元素的高或内容是非常常见的需求，但是很多开发者都遇到了困难。那么，如何正确地获取DOM元素呢？ 首先，我们需要了解vue的...
在vue中获取dom元素内容的方法
08-30
"在 Vue 中获取 DOM 元素内容的方法" 在 Vue 中获取 DOM 元素内容是开发者经常遇到的问题，而解决这个问题的方法很多，今天我们就来讨论其中的一种，即使用 ref 属性来获取 DOM 元素内容。 使用 ref 属性获取 DOM ...
vue获取DOM元素并设置属性的两种实现方法
08-29
下面小编就为大家带来一篇vue获取DOM元素并设置属性的两种实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决vue项目获取dom元素宽高总是不准确问题
11-20
原因：重置数据后获取dom元素宽高时，dom元素还未渲染完毕； 解决方法：利用Vue.nectTick(callback) this.$nextTick(() => { this.$refs.editor[0].offsetHeight; }) Vue.nectTick() 是在下次DOM更新循环结束之后...
在Vue中使用ref获取dom元素节点及组件内的数据和方法
01-20
本文将详细讲解如何在Vue中使用`ref`来获取DOM元素节点以及组件内的数据和方法。 ### 一、获取DOM元素节点 在HTML模板中，给需要引用的DOM元素添加`ref`属性，如： ```html <div ref="mytitle">This is title ...
更新商品前端接口编写
weixin_55639995的博客
07-12 405
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 753
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
JS+CSS特效：HTML+JS+CSS 实现精致的带二级菜单的头部菜单
uu0216的博客
07-16 513
既然a标签把它填满导致了原来的内圆角没有了，而去掉了a标签的背景色依然没有出现圆角。那么我不妨把第一行的两个菜单项和最后一行的两个菜单项写个圆角。这里利用子选择器实现。为了避免菜单项数量改变而导致样式的变化，需要把样式写在最后两个子列表项上，而不是第7和第8上面。所以，在最后两个列表项上，我们使用的 nth-last-child 而不是 nth-child。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 223
vue 自定义滚动条同步拖动（移动端）
vue搜索框过滤--- computed、watch区别
最新发布
学习笔记分享给大家
07-16 242
计算属性computed适用于需要基于其他数据动态变化，并且需要缓存的场景。侦听器watch适用于需要响应数据变化，执行异步或开销较大操作的场景。方法methods适用于定义组件的具体行为，包括事件处理和业务逻辑等。
自定义 Hooks 在 Vue3 中的应用和重要性
CodeQi技术小栈的博客
07-16 676
自定义Hooks是Vue3提供的一种将可复用逻辑提取到独立函数中的方式。这不仅可以减少代码的重复，还能让你的代码更加清晰易读，维护起来也更加方便。在这篇文章中，我将通过详细的步骤和实例，带你深入了解如何在Vue3中使用自定义Hooks，以及它们在实际项目中的应用和重要性。首先，我们来看一下如何创建一个简单的自定义Hook。在Vue3中，自定义Hook本质上就是一个返回特定功能的函数。让我们从一个简单的计数器例子开始。
在项目中，如何使用springboot+vue+springsecurity+redis缓存+Axios+MySQL数据库+mybatis
huanghm88的专栏
07-11 723
在Spring Boot中，可以使用Spring Data JPA和MyBatis来配置MySQL数据库。在Vue项目中，可以创建一个config.js文件来配置后端的API地址，然后在需要发送请求的地方使用Axios发送请求。根据业务需求，在Spring Boot中编写相应的接口和服务层代码，包括数据访问、业务逻辑等。在Vue中，可以使用Axios发送HTTP请求，并将响应的数据展示在前端页面上。分别启动后端的Spring Boot应用和前端的Vue应用，访问前端页面，就可以看到与后端进行通信的效果。
vue快速上手——创建vue项目，vue基本使用方式，路由vue-Router，转态管理vuex
weixin_73582152的博客
07-15 593
Node.js 是一个开源、跨平台的 JavaScript 运行时环境，它允许开发者在服务器端运行 JavaScript 代码。Node.js 是基于 Chrome V8 引擎构建的，它的设计目标是提供一种高效、轻量级的方式来构建可扩展的网络应用程序。事件驱动：Node.js 使用非阻塞 I/O 模型，使其非常适合处理大量并发连接，这使得它在构建实时应用程序（如聊天应用）时非常高效。单线程。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 292
通过sm4对文件进行加解密，用户输入密码
uniapp 获取dom元素
03-31
在uniapp中，可以使用以下方法获取dom元素： 1. 使用原生的querySelector方法获取dom元素： ```js let dom = uni.createSelectorQuery().select('#id'); // 通过id获取dom元素 ``` 2. 使用ref属性获取dom元素： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值