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

从不是所选e同级的DOM中选择元素

,可以使用以下方法:

  1. 使用CSS选择器:可以使用CSS选择器来选择不是所选元素同级的DOM元素。例如,要选择所有不是所选元素同级的子元素,可以使用CSS选择器 :not()。例如,要选择所有不是 e 元素同级的子元素,可以使用 :not(e)

示例代码:

代码语言:javascript
复制
const elements = document.querySelectorAll(':not(e)');
  1. 使用JavaScript遍历DOM树:可以使用JavaScript遍历DOM树,排除所选元素同级的元素。通过遍历DOM树,可以检查每个元素的父节点,并排除与所选元素相同的父节点的子元素。

示例代码:

代码语言:javascript
复制
function getElementsNotSiblingOf(element) {
  const parent = element.parentNode;
  const siblings = parent.children;
  const elements = [];

  for (let i = 0; i < siblings.length; i++) {
    if (siblings[i] !== element) {
      elements.push(siblings[i]);
    }
  }

  return elements;
}

const e = document.getElementById('e');
const elements = getElementsNotSiblingOf(e);

以上方法可以帮助你从不是所选元素同级的DOM中选择元素。请注意,这些方法是通用的,不仅适用于云计算领域,也适用于其他前端开发场景。

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

相关·内容

XPath知识点梳理

在DOM树形结构中,节点间的关系是既定的,通过节点所在的位置,可以通过路径寻找其他节点或者原子值。     ...轴(axis):   轴其实就是一个在DOM 中的节点查找其他节点的一个方向,轴可定义相对于当前节点的节点集。...比如 当前的节点 book , 若使用相对表达式: title[@lang="en"] 将选择 到title 节点    e..../book表示选择当前节点的父节点下的book节点集合           根元素(/):            如/book表示选择从文档根节点下的book节点集合.          ...注意:查找同级节点是顺序查找,而不是递归查找。 //message[@id=0]/body/preceding-sibling::node() 顺序查找body标签前的所有同级节点。

1.1K40

jQuery学习笔记

