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

如何在单击按钮时按类名获取兄弟元素?

在单击按钮时按类名获取兄弟元素可以通过以下方式实现:

  1. 首先,给按钮添加一个点击事件的监听器。可以使用JavaScript的addEventListener方法来实现,监听click事件。
  2. 在事件处理程序中,通过this关键字获取到当前被点击的按钮元素。
  3. 使用parentNode属性获取到按钮元素的父级元素。
  4. 使用querySelectorAll方法结合CSS类名选择器来获取兄弟元素。该方法返回一个包含符合选择器条件的元素集合。
  5. 遍历兄弟元素集合,判断每个元素是否包含目标类名。可以使用classList属性的contains方法来实现。
  6. 将符合条件的兄弟元素存储在一个数组中或执行相应操作。

以下是示例代码:

代码语言:txt
复制
// 获取按钮元素
var button = document.getElementById('button');

// 添加点击事件监听器
button.addEventListener('click', function() {
  // 获取按钮的父级元素
  var parentElement = this.parentNode;

  // 获取兄弟元素
  var siblings = parentElement.querySelectorAll('.target-class');

  // 遍历兄弟元素集合
  for (var i = 0; i < siblings.length; i++) {
    var sibling = siblings[i];
    // 判断是否包含目标类名
    if (sibling.classList.contains('target-class')) {
      // 执行相应操作,比如输出兄弟元素的文本内容
      console.log(sibling.textContent);
    }
  }
});

在上述代码中,首先通过getElementById方法获取到按钮元素,然后使用addEventListener方法添加点击事件的监听器。在事件处理程序中,通过this关键字获取到按钮元素,再通过parentNode属性获取到按钮元素的父级元素。接下来,使用querySelectorAll方法结合CSS类名选择器获取到父级元素下所有具有目标类名的兄弟元素。最后,遍历兄弟元素集合,使用classList属性的contains方法判断每个元素是否包含目标类名,并执行相应的操作。

在腾讯云中,可以使用Tencent Cloud开发平台提供的云服务来支持相关的应用场景。具体可参考腾讯云的云产品文档或官方网站获取更详细的信息。

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

相关·内容

如何遍历DOM

简介 我们知道可以使用document对象的内置方法通过ID,,标签名和查询选择器来访问HTML元素。...8 注释节点,<!...除了nodeType之外,还可以使用nodeValue属性获取文本或注释节点的值,并使用nodeName获取元素的标签名。...当用户将鼠标悬停在一个元素上,或单击一个元素,或下键盘上的一个特定键,这些都是事件类型。在这个特殊的例子中,我们希望我们的按钮侦听并准备在用户单击执行操作。...单击按钮,事件将触发。 总结 在本文中,我们了解了DOM 是如何构造成节点树的,节点树通常是HTML元素、文本或注释,我们创建了一个脚本,允许用户修改网站,而不必手动在开发人员控制台中输入代码。

9K30

学习jQuery这一篇就够了

