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

获取被点击元素的同级元素和removeClass纯javascript或没有指令的angular js

获取被点击元素的同级元素可以使用纯JavaScript或没有指令的AngularJS来实现。下面是两种方法的详细说明:

  1. 纯JavaScript方法:
    • 首先,通过事件监听器(如click事件)获取被点击的元素。可以使用document.querySelectordocument.getElementById等方法选择元素。
    • 然后,使用parentNode属性获取被点击元素的父节点。
    • 最后,使用childNodes属性获取父节点的所有子节点,再通过遍历筛选出同级元素。

示例代码如下:

代码语言:javascript
复制

document.addEventListener('click', function(event) {

代码语言:txt
复制
 var clickedElement = event.target; // 获取被点击的元素
代码语言:txt
复制
 var parentElement = clickedElement.parentNode; // 获取父节点
代码语言:txt
复制
 var siblings = Array.from(parentElement.childNodes).filter(function(node) {
代码语言:txt
复制
   return node.nodeType === 1 && node !== clickedElement; // 筛选出同级元素
代码语言:txt
复制
 });
代码语言:txt
复制
 console.log(siblings); // 输出同级元素数组

});

代码语言:txt
复制
  1. 没有指令的AngularJS方法:
    • 首先,在HTML中使用ng-click指令绑定一个点击事件,并传递被点击的元素作为参数。
    • 然后,在控制器中定义点击事件的处理函数,通过传入的参数获取被点击的元素。
    • 最后,使用angular.element函数获取被点击元素的父节点,再使用children方法获取所有子元素,再通过遍历筛选出同级元素。

示例代码如下:

代码语言:html
复制

<div ng-app="myApp" ng-controller="myCtrl">

代码语言:txt
复制
 <button ng-click="getSiblings($event.target)">点击获取同级元素</button>

</div>

代码语言:txt
复制
代码语言:javascript
复制

angular.module('myApp', [])

代码语言:txt
复制
 .controller('myCtrl', function($scope) {
代码语言:txt
复制
   $scope.getSiblings = function(clickedElement) {
代码语言:txt
复制
     var parentElement = angular.element(clickedElement).parent(); // 获取父节点
代码语言:txt
复制
     var siblings = parentElement.children().filter(function() {
代码语言:txt
复制
       return this !== clickedElement; // 筛选出同级元素
代码语言:txt
复制
     });
代码语言:txt
复制
     console.log(siblings); // 输出同级元素数组
代码语言:txt
复制
   };
代码语言:txt
复制
 });
代码语言:txt
复制

这两种方法都可以获取被点击元素的同级元素,并且不依赖于特定的云计算品牌商。

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

相关·内容

angularJSDOM操作

1.querySelectorquerySelectorAll 是W3C提供查询接口,其主要特点如下: ①、querySelector只返回匹配第一个元素,如果没有匹配项,返回null。 ..." src="js/angular.min.js"> var myApp = angular.module('myApp...")).removeClass('test2'); }]); 二.引用jQuery 引用jQuery前提下,$用法基本相同:angular.element...,选择器选择性筛选 clone()-创建一个匹配元素集合深度拷贝副本 contents()-获得匹配元素集合中每个元素元素,包括文字注释节点 css() - 获取匹配元素集合中第一个元素样式属性值...find() - 通过一个选择器,jQuery对象,元素过滤,得到当前匹配元素集合中每个元素后代 hasClass()-确定任何一个匹配元素是否有分配给定(样式)类 html()-获取集合中第一个匹配元素

8110

js如何引用同级元素

具体效果 示例效果 https://coder.itclan.cn/fontend/js/17-yinyong-tongji-elem/ 具体描述 在网页中,同级(兄弟)元素,指的是拥有相同直接父级元素元素...以下是通过原生js实现,点击按钮时,获取按钮值 // 获取同级按钮元素value function getLevelBtnVal(btn) { var p = btn.parentNode...; // 通过点击按钮获取到它父级节点 var children = p.childNodes; // 通过childNodes可以得到父节点所有子节点 // 遍历子节点...,同级元素拥有相同父级元素都是p,那么就可以得到除自身以外同级元素,如果还需要排除同一类别的话,那么可以使用节点nodeType属性来加以区别 Vue版本实现 在Vue里面,就不用类似原生js...', lists: ["JavaScript","HTML","CSS","Vue","React","Angular"], content