100% 完成之后执行 jQuery DOM 获取/设置内容 text() 设置/返回所选元素的文本内容[原型:innerhtml] html() 设置/返回所选元素的内容(含HTML标签) val(...删除元素的class加载 empty() 删除被选元素的子元素 jQuery CSS 获取/设置 addClass() 向被选元素添加一个或多个Class类 removerClass() 从被选元素中删除指定的一个或多个...,指定标签、类名、id、name等) 水平遍历DOM树 siblings() 返回被选元素的所有同级元素(支持过滤参数) next() 返回被选元素的下一个同级元素 nextAll() 返回被选元素之后的所有同级元素...nextUntil() 返回被选元素与参数之间的所有同级元素 prev() 返回被选元素的上一个同级元素 prevAll() 返回被选元素之前的所有同级元素 prevUntil...() 返回被选元素与参数之间的所有同级元素 遍历 过滤 first() 返回被选元素的首个子元素 last() 返回被选元素的最后子元素 eq() 返回被选元素中带有指定索引的元素(可选参数

7.4K30
  • 前端自动化测试框架cypress

    .parents() // 用来获取DOM元素第一层元素 .parent() // 用来获取DOM元素的所有同级元素 .siblings() // 用来获取指定DOM对象的第一个元素 .first...() // 用来获取指定DOM对象的最后一个元素 .last() // 用来匹配DOM对象紧跟着的下一个同级元素 .next() // 用来匹配给定的DOM对象的所有同级元素 .nextAll...() // 用来匹配给定DOM对象之后的所有同级元素直到遇到Until里定义的元素为止 .nextUntil() // 用来匹配给定DOM对象紧跟着的上一个同级元素 .prev() // 用来匹配给定的...DOM对象之前的所有同级元素 .prevAll() // 用来匹配给定DOM对象之后的所有同级元素直到遇到Until里定义的元素为止 .prevUntil() // 用来遍历数组及其类似结果 ....each() // 用来在元素或者数组中的特定索引处获取DOM元素。

    2.1K40

    Cypress系列(17)- 查找页面元素的辅助方法

    li 的同级元素有其他三个 li 元素 .first() 匹配给定的 DOM 元素列表中的第一个元素 重点:如果是单个 DOM 元素调用此方法,则返回自己 测试文件代码 ? 测试结果 ?....last() 匹配给定的 DOM 元素列表中的最后一个元素 重点:如果是单个 DOM 元素调用此方法,则返回自己 测试文件代码 ? 测试结果 ?...next家族 .next() 获取给定的 DOM 元素后面紧跟的下一个同级元素 .nextAll() 获取给定的 DOM 元素后面紧跟的所有同级元素 .nextUntil(selector) 获取给定的...prev家族 .prev() 获取给定的 DOM 元素前面紧跟的上一个同级元素 .prevAll() 获取给定的 DOM 元素前面紧跟的所有同级元素 .prevUntil() 获取给定的 DOM 元素前面紧跟的所有同级元素....eq() 在元素或者数组中的特点索引处获取 DOM 元素 作用跟 选择器一样,只不过下标从0开始 :nth-child() 测试文件代码 ? 测试结果 ?

    2.3K20

    jQuery DOM操作

    DOM对象、HTML string、 jQuery对象 如果参数是function,function可以返回DOM对象、HTML string、 jQuery对象,参数是集合中的元素位置与原来的...6、.insertBefore(target) 把对象插入到target之前(同样不是头部,是同级),和before的写法相反,用途一样 ?...7、.after(content) / .after(function(index)) 和before相反,在目标对象后面插入同级兄弟元素(不是尾部,而是外面,和对象并列同级),参数和append类似...三、删除元素 1、.remove([selector]) 删除被选元素(及其子元素) $("#div1").remove(); 我们也可以添加一个可选的选择器参数来过滤匹配的元素 $('div').remove...('.test'); 2、.empty() 清空被选择元素内所有内容,包括文本内容和所有子元素 原本内容 ?

    99130

    jsoup爬虫工具的简单使用

    Elements contentEs = doc.select("a.content-item,expert"); 因为获得的不是一个元素,所以使用get(index)方法,获得对应的元素,...~ siblingX: 查找A元素之前的同级X元素,比如:h1 ~ p • el, el, el:多个选择器组合,查找匹配任一选择器的唯一元素,例如:div.masthead, div.logo...伪选择器selectors • :lt(n): 查找哪些元素的同级索引值(它的位置在DOM树中是相对于它的父节点)小于n,比如:td:lt(3) 表示小于三列的元素 • :gt(n):查找哪些元素的同级索引值大于...元素 • :has(seletor): 查找匹配选择器包含元素的元素,比如:div:has(p)表示哪些div包含了p元素 • :not(selector): 查找与选择器不匹配的元素,比如...i)login) • :matchesOwn(regex): 查找自身包含文本匹配指定正则表达式的元素 • 注意:上述伪选择器索引是从0开始的,也就是说第一个元素索引值为0,第二个元素index

    1.8K40

    前端学习(15)~css3学习(九):选择器详解

    E:last-child 匹配父元素的最后一个子元素E。 E:nth-child(n) 匹配父元素的第n个子元素E。注意,盒子的编号是从1开始算起,不是从0开始算起。...理解: (1)这里我们要好好理解父元素的含义,它指的是:以 E 元素的父元素为参考。 (2)注意:以上选择器中所选到的元素的类型,必须是指定的类型E,如果选不中,则无效。...这个要好好理解,具体可以看CSS参考手册中的E:nth-child(n)的示例。我们可以理解成:先根据选择器找到选中的全部位置,如果发现某个位置不是类型E,则该位置失效。...2、格式:(第二部分) E:first-of-type 匹配同类型中的第一个同级兄弟元素E。 E:last-of-type 匹配同类型中的最后一个同级兄弟元素E。...E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E。 E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E。

    51020

    XML基础

    (4)元素节点的文本存储在文本节点中。2005中,元素节点拥有一个值为“2005”的文本节点,“2005”不是元素的值。...1.父级、子级和同级节点 节点树中的节点彼此之间存在等级关系,可以使用父级、子级和同级节点描述这种关系。父节点拥有子节点,位于相同层级上的子节点称为同级节点。 (1)在节点树中,顶端的节点为根节点。...(node) 从调用节点中删除子节点node //使用属性和方法从books.xml中的元素中获取文本的JavaScript代码 var txt=xmlDoc.getElementsByTagName...//使用属性和方法从books.xml中的元素中获取文本的Java代码 String title=doc.getElementsByTagName("title") .item(0)...(2) 使用DOM解析XML文档。 ​巩固练习​ 一、选择题 1.以下针对XML文档的定义和规范的有( )。

    13310

    Web前端JQuery面试题(二)

    DOM对象,DOM为文本对象模型,DOM的每一个页面都是一个DOM对象。通过JavaScript方法获取页面元素的对象,就是DOM对象。...*= value] 匹配有包含某些值的特定元素 [selector1][selector2] 同时满足多个条件使用 子元素过滤选择器: :nth-child 从1开始的,匹配每个父元素下第n个元素...($div); append(function (index,html)) 同上 appendTo: 把选择的元素追加到另一个指定的元素中 appendTo(content)将一个元素插入另一个指定的元素中...): 向所选择的元素外部前面插入内容 before(function) insertAfter(content) 选择的元素插入另一个元素外部后面 insertBefore(content) 选择元素插入另一个元素外部前面...wrap(elem): 将所有选择的元素用其他Dom元素包裹起来 wrap(fn) unwrap() 移除所选元素的父元素或包裹的标记 wrapAll(html),wrapAll(elem) wrapInner

    1.9K30

    DOM操作

    所以,DOM可以理解成网页的编程接口。 DOM 提供了一种表述形式将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说,它将web 页面和脚本或编程语言连接起来了。 ?...document对象包含了文档的基本信息,我们可以通过JavaScript对HTML页面中的所有元素进行访问、修改。 1.3节点 DOM的最小组成单位叫做节点(node)。...1.父节点关系(parentNode):直接的那个上级节点 2.子节点关系(childNodes):直接的下级节点 3.同级节点关系(sibling):拥有同一个父节点的节点 DOM提供操作接口...image.png 4.查询元素有几种常见的方法?ES5的元素选择方法是什么?...NodeList对象不是动态集合,所以元素节点的变化无法实时反映在返回结果中。

    1.9K60

    一些你可能不知道的奇葩调试技巧

    我们可以在想要调试的地方右键,选择 Add conditional breakpoint 然后在条件中输入断点的生效条件,例如我们可以让它在这个位置只打印日志不进行暂停: 还有一些你可能会使用到的调试条件...; console.log("snapshotting DOM: ", domStr); doms.push(domStr); }, 1000); 监控网页中获得焦点的元素 (function...const isBold = (e) => { let w = window.getComputedStyle(e).fontWeight; return w === "bold" || w...=== "700"; }; Array.from(document.querySelectorAll("*")).filter(isBold); 调试当前选择的元素 $0 控制台中的内容是对元素检查器中当前选定元素的自动引用...例如 ,我们可以检查当前所选元素的事件侦听器:getEventListeners($0): 调试所选元素的所有事件:monitorEvents($0) 调试所选元素的特定事件:monitorEvents

    19510

    Xpath、Jsoup、Xsoup(我的Java爬虫之二)

    从Xpath说起 什么是Xpath XPath是W3C的一个标准。它最主要的目的是为了在XML1.0或XML1.1文档节点树中定位节点所设计。...语法 选取结点 表达式 描述 / 从根节点选取 // 从匹配选择的当前节点选择文档中的节点,而不考虑它们的位置。 . 选取当前结点 .....el:多个选择器组合,查找匹配任一选择器的唯一元素,例如:div.masthead, div.logo 伪选择器selectors :lt(n): 查找哪些元素的同级索引值(它的位置在DOM树中是相对于它的父节点...)小于n,比如:td:lt(3) 表示小于三列的元素 :gt(n):查找哪些元素的同级索引值大于n,比如: div p:gt(2)表示哪些div中有包含2个以上的p元素 :eq(n): 查找哪些元素的同级索引值与...i)login) :matchesOwn(regex): 查找自身包含文本匹配指定正则表达式的元素 注意:上述伪选择器索引是从0开始的,也就是说第一个元素索引值为0,第二个元素index为1等 可以查看

    1.9K20

    Jsoup选择器语法

    它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQuery的操作方法来取出和操作数据。...el, el, el:多个选择器组合,查找匹配任一选择器的唯一元素,例如:div.masthead, div.logo 3、Selector伪选择器语法 :lt(n): 查找哪些元素的同级索引值(它的位置在...DOM树中是相对于它的父节点)小于n,比如:td:lt(3) 表示小于三列的元素 :gt(n):查找哪些元素的同级索引值大于n,比如: div p:gt(2)表示哪些div中有包含2个以上的p元素 :eq...(n): 查找哪些元素的同级索引值与n相等,比如:form input:eq(1)表示包含一个input标签的Form元素 :has(seletor): 查找匹配选择器包含元素的元素,比如:div:has...i)login) :matchesOwn(regex): 查找自身包含文本匹配指定正则表达式的元素 注意:上述伪选择器索引是从0开始的,也就是说第一个元素索引值为0,第二个元素index为1等

    1.8K30

    React-Hoos 下动态加载使用 Layui 上传文件控件 【稀里糊涂小坑不断!】

    背景 最近接触到 【React-Hook】 这一前端框架; 听周围小伙伴一顿猛夸, 想到正好可是试试: 能否优化我的后台 商品 SKU 数据处理操作 ; 减少繁杂的 DOM 操作(超级费劲...) 核心需求便是: 根据所选则的属性信息,动态出现多个 sku 规格条目; 其中需要图片的上传,截图参考如下 ---- 之前单纯使用 LayUI 的代码倒也没啥问题,但是,在 React...Hook 中动态添加时,就有多多少少的问题了 ▶ 第一个小坑 —— [动态添加的记录中,“<img>“ 标签只会出现第一个] 这种情况是在对比页面元素排版错位是发现的, 简单描述情况就是: 通过... 和 标签在同级 div 下,竟然就没事了!...; 一种情况: 动态遍历生成的上传控件, 点击时第一次选择了图片无反应, 紧接着触发了第二次选择图片的情况,然后可以上传 一种情况: 动态生成的上传控件,会不定时前几个能点,

    81740

    探索 React 内核:深入 Fiber 架构和协调算法

    从 render 方法返回的不可变 React 元素树,通常称为虚拟DOM。 在早期,这个术语有助于帮助人们理解 React,但也引起了混乱,并且在React文档中不再使用。”...从 React 元素到 Fiber 节点 React 中的每个组件都有一个 UI 表示,我们可以称之为从 render 方法返回的一个视图或模板。...与 React 元素不同, Fiber 并不是每次渲染都会重新创建,它们是用来保存组件 state 和 DOM 的可变数据结构。 之前聊到过,框架执行的活动,取决于 React 元素的类型。...如果从 render 方法不再返回相应的 React 元素,React 可能还需要根据 key 属性来移动或删除层级结构中的 fiber 节点。...因此,Fiber中的 effect 基本上定义了实例在处理更新后需要完成的 work[15]: •对于 host 组件(dom元素),包括添加、更新或删除元素。

    2.2K20

    DIff算法看不懂就一起来锤我(带图)

    // createElm是用于创建一个dom元素插入到vnode中(新的虚拟DOM) createElm(vnode, insertedVnodeQueue)...== null) { // 把dom元素插入到父元素中,并且把旧的dom删除 api.insertBefore(parent, vnode.elm!...---- updateChildren(核中核:判断子节点的差异) 这个函数我分为三个部分,部分1:声明变量,部分2:同级别节点比较,部分3:循环结束的收尾工作(见下图); image.png 同级别节点比较的五种情况...,它就是等于旧节点数组中的结束节点对应的dom元素(oldCh[oldEndIdx + 1].elm) before = newCh[newEndIdx + 1] == null...元素中的b,c间插入一个z元素 没有设置key 当设置了key: image.png Diff操作可以更加准确;(避免渲染错误) 实例:a,b,c三个dom元素,修改了a元素的某个属性再去在a元素前新增一个

    78430

    学习zepto.js(对象方法)

    学习zepto.js(对象方法)[6] first: 获取当前对象集合中的第一个dom元素。...$("div").first();// 返回第一个div对象(zepto对象) //相当于 $("div").eq(0); 与之对应的是last last: 获取当前对象集合中的最后一个dom元素。...(dom对象,不是zepto对象) $("div").get();      //所有div对象组成的一个数组 该方法与eq方法的区别在于,eq返回的是zepto对象,而get返回的是dom对象,$()...node赋值为node的父节点, 然后判断,如果节点不是document并且该节点不存在于ancestors数组中,则将节点push至数组,并返回node。...$("p").siblings();      // 获取所有p标签的同级标签 $("p").siblings(".ad");   // 所有的p标签的同级的className包含ad的元素 通过siblings

    2.6K80

    前端常见技术点 - CSS DOM 布局(43问)

    CSS 选择器是从右往左解析的,这样效率较高,从子元素向上寻找父元素的情况在大多数正常情况下都比正向从父元素查找子元素要快得多,从左到右的查找在大多数规则读到最后(最右)才会发现是不匹配的,这样会做费时耗能...两个冒号和一个冒号的作用其实一致的,只是在 CSS3 中为了区分伪类选择器和伪元素选择器,在语义上更清晰明了; 伪类选择器::hover :link :active :target :not(s) :focus...等,当按百分比设定它们时,依据的也是父容器的宽度,而不是高度。...一般有定位属性的元素会高于无定位属性的同级元素。...都有定位属性的同级元素,z-index 大者居上;如果是非同级的元素, 则会忽略元素本身 z-index,取与对比元素同级的祖先元素的 z-index 属性,大者居上 。

    1.5K30
    领券