angularjs获取dom元素的方法

最新推荐文章于 2021-09-15 14:02:17 发布

原创最新推荐文章于 2021-09-15 14:02:17 发布 · 1.9k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

angularjs

本文介绍了如何在AngularJS应用中使用`angular.element`获取DOM元素以及利用`$event`处理点击事件。示例代码展示了如何获取特定类别的元素内容，并在按钮点击时读取事件目标的属性值。同时，文章还提及了AngularJS中的JqLite，它是AngularJS内置的一个轻量级jQuery库，用于DOM操作。

使用angular.element和$event获取dom

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/angular@1.8.2/angular.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="MyController">
  <div>
    <h3>angular.element()</h3>
    <div class="test">测试文本</div>
    <button ng-click="getElement()">点击</button>
    <div>element html data: {{ elementHtml }}</div>
  </div>
  <div>
    <h3>click event</h3>
    <button data-page="1" ng-click="getPage($event)">1</button>
    <button data-page="2" ng-click="getPage($event)">2</button>
    <button data-page="3" ng-click="getPage($event)">3</button>
    <div>click event data: {{ eventAttribute }}</div>
  </div>
</div>

<script>
  var app = angular.module('myApp', []);
  app.controller('MyController', ['$scope',
    function ($scope) {
      $scope.elementHtml = undefined;
      $scope.eventAttribute = undefined;

      // angular.element获取dom
      $scope.getElement = function () {
        var dom = angular.element(document.getElementsByClassName('test'));
        console.log('element dom:', dom);
        $scope.elementHtml = dom.html()
      }

      // event事件中获取dom
      $scope.getPage = function (event) {
        console.log('event:', event);
        console.log('event target:', event.target);  // dom
        console.log('event target innerText:', event.target.innerText);
        $scope.eventAttribute = event.target.getAttribute('data-page')
      }
    }])
</script>
</body>
</html>

在这里插入图片描述

Angular JS框架内部使用了"轻量级的JQuery" - JqLite来处理页面。如果你也使用了JQuery，就要把JQuery放在了Angular JS前面调用，Angular JS会检查是否有JQuery存在，如果JQuery存在，则不使用内部的JqLite。

addClass()-为每个匹配的元素添加指定的样式类名
after()-在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点
append()-在每个匹配元素里面的末尾处插入参数内容
attr() - 获取匹配的元素集合中的第一个元素的属性的值
bind() - 为一个元素绑定一个事件处理程序
children() - 获得匹配元素集合中每个元素的子元素，选择器选择性筛选
clone()-创建一个匹配的元素集合的深度拷贝副本
contents()-获得匹配元素集合中每个元素的子元素，包括文字和注释节点
css() - 获取匹配元素集合中的第一个元素的样式属性的值
data()-在匹配元素上存储任意相关数据
detach()-从DOM中去掉所有匹配的元素
empty()-从DOM中移除集合中匹配元素的所有子节点
eq()-减少匹配元素的集合为指定的索引的哪一个元素
find() - 通过一个选择器，jQuery对象，或元素过滤，得到当前匹配的元素集合中每个元素的后代
hasClass()-确定任何一个匹配元素是否有被分配给定的（样式）类
html()-获取集合中第一个匹配元素的HTML内容
next() - 取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素
on() - 在选定的元素上绑定一个或多个事件处理函数
off() - 移除一个事件处理函数
one() - 为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次
parent() - 取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器
prepend()-将参数内容插入到每个匹配元素的前面（元素内部）
prop()-获取匹配的元素集中第一个元素的属性（property）值
ready()-当DOM准备就绪时，指定一个函数来执行
remove()-将匹配元素集合从DOM中删除。（同时移除元素上的事件及 jQuery 数据。）
removeAttr()-为匹配的元素集合中的每个元素中移除一个属性（attribute）
removeClass()-移除集合中每个匹配元素上一个，多个或全部样式
removeData()-在元素上移除绑定的数据
replaceWith()-用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
text()-得到匹配元素集合中每个元素的合并文本，包括他们的后代
toggleClass()-在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类
triggerHandler() -为一个事件执行附加到元素的所有处理程序
unbind() - 从元素上删除一个以前附加事件处理程序
val()-获取匹配的元素集合中第一个元素的当前值
wrap()-在每个匹配的元素外层包上一个html元素

标签

#angularjs #dom