当前位置: 首页 > 面试题库 >

如何通过类名或ID获取元素

翟嘉志
2023-03-14
问题内容

我正在尝试通过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或类名获取元素的函数


问题答案:

getElementsByClassName是DOM文档上的函数。它既不是jQuery也不是jqLit​​e函数。

使用时不要在类名前添加句号:

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

将其包装在jqLit​​e中(如果在Angular之前加载jQuery,则包装在jQuery中):

var wrappedResult = angular.element(result);

如果要从element指令的链接函数中进行选择,则需要访问DOM引用而不是jqLit​​e引用- 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



 类似资料:
  • 问题内容: 我想知道是否有一种功能或某种与之等效的方法。 问题答案: 您的函数名称中缺少。返回元素的集合,这些元素需要迭代: IE8及以下版本不支持,因此您必须找到一个polyfill或使用(IE8)。

  • 问题内容: 使用JavaScript,我们可以使用以下语法通过id获取元素: 我尝试以下按类获取元素: 但这导致了错误: 如何按类获取元素? 问题答案: DOM函数的名称实际上不是,仅仅是因为页面上的多个元素可以具有同一类,因此:。 此方法的返回值将是NodeList实例,或者是(FF的超集,例如返回的实例)。无论如何:返回值是一个类似于数组的对象: 如果由于某种原因需要返回对象作为数组,则由于其

  • 问题内容: 我正在使用PHPDOM,并且试图在DOM节点中获取具有给定类名的元素。获得该子元素的最佳方法是什么? 更新: 我最终使用了PHP,它更容易使用。 问题答案: 更新:CSS选择器的Xpath版本 因此,在下面我回应hakre的评论之后,我感到好奇,并调查了后面的代码。看起来上面的选择器已编译为以下xpath(未经测试): 所以PHP将是: 基本上,我们在这里所做的就是规范化属性,以便即使

  • 问题内容: 如果我知道文本标签包含什么,如何在html页面中获取标签。例如: 问题答案: 您将不得不手动遍历。

  • 完全修改,请重新阅读 你好,我使用的主题显示页面的标题,而不是面包屑中的菜单标签。我试图让面包屑显示相关的菜单标签,如果它是可用的,如果不是,则默认为page_title。 我想出了一些我认为接近的代码。第4行///$ menu _ items = WP _ get _ nav _ menu _ items($ slug);返回null,它应该返回包含当前文章的$slug的导航项。显然,有些事情我

  • 问题内容: 我知道我可以按元素获取范围: 我该如何反向:使用scope来查找DOM元素,例如? 我想这样做是为了调试。我的作用域树显示了一些内容,我想确定它的来源。 问题答案: 尽管不是很性感,但每个dom节点都有一个ng-scope类,因此您可以通过技术进行如下操作: