使用angular.element()获取一个dom的方法。

1.可以使用jquery的选择器

2.可以使用javascript的原生查找元素的方法

下面是angular.element()提供的方法

<input type="checkbox" class="input" />
  <input type="text" class="input1" value="值" />
  <div class="test">div1</div>
  <div class="test">div2</div>
  <div class="test1">
    <p>子元素</p>
  </div>
  <div class="test2" data-value="wwe">
    <!--注释-->
    <p>子元素1</p>
  </div>
  <div class="test3 test4">
    <p>p1</p>
    <p class="p2">p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>p5</p>
    <span> 
      span1
    </span>
  </div>
  <script>
    //bind() - 为一个元素绑定一个事件处理程序
    //data()-在匹配元素上存储任意相关数据
    //on() - 在选定的元素上绑定一个或多个事件处理函数
    //off() - 移除一个事件处理函数
    //one() - 为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次
    //ready()-当DOM准备就绪时，指定一个函数来执行
    //removeData()-在元素上移除绑定的数据
    //triggerHandler() -为一个事件执行附加到元素的所有处理程序
    //unbind() - 从元素上删除一个以前附加事件处理程序

    //addClass()-为每个匹配的元素添加指定的样式类名
    angular.element(document.querySelectorAll(".test")).addClass("asd");

    //after()-在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点
    angular.element(document.querySelector(".test")).after("<p>我是通过after()添加进来的</p>");

    //append()-在每个匹配元素里面的末尾处插入参数内容
    angular.element(document.querySelector(".test")).append("<p>我是通过append()添加进来的</p>");

    //attr() - 获取匹配的元素集合中的第一个元素的属性的值
    console.log(angular.element(document.querySelector(".test")).attr("class"));

    //children() - 获得匹配元素集合中每个元素的子元素，选择器选择性筛选
    console.log(angular.element(document.querySelector(".test1")).children());

    //clone()-创建一个匹配的元素集合的深度拷贝副本
    angular.element(document.querySelector(".test")).append(angular.element(document.querySelector(".test1")).clone());

    //contents()-获得匹配元素集合中每个元素的子元素，包括文字和注释节点
    console.log(angular.element(document.querySelector(".test2")).contents());

    //css() - 获取匹配元素集合中的第一个元素的样式属性的值
    console.log(angular.element(document.querySelector(".test3")).css("color"));

    //detach()-从DOM中去掉所有匹配的元素
    angular.element(document.querySelector(".test1 p")).detach();

    //empty()-从DOM中移除集合中匹配元素的所有子节点
    angular.element(document.querySelector(".test2")).empty();

    //eq()-减少匹配元素的集合为指定的索引的哪一个元素
    console.log(angular.element(document.querySelectorAll(".test3 p")).eq(2)[0].innerHTML);

    //find() - 通过一个选择器，jQuery对象，或元素过滤，得到当前匹配的元素集合中每个元素的后代
    console.log(angular.element(document.querySelector(".test3")).find("span")[0].innerHTML);

    //hasClass()-确定任何一个匹配元素是否有被分配给定的（样式）类
    console.log(angular.element(document.querySelector(".test3")).hasClass("test4"));

    //html()-获取集合中第一个匹配元素的HTML内容
    console.log(angular.element(document.querySelector(".test2")).html());

    //next() - 取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素
    console.log(angular.element(document.querySelector(".test3 .p2")).next()[0].innerHTML);

    //parent() - 取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器
    console.log(angular.element(document.querySelector("span")).parent());


    //prepend()-将参数内容插入到每个匹配元素的前面（元素内部）
    angular.element(document.querySelector(".test")).prepend("<p>我是通过prepend()添加进来的</p>");

    //prop()-获取匹配的元素集中第一个元素的属性（property）值
    angular.element(document.querySelector(".input")).prop("checked", true);

    //remove()-将匹配元素集合从DOM中删除。（同时移除元素上的事件及 jQuery 数据。）
    angular.element(document.querySelector(".test2")).remove();

    //removeAttr()-为匹配的元素集合中的每个元素中移除一个属性（attribute）
    angular.element(document.querySelector(".test2")).removeAttr("data-value");

    //removeClass()-移除集合中每个匹配元素上一个，多个或全部样式
    angular.element(document.querySelector(".test3")).removeClass("test4");

    //replaceWith() - 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
    angular.element(document.querySelector(".test1")).replaceWith("<p>replaceWith()替换的内容</p>");

    //text()-得到匹配元素集合中每个元素的合并文本，包括他们的后代
    console.log(angular.element(document.querySelector(".test")).text());

    //toggleClass()-在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类
    angular.element(document.querySelector(".test1")).toggleClass("test1");
    angular.element(document.querySelector(".test2")).toggleClass("test1");

    //val()-获取匹配的元素集合中第一个元素的当前值
    console.log(angular.element(document.querySelector(".input1")).val());

    //wrap() - 在每个匹配的元素外层包上一个html元素
    angular.element(document.querySelector(".test1")).wrap("<div></div>");
  </script>

