如何使用 Javascript“查找”由 Angular 组件提供的元素？
Posted
技术标签:
【中文标题】如何使用 Javascript“查找”由 Angular 组件提供的元素？【英文标题】：How to 'Find' elements served by Angular components using Javascript? 【发布时间】：2022-01-16 12:01:55 【问题描述】：我正在尝试创建一个 Chrome 扩展程序以在页面中注入一个对话框。 该页面似乎是使用 Angular 开发的：
<body al-exchange al-window-click ng-controller="PageCtrl as PageCtrl" class="" ng-class="...
我的问题： 我试图在页面上找到一个按钮（唯一的按钮），但我使用的选择器似乎找不到它。
// jquery
function FindButton()
$(function()
var num = 0;
$(":button").each(function(btn)
num = num + 1;
)
alert('Jquery - There are ' + num + ' buttons in page');
);
var filter = ...
chrome.webNavigation.onBeforeNavigate.addListener(
FindButton, filter );
如果我只显示一个警告对话框，上面的代码就可以工作，所以我知道它正在触发。
我注意到（使用 Chrome 开发工具）如果我使用 Inspect 工具，我可以看到按钮元素，但如果我使用“查看页面源”工具，则没有实际控件，只有 div和脚本标签。
我已经编辑了我的原始问题以包含按钮 html 我希望这会有所帮助。 :-) ==>
<div ng-if="some_method_here()" class="acceloCreateEditPageCardContainer__footer" ng-trasclude="footer">==$0
<create-edit-page-card-footer class="flex">
<!-->
<!-->
<button ng-disabled="some_text_here" ng-click="some_text_here"
class="fillbutton fillbutton--blue" ng-class="some_ngclass_here">Save</button>
</create-edit-page-card-footer class="flex">
</div>
我已经进一步编辑了这个问题
我现在更新了我的扩展程序中的代码。我现在使用 'DOMContentLoaded' 事件来搜索按钮。
警报触发，但仍然显示页面中有 0 个按钮。
//=======background.js====================
function AddListner()
document.addEventListener('DOMContentLoaded',
$(function()
var num = 0;
$(":button").each(function(btn)
num = num + 1;
)
alert('There are ' + num + ' buttons in page');
)
);
var filter = ....
chrome.webNavigation.onBeforeNavigate.addListener(
AddListner,
filter );
任何有助于了解正在发生的事情，都会很棒！ :-)
【问题讨论】：
确保在应用加载后查找按钮（任何客户端框架都会出现这种情况）。除此之外，角度本身并没有什么特别之处。这是指定正确选择器的问题。如果您仍有问题，请发布相关按钮的 html，以便我们就选择器提供帮助。 谢谢，我已编辑问题以包含更多信息 @Neea，感谢您的输入，我终于弄清楚了如何选择按钮。创建一个答案，我会将其标记为正确。 【参考方案1】：我真的是在黑暗中拍摄，结果非常简单：
答案是使用 document.querySelector 并搜索具有两个类的按钮元素：
document.querySelector("button.fillbutton.fillbutton--blue").addEventListener('click', function () ... some function here ...
非常感谢您的回复 Neea，它给了我继续努力所需的信心。 :-)
【讨论】：
以上是关于如何使用 Javascript“查找”由 Angular 组件提供的元素？的主要内容，如果未能解决你的问题，请参考以下文章
Selenium c#如何通过JavaScript查找元素？