querySelectorAll和querySelector 选取不到元素

已于 2023-01-13 09:38:41 修改
阅读量1.7k 收藏 1
点赞数 1
分类专栏： 前端开发过程中遇到的问题 文章标签： 前端 javascript vue.js html
于 2023-01-13 09:37:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/swhbbhbb/article/details/128669528
版权

问题描述：Vue在更新data之后取不到元素

问题原因：

Vue在更新data之后并不会立即更新DOM上的数据，就是说如果我们修改了data中的数据，再马上获取DOM上的值，我们取得的是旧值，我们把获取DOM上值的操作放进$nextTick里，就可以得到更新后得数据。

问题解决：

vue改变data中的数据后，使⽤vue.$nextTick()⽅法包裹js对象执行后续代码

什么也不知
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS中 querySelector和querySelectorAll选择网页元素
weixin_46421045的博客
06-10 411
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1 id=title>ti
Document与Element中querySelector/querySelectorAll的区别
u011500829的博客
08-30 393
Document与Element中querySelector/querySelectorAll的区别测试html使用表达式分析CSS选择器结果查找范围 测试html <div id="div1"> <div id="div2"> <div id="div3"> <div>目标div</div> </div> </div> </div> <div> <div> &lt
React 入门教程 querySelectorAll() 方法遇到的问题
jieming2002的博客
10-12 3689
虽然是英文版的，但是写得简洁明了。 https://reactjs.org/docs/add-react-to-a-website.html 打开页面之后，搜索: Reuse a Component 找到复用组件这一节。 点击这一节中的：Download the full example (2KB zipped) 代码很小，只有两个文件，直接在浏览器打开 index.html 即可看效果。 存在的...
vue mounted周期中document.querySelectorAll()获取不到元素的问题
luoxuebinfei的博客
04-21 7369
在mounted阶段，若需要获取的元素或组件有v-if，v-for属性。 v-if的初始化结果为false。v-for遍历的数组初始化阶段无值。（即mounted阶段后，根据获得的后台数据来动态操作dom）这两种情况都会导致mounted阶段获取元素的语句获取不到dom。 解决方案： 把获取元素的语句放在异步获取到数据，赋值给data中的key之后进行。同时需要给获取元素的语句加上setTimeout。因为setTimeout是宏任务，会在vue的render函数执行之后再执行。 把获取元素的语句放到
web前端document.querySelectorAll,一个All愣是没发现
qq_45660598的博客
11-08 641
获取Dom对象：document.querySelectorAll与document.querySelector
选择标签方法querySelector和querySelectorAll
DeviL_MCry的博客
06-24 1784
个人觉得querySelector 和 querySelectorAll 是DOM中超强的选择标签的方式，因为他们接受的参数是类CSS选择符的字符串。因此，感觉它们的功能远超传统的getElementById或者getElementsByTagName之类的， 它们的主要区别在于，querySelector 只找一个标签，querySelectorAll 是找多个标签。 举例说明：有如下HTML...
js-DOM 知识(一)
聪明勇敢有力气的博客
10-06 327
DOM 的一些问题 querySelector相比于getElementById有什么缺点
关于querySelectorAll的一个坑
weixin_30588729的博客
05-16 576
刚学JS的DOM操作时，就知道了匹配一堆元素，会获得NodeList和HTMLCollection这两个对象，不过当时并没有深入去研究两者的区别 因为无论是NodeList还是HTMLCollection,都可以用方括号来获取想要的节点，直到今天 不幸踩坑 今天写了一个网页，用AJAX向后端要数据，格式是JSON，解析后要做一个判断，看看 用来填充数据的HTML DIV元素够不够，不够用，...
原生的强大DOM选择器querySelector介绍
08-31
这个方法返回匹配给定选择器的第一个元素，如果找不到匹配的元素，则返回null。 例如，要获取id为"test"的`<div>`元素，我们可以这样做： ```javascript var myDiv = document.querySelector("#test"); ``` 相比于...
原生的强大DOM选择器querySelector.pdf
08-16
querySelector和querySelectorAll是JavaScript DOM操作的重要工具，它们让开发者能够以CSS选择器的方式选取DOM元素，大大提高了代码的可读性和简洁性。理解这两个方法的用法和区别，对于编写高效、易维护的DOM操作...
jQuery选择器querySelector的使用指南
11-26
值得注意的是，`querySelector`和`querySelectorAll`并不支持选取伪类状态的元素，如`:hover`。尝试选取`:hover`状态的元素将无法得到预期的结果。 在使用这两个方法时，开发者需要理解CSS选择器的工作原理，包括类...
js选取多个或单个元素的实现代码（用class）
10-27
在JavaScript中，选取网页上的元素是进行DOM操作...在实际项目中，还可以结合其他DOM API，如`querySelector()`, `querySelectorAll()`, `getElementById()`, `getElementsByName()`等，来实现更复杂的元素选取和操作。
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
10-24
这些伪元素在页面渲染时被插入到元素内部，但并不在DOM树中可见。在某些场景下，我们可能需要通过JavaScript获取或修改这些伪元素的属性，以实现更复杂的交互效果。 在JavaScript中获取伪元素的属性，可以使用`...
JavaScript基础教程之querySelectorAll( )方法遇到的问题
热门推荐
monkeyfly学前端
01-13 6万+
Write By Monkeyfly 以下内容均为原创，如需转载请注明出处。 一、前提 最近这两天一直在学习JavaScript的事件委托（或称事件代理），用了两天的时间看完了这篇《js中的事件委托或是事件代理详解》博客，并且将博主提供的案例手动敲了两边，可以说是基本掌握了事件委托的原理和用法。这篇博客对于JavaScript的事件委托的讲解还是比较通俗易懂，详细到位的，在这里向大
Cannot read property ‘querySelectorAll‘ of undefined问题解决
m0_73481765的博客
12-27 1434
当出现 "Cannot read property 'querySelectorAll' of undefined" 错误时，通常意味着您尝试在一个未定义或者为空的值上执行方法。这可能是由于尚未正确获取到 DOM 元素或者元素不存在导致的错误。
Java: FastJson之JSONArray转JSON树
weixin_31058701的博客
10-23 559
** Java: FastJson之JSONArray转JSON树 ** /** * list转树Json * @param arr 需要转化的数据 * @param id 数据唯一的标识键值 * @param pid 父id唯一标识键值 * @param child 子节点键值 * @return */ public...
queryselector获取不到元素
weixin_43861730的博客
12-03 7898
<input type="text" id="username"> <script> var name=document.querySelector('#username'); </script> 写代码获取元素的时候死活也得不到name，大概是变量的名字和标签内部属性的名字冲突了，所以使用querySelector的时候不要把变量名命名成标签属性！ ...
vue项目报错合集
发育中的前端
07-21 393
"export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’ //echarts5报错 错误原因： //引入方式不对 import echarts from 'echarts 解决方案： //将引入方式改为： import * as echarts from 'echarts'; //或者 const echarts = require('echarts'); this.$el.querySelectorAll is not
querySelectorAll 和querySelector区别
最新发布
05-22
querySelectorAll和querySelector都是JavaScript中常用的DOM操作方法，它们的主要区别在于： - querySelector只返回匹配到的第一个元素，而querySelectorAll则返回所有匹配到的元素。 - querySelectorAll返回的是一个类数组对象（NodeList），可以通过下标访问其中的元素，而querySelector只返回一个元素，直接访问即可。 举个例子来说，假设我们有以下HTML代码： ``` <ul id="list"> <li class="item">Item 1</li> <li class="item">Item 2</li> <li class="item">Item 3</li> </ul> ``` 如果我们想获取id为list的ul元素下所有class为item的li元素，可以使用以下代码： ``` // 使用 querySelectorAll var items = document.querySelectorAll('#list .item'); console.log(items.length); // 输出 3 // 使用 querySelector var item = document.querySelector('#list .item'); console.log(item.textContent); // 输出 "Item 1" ``` 注意，querySelectorAll返回的是一个NodeList对象，虽然也可以使用forEach遍历其中的元素，但是它并不是真正的数组，如果需要使用数组方法，需要将其转换为数组。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值