仅当元素禁用了属性时，才选择 dom 中的元素

Question

我正在尝试从仅禁用的 Dom 中获取元素"禁用 ="禁用"，然后使用 angularjs 应用一个值，为此我使用的是"getElementsByTagName"，发生的事情是我不知道如何仅选择那些禁用属性的元素。我正在尝试在自定义指令中应用它：

.HTML：

                <deb-button 
                base-path="assetsassets-angular" 
                textbtn="Primary" 
                colorbtn="primary"
                disabled="disabled">
                </deb-button>

.JS

.directive('debButton', function () {
return {
  restrict: 'EA',
  templateUrl: function (element, attrs) {
    return attrs.basePath + "/templates/debbutton.html";
  },
  scope: {
    textbtn: '@',
    colorbtn: '@',
    isdisabled: '@'
  },
  controller: ['$scope', function ($scope) {
    var b = document.getElementsByTagName('deb-button');
    if (b) {
      console.log(b);
    }      
  }],
  link: function ($scope, colorbtn, isdisabled) {
    if (!$scope.colorbtn) {
      $scope.colorbtn = 'primary';
    }
  }
};

谢谢！

Answer 1

我建议使用querySelector而不是getElementsByTag，例如，它允许您编写CSS样式选择器。

如果您只想获取所有禁用的 deb 按钮，您可以这样做

var b = document.querySelectorAll('deb-button:disabled')

但是，如果要获取将disabled属性值设置为disabled的所有元素

var b = document.querySelectorAll('deb-button[disabled="disabled"]');

但是如果你想使用 getElementsByTagName，你可以循环访问getElementsByTagName的结果并过滤没有禁用属性的 deb 按钮

ES6：

var b = document.getElementsByTagName('deb-button').filter( e => e.getAttribute('disabled') === 'disabled' )

ES5：

var a = document.getElementsByTagName('deb-button');
var b = [];
for (var i= 0; i < a.length; i++){
   if (a[i].getAttribute('disabled') === 'disabled') { b.push(a[i]) }
}

Answer 2

好吧，由于您使用的是指令，因此我更喜欢以这种方式使用选择器：

函数链接(范围、元素、属性( {
angular.element(element.querySelectorAll('deb-button：disabled'( }

这只是另一种方式。