首页
学习
活动
专区
工具
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()-获取集合中第一个匹配元素

8710

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
  • 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

    测试开发进阶(十四)

    当网页加载时,浏览器会创建页面的文档对象模型(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选择文件按钮后,时常点击无效(并不是重复选择文件、按钮初始隐藏无效)。

    18.1K12

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

    前端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

    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学习总结(二)——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

    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
    领券