7.9K40
  • AngularJS浅谈-博客

    AngularJS 可以克隆重复 HTML 元素。 AngularJS 可以隐藏显示 HTML 元素。 AngularJS 可以在 HTML 元素”背后”添加代码。...AngularJs指令(directive)可以由我们自由扩展。 表现层逻辑:包括应用程序逻辑行为。用javascript定义作为视图控制器逻辑。...,由模型,视图,过滤器,服务等等组成 我们都知道JavaScript很容易就写出全局函数,所以无论是用jQuery还是JavaScript,我们都会使用模块化策略避免写出来函数污染全局。...在每一个HTML文档中,只能有一个AngularJS应用可以自动启动,在HTML文档中第一个找到定义在根元素ng-app指令将会作为自动启动应用。...那我们在js代码中定义模块ng-app有什么关系呢?很明显,它是告诉AngularJS应用在启动时加载指定模块,假设这里ng-app只是放一个标签,而不给它赋值。

    2.4K30

    测试开发进阶(十四)

    当网页加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 节点树中节点彼此拥有层级关系。...同级子节点被称为同胞(兄弟姐妹) 获取页面标签 通过 id 找到 HTML 元素(常用) document.getElementById() 通过标签名找到 HTML 元素 获取出来是列表getElementsByTagName...红色 如果把javascript写在元素上面,就会出错,因为页面上从上往下加载执行javascript去页面上获取元素div1时候,元素div1还没有加载 解决办法: javascript放到页面最下边...innerHTML 属性对于获取替换 HTML 元素内容很有用。.../选择div元素 $('div').parent(); //选择div所有子元素 $('div').children(); //选择div同级元素 $('div').siblings();

    1K30

    2、Angular JS 学习笔记 – 双向数据绑定Scope概念

    从DOM获取到作用域: 作用域附在dom元素$scope属性上,可以获取用来做debug目的,它不太可能在应用中使用。根作用域附在有ng-app指令dom元素上。...指令创建作用域 在大多数情况,指令作用域交互不创建新作用域。无论如何,一些指令,像是ng-controllerng-repeat,创建子作用域并且将子作用域赋予相对应dom元素上。...你可以从dom元素上使用angular.element(aDomElement).scope()函数获取作用域。查看指令文档了解更多关于作用域隔离信息。...应小心脏检查函数中没有任何dom访问,dom访问速度要比访问javascript对象慢很多。 作用域$watch深度 脏检查可以基于三种策略完成:引用、集合内容、值。...你也可以使用apply()在javascript中进入到Angular执行上下文,请记住在大多数地方(controllers,services) apply 已经指令调用用来处理时间。

    13.2K20

    第217天:深入理解Angular双向数据绑定原理

    而将数据显示在页面上,并且有一定交互效果(比如点击等用户操作及对应页面反应)则是js主要完成工作。...2 var app = angular.module(“MyApp”, []);//app是MyApp模块实例 也可以将重复使用指令过滤器之类做成模块便于复用  注意必须指定第二个参数,[]是个空数组...,行为) 5、单向绑定双向绑定  单向绑定: 模型变化过后,自动同步到界面上; 一般展示型数据会用到单项数据绑定;使用表达式方式都是单向  双向绑定: 两个方向数据自动同步: 模型发生变化自动同步到视图上...$scope Scope(作用域) 是应用在 HTML (视图) JavaScript (控制器)之间纽带。 Scope 是一个对象,有可用方法属性。 Scope 可应用在视图控制器上。...第二个requires是依赖列表,也就是可以注入到模块中对象列表。 了解了以上指令,下面进行demo演示: 代码块如下: ? 然后用浏览器打开这个文件 结果如图: ?

    3.6K20

    记录工作中遇到各种问题(Bug,总结,记录)

    第三个坑是它给只读style属性赋值,这种方式在严格模式是被禁止,而这插件正好自个又用了严格模式 坑就坑在:在Angular.JS(1)环境下使用iPad时候才报错,PC上用Angular.JS正常...z-index有拼爹性质, z-index值只决定同一父元素同级元素堆叠顺序。...中性能面板汇总可以看到,在键盘按下松开时候,会触发Angularkeypresskeyup事件,每个耗时几百毫秒 解决办法就是对不需要绑定数据,尽量不用Angular自建绑定,换成普通方式就好...none; 3.不过一般是偷工减料,为了统一起来androidios都能正常,可以利用JS获取元素样式之后,再进行更新,做一个状态叠加 首先,需要给目标元素添加父外层做旋转叠加时用 <a href=...设置picker选择文件按钮后,时常点击无效(并不是重复选择文件、按钮初始隐藏无效)。

    18K12

    jQuery

    ,做得多) 1、http://jquery.com/ 官方网站 2、https://code.jquery.com/ 版本下载 2.jquery加载 将获取元素语句写到页面头部,会因为元素没有加载而出错...$('div').parent(); //选择div元素 $('div').children(); //选择div所有子元素 $('div').siblings(); //选择div同级元素...width()、height() 获取元素widthheight innerWidth()、innerHeight() 包括paddingwidthheight outerWidth...以及marginwidthheight 2、获取元素相对页面的绝对位置 offset() 3、获取浏览器可视区宽度高度 $(window).width(); $(window).height();...事件冒泡作用 事件冒泡允许多个操作集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层同级别捕获事件。

    4K20

    vue响应式原理(数据双向绑定原理)

    比如React,它也有一定程度主张,它主张主要是函数式编程理念,比如说,你需要知道什么是副作用,什么是函数,如何隔离副作用。它侵入性看似没有Angular那么强,主要因为它是软性侵入。...你可以在底层数据逻辑地方用OO设计模式那套理念,也可以函数式,都可以,它只是个轻量视图而已,只做了自己该做事,没有做不该做事,仅此而已。 渐进式含义,我理解是:没有多做职责之外事。...所有绑定起来javascript对象以及DOM元素都将订阅一个发布者对象。...任何时候如果javascript对象或者一个HTML输入字段侦测到发生变化,将代理事件变成发布者-订阅者模式,这会反过来变化广播,并传播到所有绑定javascript对象以及DOM元素上。...angular.js只有在指定事件触发时,进入脏值检测,大致如下: - DOM事件,譬如用户输入文本,点击按钮等(ng-click) - XHR响应事件($http) -

    2.7K40

    Angular快速学习笔记(2) -- 架构

    0. angularangular js angular 1.0 google改名为Angular js 新版本,2.0以上,继续叫angular,但是除了名字还叫angular,已经是一个全新开发框架了...1.1.3 NgModule JavaScript 模块 NgModule 系统与 JavaScript(ES2015)用来管理 JavaScript 对象模块系统不同,而且也没有直接关联。...在模板中,指令通常作为属性出现在元素标签上,可能仅仅作为名字出现,也可能作为赋值目标绑定目标出现。..."> 属性型指令 属性型指令会修改现有元素外观行为。...它工作模型基于人们熟知浏览器导航约定: 在地址栏输入 URL,浏览器就会导航到相应页面 在页面中点击链接,浏览器就会导航到一个新页面 点击浏览器前进后退按钮,浏览器就会在你浏览历史中向前向后导航

    5.2K20

    Angularjs1.X进阶笔记(1)—两种不同双向数据绑定

    我们需要获取到这个DOM元素,然后改变它innerHTML属性,如果是表单元素就修改value。其实Angularjs也是这样做,只不过使用了自己封装方法——$apply()。...而当我们再点击4次数字标签(一共点了5次)后,从控制台可以看出,scope.pagination值已经成为10,而页面上使用ng-bind指令获取结果却依旧是5。...其实这里问题仍然Angularjs运行机制有关,解决方案如下: 解决方案1 使用自定义指令templateUrl属性替换当前指令模板,使用ng-click指令来绑定一个点击响应函数,在响应函数中改变...其基本过程是这样,每当我们使用ng-modelng-bind指令将数据模型中某个变量值html页面上某个标签内容联系起来时,Angular就会把这些变量放进一个WatchCollection集合中...,直到某一次遍历后WatchCollection中变量都没有变化,则Angular会认为当前改动已经稳定了,然后才会将数据模型变化同步到DOM元素上去,也就实现了数据绑定。

    3.5K20

    前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

    、使用cdn 3)、安装node.js,使用npm获取 示例代码: <!...4、HelloController可以获取它所需要$scope对象,则没有必要去创建它,依赖注入 5、当文本框中值发生变化时$scope对象中值立即变化,模型与视图双向绑定 6、没有必要自己调用HelloController...表达式会被立即计算,不像 JavaScriptonchange事件只会在最后一次改变时触发(通常,当用户离开表单元素按回车键时)。当值变化来自于模型时,不会对表达式进行计算。...由于浏览器会优先使用并行方式来加载图片其它内容,所以angular没有机会拦截到数据绑定请求。...练习:购物车 1、双向绑定集合中数据 2、执行移除事件 3、隔行换色、使用angularJS完成 4、点击数量与小计时进行排序(选做) 三、区分UI控制器职责 控制器职责: 1、为应用中模型设置初始状态

    15.3K100

    前端MVC学习总结(二)——AngularJS验证、过滤器、指令

    点击价格与名称可以进行排序,排序时显示向上向下箭头,在搜索框中可以输入查询条件过滤数据。验证搜索框中内容只能是字母与数字,不允许输入其它类型字符。...(directive) 指令(directive)是AngularJS模板标记用于支持JavaScript代码组合。...这将引起控制器附加执行两次。 3.1.3、包含(ng-Include) 获取、编译并引用一个外部HTML片段(也可以是内部) 默认情况下,模板URL强制为使用与应用文档相同域名和协议。...3.1.4、不绑定(ngNonBindable) ngNonBindable指令告诉Angular编译绑定当前DOM元素内容。...这对于要求Angular忽略那些元素中包含Angular指令绑定情况下很有用。这种情况能让你网站实时显示源码。

    15.4K60

    前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

    /angular/ 2)、使用cdn 3)、安装node.js,使用npm获取 示例代码: <!...4、HelloController可以获取它所需要$scope对象,则没有必要去创建它,依赖注入 5、当文本框中值发生变化时$scope对象中值立即变化,模型与视图双向绑定 6、没有必要自己调用HelloController...表达式会被立即计算,不像 JavaScriptonchange事件只会在最后一次改变时触发(通常,当用户离开表单元素按回车键时)。当值变化来自于模型时,不会对表达式进行计算。...对象集合修改将会自动更新视图 为了解决重复元素序列只有一个父元素情况,ngRepeat (不同于其它ng指令)支持扩展重复范围,通过使用ng-repeat-start ng-repeat-end...由于浏览器会优先使用并行方式来加载图片其它内容,所以angular没有机会拦截到数据绑定请求。

    12.6K30

    AnagularJs之directive

    ngdirective从字面上理解就是ng框架一个指令。   ...priority   (Number),可选参数(作为了解,使用几率极小)指明指令优先级,当有多个directive定义在同一个DOM元素时,有时需要明确它们执行顺序。...restrict   (String)可选参数,指明指令在DOM声明形式; 取值: E(DOM元素) A(attr属性) C(class类) M(注释)   默认值为A;可以多个一起用,如EA.表示即可以是元素也可以是属性...template(templatetemplateUrl二选一)   (StingFunction) 可选参数,如果replace为true,则将模版内容替换当前HTML元素,并将原来元素属性、...templateUrl(templatetemplateUrl二选一)   (StingFunction) 可选参数,如果replace为true,则将模版内容替换当前HTML元素,并将原来元素属性

    1.1K10

    AngularVue.js 深度对比

    Vue.js 是开源 JavaScript 框架,能够帮助开发者构建出美观 Web 界面。当其它网络工具配合使用时,Vue.js 优秀功能会得到大大加强。...如果你有深厚 HTML、CSS JavaScript 基础,那么学习 Vue.js 只需几个小时。 Vue 对开发人员最有吸引力地方是:它新颖、轻便,而且复杂性很少甚至没有。...双向绑定 Vue 提供了 v-model 指令(用于更新用户输入事件数据),使得在表单输入结构元素上实现双向绑定变得很容易。它可以选择正确方式来更新输入类型相关元素。 5....指令 Angular 指令(用于渲染指令DOM模板)  可用于创建自定义 HTML 标记。这些是 DOM 元素标记,因为开发者可以扩展指令词汇表并制作自己指令将它们转换为可重用组件。...文档对象模型(DOM) Vue 通过最少量组件重新渲染,可以将模板预编译为 JavaScript。这个虚拟 DOM 允许进行大量优化,这是 Vue Angular 之间主要区别。

    5.4K30

    8分钟为你详解React、Angular、Vue三大框架

    AngularAngularJS区别 Angular没有 "Scope"控制器概念,相反,它使用组件层次结构作为其主要架构特征。...Vue.js可以让你用称为指令(directives)HTML属性来扩展HTML。 特点 1、组件化 Vue 组件扩展了基本 HTML 元素来封装可重用代码。...3、反应式系统 Vue特点是采用了反应式系统,它使用JavaScript对象优化重渲染。...当在变换组件中元素插入移除时,会出现这样情况: Vue会自动检测到目标元素是否应用了CSS变换动画。如果有,CSS变换类将在适当时间添加/删除。...如果没有检测到CSS变换/动画,并且没有提供JavaScript hooks,那么插入/移除DOM操作将在下一帧中立即执行。 ?

    22.1K20
    领券