首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用querySelector时,PreviousSibling不返回值

是因为PreviousSibling属性只能获取到当前节点的前一个同级节点,而querySelector返回的是一个匹配的元素列表,不仅包括同级节点,还包括子节点和后代节点。

如果想要获取前一个同级节点,可以使用previousElementSibling属性来代替PreviousSibling。previousElementSibling属性返回当前节点的前一个同级元素节点,如果不存在则返回null。

示例代码:

代码语言:txt
复制
var element = document.querySelector("#myElement");
var previousSibling = element.previousElementSibling;

在这个例子中,我们使用querySelector选择了id为"myElement"的元素,然后通过previousElementSibling属性获取了它的前一个同级元素节点。

如果需要获取所有的前一个同级节点,可以使用previousSibling属性结合循环来实现:

代码语言:txt
复制
var element = document.querySelector("#myElement");
var previousSiblings = [];

while (element.previousSibling) {
  if (element.previousSibling.nodeType === Node.ELEMENT_NODE) {
    previousSiblings.push(element.previousSibling);
  }
  element = element.previousSibling;
}

在这个例子中,我们使用了一个循环来遍历当前节点的所有前一个同级节点,将符合条件的元素节点添加到previousSiblings数组中。

关于querySelector和相关的DOM操作方法,腾讯云提供了云函数(SCF)服务,可以用于构建和运行云端应用程序。您可以通过腾讯云云函数产品页面了解更多信息:腾讯云云函数

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

使用 querySelector 查询元素,如何使用正则进行模糊匹配查询?

你好,今天聊一个简单的技术问题,使用 querySelector 方法查询网页上的元素,如何使用正则进行模糊匹配查询?...发到用户浏览器中的源码经常有这样的元素节点: 点击登录 其中,13jj5 并不是固定的,它是一串随机字符,是前端框架在编译为了避免组件样式混淆而故意添加的...如果我们在智能化产品中直接这样查询目标元素: document.querySelector('h2.UserInfoBox_textEllipsis_13jj5') 下次产品重发后,代码便不再有效了。...这种情况便适合采用属性值正则匹配选择器: document.querySelector('h2[class^="UserInfoBox_textEllipsis"]'); 最后,回顾一下,使用属性值正则匹配选择器...,关键记忆点有两个: 1)使用了中括号,直接用在元素选择器后面。

1.5K20

Go: 命名返回值使用, return携带还是携带?