事件：

$destory:当Dom被移除时， Angular 拦截所以的jqLite或者jquery Dom对象，销毁api和事件。这个事件能在Dom被移除前用来清除任何Dom上的相关。

方法：

controller(name)：检索当前元素或其父元素的controller，默认情况下，检索与ngController相关的controller，如果name是以驼峰模式命名的指令名称，那么这个指令的controller就是这样（如'ngModel'） 。

injector():检索当前元素或其父元素的依赖注入。

scope():检索当前元素或其父元素的scope。

isolateScope():如果有一个scope直接附着在当前元素，检索一个隔离的scope，这仅用于元素包含一个创建了新的隔离的scope的指令，这个元素调用scope()总是返回原来的非隔离scope。

inheritedData():和data()一样，但是会沿着Dom走直到值被找到或者走到顶级Dom元素。（由此可见，应该是向上传播的意思。）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# angular  # element  # angularjs  # angular2  # elementref  # angular.element方法汇总  # 详解angularjs获取元素以及angular.element()用法  # 移除  # 第一个  # 我是  # 选择器  # 多个  # 绑定  # 其父  # 可以使用  # 提供一个  # 在每个  # 他们的  # 最多  # 走到  # 才会  # 能在  # 不存在  # 为其  # 或删除  # 可选  # 任何一个 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： canvas 画布在主流浏览器中的尺寸限制详细介绍  Win11摄像头无法使用怎么办_Win11相机隐私权限开启教程【详解】  javascript日期怎么处理_如何格式化输出  详解Android——蓝牙技术 带你实现终端间数据传输  Laravel中的withCount方法怎么高效统计关联模型数量  Python文本处理实践_日志清洗解析【指导】  linux写shell需要注意的问题(必看)  如何打造高效商业网站？建站目的决定转化率  如何在 Go 中优雅地映射具有动态字段的 JSON 对象到结构体  北京网站制作的公司有哪些,北京白云观官方网站？  深圳防火门网站制作公司,深圳中天明防火门怎么编码？  如何用腾讯建站主机快速创建免费网站？  Laravel怎么使用Blade模板引擎_Laravel模板继承与Component组件复用【手册】  Angular 表单中正确绑定输入值以确保提交与验证正常工作  Java垃圾回收器的方法和原理总结  Laravel怎么集成Log日志记录_Laravel单文件与每日日志配置及自定义通道【详解】  网站制作大概要多少钱一个,做一个平台网站大概多少钱？  laravel怎么通过契约（Contracts）编程_laravel契约（Contracts）编程方法  Laravel Session怎么存储_Laravel Session驱动配置详解  黑客如何利用漏洞与弱口令入侵网站服务器？  专业企业网站设计制作公司,如何理解商贸企业的统一配送和分销网络建设？  详解Android图表 MPAndroidChart折线图  黑客如何通过漏洞一步步攻陷网站服务器？  动图在线制作网站有哪些,滑动动图图集怎么做？  Laravel表单请求验证类怎么用_Laravel Form Request分离验证逻辑教程  Claude怎样写约束型提示词_Claude约束提示词写法【教程】  Gemini怎么用新功能实时问答_Gemini实时问答使用【步骤】  网站图片在线制作软件,怎么在图片上做链接？  七夕网站制作视频,七夕大促活动怎么报名？  网站制作企业,网站的banner和导航栏是指什么？  网站制作怎么样才能赚钱,用自己的电脑做服务器架设网站有什么利弊，能赚钱吗？  Android Socket接口实现即时通讯实例代码  Laravel Vite是做什么的_Laravel前端资源打包工具Vite配置与使用  Laravel如何实现邮件验证激活账户_Laravel内置MustVerifyEmail接口配置【步骤】  微信h5制作网站有哪些,免费微信H5页面制作工具？  Laravel如何创建自定义中间件？（Middleware代码示例）  Laravel如何实现API资源集合？（Resource Collection教程）  Edge浏览器提示“由你的组织管理”怎么解决_去除浏览器托管提示【修复】  Laravel如何生成API文档？（Swagger/OpenAPI教程）  Laravel如何实现图片防盗链功能_Laravel中间件验证Referer来源请求【方案】  Python进程池调度策略_任务分发说明【指导】  html5audio标签播放结束怎么触发事件_onended回调方法【教程】  Windows家庭版如何开启组策略(gpedit.msc)？（安装方法）  Laravel如何使用Vite进行前端资源打包？（配置示例）  IOS倒计时设置UIButton标题title的抖动问题  JavaScript模板引擎Template.js使用详解  如何快速建站并高效导出源代码？  Laravel如何获取当前登录用户信息_Laravel Auth门面使用与Session用户读取【技巧】  javascript如何操作浏览器历史记录_怎样实现无刷新导航  C#如何调用原生C++ COM对象详解