javascript - 仅在 dom 中禁用该属性的情况下选择元素

Question

我试图从Dom中获取元素，仅禁用“disabled =”disabled“”，然后使用angularjs应用一个值，为此我使用“getElementsByTagName”，发生的情况是我不知道如何仅选择禁用该属性的那些。我正在尝试将其应用到自定义指令中:

HTML:

                <deb-button 
                base-path="assets\assets-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-buttons

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]) }
}