在Go语言中,命名返回值提供了一种声明函数返回值的方式,它可以增加代码的可读性和灵活性。但是,在使用命名返回值,return语句是否应该明确携带返回值,是一个常见的困惑。...带命名返回值的return 如果在函数中使用了命名返回值,你可以在return语句中明确指定返回的值,如下所示: func sum(a, b int) (result int) { result =...不带命名返回值的return 或者,你可以省略return语句中的返回值,让Go自动返回命名返回值的当前值: func sum(a, b int) (result int) { result = a...总结 命名返回值在Go语言中是一个强大的工具,但如何使用它没有固定的规则。选择是否在return语句中携带返回值取决于多个因素,包括代码的复杂性、团队的编程风格以及可读性和可维护性的需求。...希望这篇文章能帮助你解决关于Go语言中命名返回值使用的困惑。

42730
  • 【Qt】使用QPalette设置QPlainTextEdit颜色生效

    【Qt】使用QPalette设置QPlainTextEdit颜色生效 Qt5.9 C++开发指南 源代码 使用QPalette设置QPlainTextEdit颜色生效 解决方法 参考资料 Qt5.9...使用QPalette设置QPlainTextEdit颜色生效 练习2.2 可视化UI设计的示例程序sample2_2,第32页的编写一个设置QPlainTextEdit的文本编辑框txtEdit...的字体颜色使用QPalette调色板设置QPlainTextEdit的文本编辑框的字体颜色没有生效,具体槽函数代码如下: void QWDialog::setTextFontColor() {...在实际使用时,如果使用了样式表设置了QPlainTextEdit文本编辑框的颜色,那么再使用QPalette设置QPlainTextEdit颜色生效,以样式表的为准。...参考资料 https://doc.qt.io/qt-5/qwidget.html#palette-prop 【Qt】使用QPalette设置按钮颜色生效

    2.6K20

    Java避坑指南:使用ExecutorCompletionService处理任务,而处理返回值,导致OOM

    ---- 使用ExecutorCompletionService出现OOM的场景 ---- 使用java.util.concurrent.ExecutorCompletionService异步处理任务...使用ExecutorCompletionService为什么会出现OOM ---- ExecutorCompletionService 使用我们自定义的线程池去异步执行任务,任务执行完,会把任务执行的结果...使用ExecutorCompletionService的正确姿势 ---- 案例:对批量job即solvers异步处理后,一定要获取执行结果,做其它业务处理, void solve (Executor...小结 ---- 使用ExecutorCompletionService处理任务,一定记得执行: java.util.concurrent.ExecutorCompletionService#take...限制在本地局部变量使用!也可预防!。 建议:不要使用ExecutorCompletionService,从javadoc上,这个类的实现并不是Doug Lea的作品。 ----

    41120

    JavaScript的理解记录(5)

    DOM):是表示和操作HTML和XML文档内容的基础API;其中几个重要的类有:Document和Element,Text,这三个也是Node的其中几个子类;  2、文档元素的选取:返回值是...');         通过CSS类:   document.getElementsByClassName('c1 c2 c3');                  //参数中class有多个,...只关心名称,顺序无关紧要; 通过CSS选择器: document.querySelectorAll()和document.querySelector() 参数是包含一个...NodeList对象;            3、firstChild,lastChild:节点的子节点的第一个和最后一个节点,没有为null;            4、nextSibling和previousSibling...script>元素的内容;FireFox不支持;     5、 节点的增删:操作文档进行文档节点的增加和删除          1、创建节点:document.createElement() 参数为区分大小写的标签名

    1.4K20

    webAPIs04-页面尺寸和位置、时间

    Web APIs - 第4天 进一步学习 DOM 相关知识,实现可交互的网页特效 能够插入、删除和替换元素节点 能够依据元素节点关系查找节点 日期对象 掌握 Date 日期对象的使用,动态获取当前计算机的时间...ECMAScript 中内置了获取系统时间的对象 Date,使用 Date 与之前学习的内置对象 console 和 Math 不同,它需要借助 new 关键字才能使用。 实例化 // 1....插入节点 在已有的 DOM 节点中插入新的 DOM 节点,需要关注两个关键因素:首先要得到新的 DOM 节点,其次在哪个位置插入这个节点。...+) { lis[i].addEventListener('click', function () { // 前一个节点 console.log(this.previousSibling...) // 下一下节点 console.log(this.nextSibling) }) } 结论: previousSibling

    57710

    【Python100天学习笔记】Day25 JS面向对象及DOM

    forward() / back() / go() location对象 navigator对象 screen对象 DOM DOM树 访问元素 getElementById() / querySelector...() getElementsByClassName() / getElementsByTagName() / querySelectorAll() parentNode / previousSibling...focus / blur 表单事件:input / change / submit / reset / cut / copy / paste / select 事件绑定 HTML事件处理程序(推荐使用...DOM事件处理程序(只能附加一个回调函数) 事件监听器(旧的浏览器中不被支持) 事件流:事件捕获 / 事件冒泡 事件对象(低版本IE中的window.event) target(有些浏览器使用...屏幕位置:screenX和screenY 页面位置:pageX和pageY 客户端位置:clientX和clientY 键盘事件 - 哪个键被按下了 keyCode属性(有些浏览器使用

    28530

    JQuery分析及实现part4之DOM操作模块功能及实现

    遍历 this 上的每一个 dom 元素,再遍历 target 上的每一个 dom 元素 将 this 上的 dom 元素追加到 target 上 注意: 在追加节点,如果遍历的是第一个目标 dom...元素,不需要拷贝节点;否则要深拷贝节点,并将上述得到的节点储存到 ret 内 将 ret 数组转换成 itcast 对象,作为 appendTo 方法的返回值 如果这样做的话,就会在添加样式,只有没拷贝的节点有样式...元素 this.each(function(v) { // 在遍历目标dom元素 target.each(function(t, i) { // 如果当前dom元素为 目标上的第一个.拷贝节点...t.appendChild(node); }); }); // 将每一个添加的dom元素,转换成itcast对象返回,实现链式编程 // 原因:在添加样式,如果这样做的话,只会给没克隆的节点添加样式...两层循环结束,将 ret 转换成 itcast 对象,作为 next 方法的返回值

    1.3K30

    DOM、BOM一些兼容性问题

    而 IE8 支持 querySelectorAll() 和 querySelector() 方法,可以使用它来代替使用 getElementsByClassName() 方法。...previousSibling 方法 var node = this.previousSibling; while(node && 1 !...在 JavaScript中,当一个对象被传递给期望字符串作为参数的函数中(如 window.alert 或 document.write),对象的toString()方法会被调用,然后将返回值传给该函数...if(e.wheelDelta > 0){ // 向上滚动的操作 }else{ // 向下滚动的操作 } 而 FireFox 中使用 detail 来判断( DOMMouseScroll...例如,小写“a” 或大写 “A” 将被报告为 65 在 keydown 和 keyup 中;而在 keypress 中,当按下 “Tab” 键,会输出大写的 A “65”,按 “Tab” 键,按下

    1.6K20

    《前端5分钟》之使用解释器模式实现获取元素Xpath路径的算法

    格式可能长这样: //*[@id="juejin"]/div[2]/main/div/div[1]/article/div[1] 获取元素Xpath路径的应用场景很多,比如我们经常使用的python...爬虫,利用爬虫框架可以通过Xpath路径很方便额控制页面中的某个dom节点,进而获取想要的数据和元素;又比如我们通过发送元素的Xpath路径给后端,后端可以统计某一功能的使用情况和交互数据;又比如分析用户在网站中浏览的热力分布图...但我们还需要注意的一点是,每找到上一层我们还要遍历该元素前面的兄弟元素previousSibling,如果这个兄弟元素名字和它后面的元素名字相同,则在元素名上+1....'|' + sibling.nodeName.toUpperCase() } } sibling = sibling.previousSibling...返回最终的路径数组结果 return path } })() 有了这两个方法,我们就可以轻松获取元素的XPath路径啦,比如: let path = Interpreter(document.querySelector

    1.5K30
    领券