仅当属性禁用时才选择 dom 中的元素答案

【问题标题】：Select elements in the dom only if they have the attribute disabled仅当属性禁用时才选择 dom 中的元素
【发布时间】：2019-04-03 16:37:45
【问题描述】：

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

HTML：

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

.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';
    }
  }
};

谢谢！

【问题讨论】：

其他按钮不是当前按钮？还是只有当前的？它们也都驻留在一个控制器实例中吗？

标签： javascript angularjs angularjs-directive

【解决方案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]) }
}

【讨论】：

【解决方案2】：

好吧，当您使用指令时，我更喜欢以这种方式使用选择器：

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

这只是另一种方式。

【讨论】：