首页
学习
活动
专区
工具
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元素

    2K40

    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() 清空被选择元素内所有内容,包括文本内容和所有子元素 原本内容 ?

    98630

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

    50020

    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.8K60

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

    我们可以在想要调试地方右键,选择 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

    17610

    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.6K20

    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.7K30

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

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

    79340

    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元素前新增一个

    75130

    探索 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

    学习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

    jQuery

    操作 jQuery 方法: text() - 设置或返回所选元素文本内容 html() - 设置或返回所选元素内容(包括 HTML 标记) val() - 设置或返回表单字段值 attr()...删除元素/内容 remove() - 删除被选元素(及其子元素) remove() 添加参数,删除时对该元素进行过滤 empty() - 被选元素删除子元素 jQuery 操作 CSS addClass...() - 向被选元素添加一个或多个css类 removeClass() - 被选元素删除一个或多个css类 toggleClass() - 对被选元素进行添加/删除类切换操作 css() - 设置或返回样式属性...树 children() - 所有直接子元素 find() - 被选元素所有后代元素,div下所有span:$("div").find("span"); 在 DOM水平遍历 有许多有用方法让我们在...prev() - 前面的同胞元素 prevAll() prevUntil()  遍历- 过滤 first() last() eq() - 返回被选元素带有指定索引号元素(索引号 0 开始) filter

    4.6K10
    领券