addClass() 方法描述:为每个匹配的元素添加指定的样式。...注意:如果存在(不存在)就删除(添加)一个样式 需求描述:当单击按钮的时候,隐藏 div,再次单击按钮的时候,显示 div .hide { width: 100px; height...需求描述:为按钮添加单击事件,当按钮单击的时候,向控制台输出 “按钮单击了” 按钮 $('button').on('click',function () {...需求描述:为 ul 下的所有 li 添加单击事件,要求将该单击事件委托给 ul,当单击 li ,所对应的 li 背景变为红色 1111 2222</...需求描述:为按钮绑定一个单击函数,然后点击按钮,在控制台输出 “按钮单击了” 按钮 $('button').click(function () { console.log

99350
  • 原生 JS DOM 常用操作大全

    getElementsByCalssName (class) 以class获取元素参数 calss返回 对应元素对象集合 盒子1 盒子2 首页 产品 querySelector...;按住不放,重复触发keypress下键盘上的字符键触发;按住不放,重复触发,不识别功能键, 箭头,ctrl,shift 等keyup释放键盘上的键触发e.keyCode当用户下按键获取按键...e.target 指向的是事件触发元素 别忘了e.通常情况下e.target 和 this 的指向是一致的 注意:有一种情况不同,那就是在事件冒泡(父子元素有相同事件,单击元素,父元素的事件处理函数也会被触发执行...、disabled 获取属性的值 元素对象.属性 设置属性的值 元素对象.属性=值 按钮 样式属性操作 通过 js 修改元素大小,颜色,位置等模式 Element.style...null 可使元素置空 Element.classList.add ("") // 添加操作 可添加多个 不会覆盖原有的 Element.classList.remove("移除

    10210

    强强联合!PBI文件做数据分析服务器,PA实现自动数据更新 | PBI实战应用

    | Power Automate实战案例》,从业务系统里导出的(《怎么自动登录公司系统、导出数据?...“数据/获取数据/来自数据库/自Analysis Services”: 在弹出的数据连接向导对话框中粘贴刚复制的“服务器名称”: 选择相应的模型,如果只打开一个PBID文件,则只有一个: 可以按需要修改数据连接的文件...Step-01 新建流后,添加“聚焦窗口”步骤 在聚焦窗口使用“标题和/或”的查找模式,并可以通过“选择窗口”功能(类似于前面文章中捕获UI元素的方式,在出现红框Ctrl键+鼠标左键)获得...PBI窗口的标题和名称: Step-02 单击“主页”菜单 添加“单击窗口中的UI元素”操作,在参数中添加UI元素(主页): Step-03 单击“刷新”按钮 添加“单击窗口中的UI元素”操作,...在参数中添加UI元素(刷新按钮): 这样,我们就可以通过Power Automate找打PBI窗口,并依次点击“主页”、“刷新”按钮,实现数据的刷新: 实际上,Power BI和Power Automate

    2.1K50

    javaWeb核心技术第五篇之jQuery

    属性 - attr():设置或者获取元素的属性 - 设置属性(给标签添加属性) - 格式1:设置单个属性 "jq对象.attr("属性","值...元素.removeClass():移除指定的样式 - 元素.toggleClass("属性值"):切换 */ /* 回顾: jQuery:js库(js框架)对js进行封装,本质上就是外部的...value的值 //b.获取所对应的市数组 //c.获取市的下拉选对象 //d.遍历市数组,将每一个市拼成option插入到市的下拉选中 案例2-左右选择 需求分析: 当点击不同的按钮...技术分析: 事件 文档处理 //////////////////// 步骤分析: 1.确定事件(单击事件) 给按钮派发单击事件 2.编写函数 //a.将左边选中的第一个插入到右边.../>点击下列按钮先自动重置页面 <input type="button" value=" 选择 id=two 所有子<em>元素</em>

    8K10

    Bootstrap源码分析之dropdown

    ,然后让子级的列表dropdown-menu绝对定位实现,还需要加一个单击点作为设置data-toggle=”dropdown”才能做关联。...插件的支持 源码分析: 1、caret:实现向下的三角形,利用边框实现的     1.1、边框颜色默认是字体颜色     1.2、三角形的实现:边框要有宽度,然后相邻两边需有宽度,但颜色透明;最后还需要元素为行内块元素...5、如果用Js插件调用,基础方法都要自己调用才行,在创建实例只会绑定toggle事件。...7、dropdown-backdrop:用于移动没有单击事件的处理 8、keydown:当dropdown按钮获取焦点的时候,下键可以展开,上键收缩的功能 9、data-target和herf=”...#id”:是为了实现单击,展开指定的下拉列表,默认是展开与按钮后面兄弟节点: Index</

    3K70

    JQuery从入门到实战

    alert("你输入完成啦..."); }); 2.3、时间的绑定和解绑 绑定事件 //jQuery 对象.on(事件名称,执行的功能); //给btn1按钮绑定单击事件...3、JQuery选择器 3.1、基本选择器 选择器:类似于 CSS 的选择器,可以帮助我们获取元素。 例如:id 选择器、选择器、元素选择器、属性选择器等等。...$("元素[属性]") let in1 = $("input[type]"); //alert(in1.length); //2.属性值选择器 $("元素[属性...before(element):添加到当前元素的前面,两者之间是兄弟关系,由添加者对象调用。 after(element):添加到当前元素的后面,两者之间是兄弟关系,由添加者对象调用。...remove():删除指定元素(自己移除自己)。 操作样式 addClass(value):给指定的对象添加样式。 removeClass(value):给指定的对象删除样式

    15.3K30

    JavaScript(十二)

    事件流 ---- 最早的两大浏览器厂商(IE 及 Netscape)在如何在看待浏览器事件方面还是一致的。比如说,如果你单击了某个按钮,他们都认为单击事件不仅仅发生在按钮上。...换句话说,在单击按钮的同时,你也单击按钮的容器元素,甚至也单击了整个页面。 事件流描述的是从页面中接收事件的顺序。...,要在按钮单击执行一些 JavaScript,可以像下面这样编写代码: <input type="button" value="Click Me" onclick="alert('Clicked...这个事件是 HTML 事件 blur 的通用版本 鼠标事件 DOM3 级事件中定义了 9 个鼠标事件: click: 在用户<em>单击</em>主鼠标<em>按钮</em>(一般是左边的<em>按钮</em>)或者<em>按</em>下回车键<em>时</em>触发 dblclick:...在用户双击主鼠标<em>按钮</em>(一般是左边的<em>按钮</em>)<em>时</em>触发 mousedown: 在用户<em>按</em>下了任意鼠标<em>按钮</em><em>时</em>触发 mouseup: 在用户释放鼠标<em>按钮</em><em>时</em>触发 mouseenter: 在鼠标光标从<em>元素</em>外部首次移动到<em>元素</em>范围之内<em>时</em>触发

    2.9K20

    python Tutorial

    引用System.IO 到全局空间: from System.IO import * 创建FileSystemWatcher 实例并设置路径属性到当前路径下: w = FileSystemWatcher...Task 3: 在Python 中定义事件 最后,再看一下如何在Python代码中获取事件处理语法(event handler ): pyevent - 该模块提供Python事件支持 make_event...import * 创建 Form 实例并显示它: f = Form() f.Show()        你可以下alt-tab或查看运行程序,因为它可能不会跳到您桌面的最上面。...= "Hi" 在单击一会之后,form 会变得相当“拥挤”, 现在我们清空它: f.Controls.Clear() f.Close() 下Ctrl+Z 或 F6 回车退出IronPython...通过运行计算器 (that is, register event handlers for the UI), 敲入: calculator.enliven(w) 单击计算器按钮并对表达式进行求值。

    1.7K50

    JS事件篇

    抽离出按钮点击函数的小案例 parentNode :获取一个元素的父元素 innertext :获取到一个标签里面的文本内容 获取兄弟节点,也可能会获取到空白节点 获取兄弟元素 节点的属性 通过nodevalue...).innerHTML 来获取id为aa的对象的内嵌内容; 也可以对某对象插入内容, document.getElementById(‘abc’).innerHTML=’这是被插入的内容’; ---...VS firstElementChild获取当前元素第一个子元素 firstElementChild不支持IE8和一下的浏览器 ---- 抽离出按钮点击函数的小案例 <!...和Innerhtml类似,但是它会自动将html标签去除掉 ---- 获取兄弟节点,也可能会获取到空白节点 获取到的是空白文本节点 ---- 获取兄弟元素 获取前一个兄弟元素,IE8不支持..."); //调用拖拽函数 moveWithMe(d1); //封装一个拖拽函数 function moveWithMe(obj) { //当鼠标在obj区域里面

    12.6K10

    C#学习笔记—— 常用控件说明及其属性、事件

    (12)AcceptButton 属性:该属性用来获取或设置一个值,该值是一个按钮的名称,当 Enter 键就相当于单击了窗体上的该按钮。...(13)CancelButton 属性:该属性用来获取或设置一个值,该值是一个按钮的名称,当 Esc 键就相当于单击了窗体上的该按钮。...可以通过单击向上和向下按钮向上和向下箭头键来增大和减小数字,也可以直接输入数字。单击向上箭头键,值向最大值方向增加;单击向下箭头键,值向最小值方向减少。该控件在工具箱中的图标为 。...2、常用事件: (1)Click事件:当用户用鼠标左键单击按钮控件,将发生该事件。 (2)MouseDown事件:当用户在按钮控件上下鼠标按钮,将发生该事件。...设计时单击Image属性,在其后将出现【…】按钮单击按钮将出现一个【打开】对话框,在该对话框中找到相应的图形文件后单击【确定】按钮。产生一个Bitmap的实例并赋值给Image属性。

    9.7K20

    JS快速入门(二)

    父节点拥有子节点,同级的子节点被称为同胞(兄弟或姐妹) 常用节点获取方法和属性 要进行 DOM 操作,首先要获取到需要操作的节点或节点集合,接下来以下面的示例代码为基础,介绍常用的 DOM 获取方法和属性...() 获取带有指定标签名的节点集合 getElementsByClassName() 获取带有指定的节点集合 querySelector() 获取指定选择器或选择器组匹配的第一个节点 querySelectorAll...属性返回一个元素类属性集合(这里可以简单理解为的集合),通过使 用 classList 中的方法可以方便的访问和控制元素,达到控制样式的目的 classList 常用方法: 方法 说明...add(class1, class2, …) 添加一个或多个 remove(class1, class2, …) 移除一个或多个 replace(oldClass, newClass) 替换...contains(class) 判定是否存在,返回布尔值 toggle(class, true|false) 如果类存在,则移除它,否则添加它第二个参数代表无论是否存在,强制 添加(true

    6.6K30

    第50次文章:JQuery基础

    (标签) 1、基本语法学习 (1)事件绑定 //1.获取b1按钮 $("#b1").click(function () { alert("abc"); }); (2)入口函数 $(function...() { //给b1按钮添加单击事件 //1.获取b1按钮 $("#b1").click(function () { alert("abc"); })...语法:$("html标签名")获得所有匹配标签名称的元素 id选择器。语法:$("#id的属性值")获得与指定id属性值匹配的元素 选择器。...语法:$("A[属性]")包含指定属性的选择器 属性选择器。语法:$("A[属性='值']")包含指定属性等于指定值的选择器 复合属性选择器。...语法:$("A[属性='值'][]...")包含多个属性条件的选择器 (4)过滤选择器 首元素选择器。语法::first 获得选择的元素中的第一个元素元素选择器。

    1.6K30

    VBA专题10-8:使用VBA操控Excel界面之在功能区中添加内置控件

    本文重点讲解如何在功能区中添加不同类型的内置控件。 添加普通按钮和切换按钮 下面的步骤来添加普通按钮和切换按钮(例如,拼写和删除线控件): 1. 下载并安装Custom UI Editor。...如果要在其他内置选项卡中插入按钮,那就使用其他选项卡的idMso替换掉TabHome。前面的文章中已经介绍过如何获取识别内置选项卡的idMso的文件。 组元素: ?...按钮元素: 这个idMso属性的值指定内置控件的名字,本例中,为拼写控件。 切换按钮元素: 删除线控件是一个切换按钮。...添加不同类型的控件 在本例中,你将学习如何在自定义选项卡中添加8个按钮(其中3个水平排列且没有标签)、2个切换按钮、1个拆分按钮、4个对话框启动器、2个组合框、2个菜单、2个库、1个标签控件、1个编辑框...添加通用控件 当在功能区中添加内置控件,也可以使用控件元素而不是指定其类型。这样可以用于所有内置控件而不管其实际类型。如下面的XML代码所示: ? ? 下图展示了上述XML代码的效果: ?

    6.5K30

    excel常用操作大全

    如果菜单中未显示最近使用的文件,请取消“最近使用的文件列表”前的复选框。 3.在EXCEL中输入“1-1”和“1-2”等格式后,将成为日期格式,1月1日和1月2日。我该怎么办?...在EXCEL菜单中,单击文件-页面设置-工作表-打印标题;您可以通过下折叠对话框的按钮并用鼠标划定范围,将标题设置在顶端或左端。这样,Excel会自动将您指定的部分添加为每页的页眉。...要将格式化操作复制到数据的另一部分,请使用“格式化画笔”按钮。选择具有所需源格式的单元格,单击工具栏上的“格式画笔”按钮,鼠标变成画笔形状,然后单击要格式化的单元格以复制格式。...,然后单击“添加”按钮保存输入的序列。当您将来使用它,只需输入张三,然后将光标指向单元格右下角的填充手柄,并沿着要填充的方向拖动填充手柄,您的自定义序列就会出现。...28、命名工作表应注意的问题 有时,为了直观起见,经常需要重命名工作表(Excel中的默认表是sheet1、sheet2.)。重命名,最好不要使用现有的函数名作为表,否则在以下情况下会有歧义。

    19.2K10

    JavaScript——DOM基础

    根据返回元素对象集合 document.getElementsByClassName(''); querySelector返回指定选择器的第一个元素对象 document.querySelector...('.'); document.querySelector('#ID'); document.querySelector('标签名'); querySelectorAll()返回指定选择器的所有元素对象集合...简单理解:触发---相应机制 网页中的每个元素都可以产生某些可以触发JavaScript的事件,例如,我们可以在用户点击某按钮产生一个事件,然后去执行某些操作。...事件源:事件被触发的对象,谁被点击---按钮 事件类型:如何触发,什么事件,比如鼠标点击(onclick)还是鼠标经过或者是键盘下。 事件处理程序:通过一个函数赋值的方式完成。...class因为是个保留字,因此使用className来操作元素属性 className会直接更改元素,会覆盖原先的 注意:如果想要保留原先的,可以选择多选择器 this.className

    6.6K20
    领券