如何通过类名或 id 获取元素答案

【问题标题】：How to get element by classname or id如何通过类名或 id 获取元素
【发布时间】：2014-05-12 12:32:44
【问题描述】：

我正在尝试通过 angularjs 在 html 中查找元素。

这里是html：

<button class="btn btn-primary multi-files" type="button">
   <span>Choose multiple files</span>
</button>
<br/><br/>
<input ng-file-select type="file" multiple  style="display: none"/><br/>

我正在尝试通过类名多文件获取按钮元素，然后我尝试了

var multibutton = angular.element(element.getElementsByClassName(".multi-files"));

但它不起作用，并尝试了element.find，但它只适用于标签。

angularjs中有没有可以通过id或者classname获取元素的函数？

【问题讨论】：

也许这有帮助：stackoverflow.com/questions/20801843/…
您甚至不必创建指令。您可以简单地添加一个处理程序，例如 ng-click。最坏的情况，如果你真的想获取元素，你总是可以使用 jQuery 语法。

标签： angularjs

【解决方案1】：

getElementsByClassName 是 DOM 文档上的一个函数。它既不是 jQuery 也不是 jqLite 函数。

使用时不要在类名前加句点：

var result = document.getElementsByClassName("multi-files");

将其包装在 jqLite 中（如果 jQuery 在 Angular 之前加载，则使用 jQuery）：

var wrappedResult = angular.element(result);

如果您想在指令的链接函数中从 element 中进行选择，您需要访问 DOM 引用而不是 jqLite 引用 - element[0] 而不是 element：

link: function (scope, element, attrs) {

  var elementResult = element[0].getElementsByClassName('multi-files');
}

您也可以使用document.querySelector 函数（如果按类别选择，则需要此处的句点）：

var queryResult = element[0].querySelector('.multi-files');
var wrappedQueryResult = angular.element(queryResult);

演示： http://plnkr.co/edit/AOvO47ebEvrtpXeIzYOH?p=preview

【讨论】：

可能值得注意的是，在链接函数内部，element.childElementCount 可能为 0，因为 angular 还没有机会创建元素，所以你应该准备好处理没有结果元素[0].getElement...

【解决方案2】：

您不必在getElementsByClassName 中添加.，即

var multibutton = angular.element(element.getElementsByClassName("multi-files"));

但是，当使用angular.element 时，您必须使用 jquery 样式选择器：

angular.element('.multi-files');

应该可以解决问题。

另外，来自this documentation“如果 jQuery 可用，则 angular.element 是 jQuery 函数的别名。如果 jQuery 不可用，则 angular.element 委托给 Angular 的内置 jQuery 子集，称为“jQuery lite”或“jqLite”。”

【讨论】：

嗨，谢谢回复，我试过了，但错误提示未定义函数
它可能有效，也可能无效，是的。请立即检查我的答案（进行了编辑），您可能会知道该怎么做。
如果函数未定义，您可能没有加载 jquery。 jqlite（如果您没有像@Ashesh 提到的那样加载 jquery，则使用它）没有 jquery 具有的所有功能，而 getElementsByClassName 就是其中之一。
angular.element('multi-files');不会工作。你确实需要这个时期。
var multibutton = angular.element(document.getElementsByClassName("multi-files"));

【解决方案3】：

@tasseKATT 的回答很好，但如果你不想做指令，为什么不使用$document？

.controller('ExampleController', ['$scope', '$document', function($scope, $document) {
  var dumb = function (id) {
  var queryResult = $document[0].getElementById(id)
  var wrappedID = angular.element(queryResult);
  return wrappedID;
};

PLUNKR

【讨论】：

angular.element('#Your element id') 做同样的工作。
它在 Angular 1.5.8 中给出了这个错误。 “jqLite 不支持通过选择器查找元素”

【解决方案4】：

如果您只想通过其类名并仅使用 jQLite 来查找按钮，您可以执行以下操作：

var myListButton = $document.find('button').filter(function() {
    return angular.element(this).hasClass('multi-files');
});

希望这会有所帮助。 :)

【讨论】：

这不是使用 angular 和 jquery，而且，不正确的说法，您确实可以使用 jquery 来替换 jqlite。这是在 Angular 环境中执行此操作的正确方法，无需深入到 vanilla javascript 元素 ($document[0])。