Question

我正在尝试编写一个脚本，该脚本检查DOM中具有特定属性的元素。如果存在，请调出属性和值；具体是role和aria属性。

<body aria-live="assertive" aria-checked="true">
  <form role="search">
    <input type="search" name="q" placeholder="Search query" aria-label="Search through site content">
    <input type="submit" value="Go!">
  </form>
</body>

上面的标记应产生：

Body aria-live: "assertive", aria-checked:"true"

Form role: "search"

Input aria-label: "Search through site content"

这是脚本：

  document.addEventListener('DOMContentLoaded', function (event) {
      var jsUcFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();

      document.querySelectorAll('*').forEach(function (node) {
        if (node.hasAttribute('role') || checkForAriaFunc(node)) {
          console.dir(document.body.attributes)
          console.log(
            `${jsUcFirst(node.tagName)} role: ${node.getAttribute('role')}, aria: ${checkForAriaFunc(node)}`
          )
        }
      });
    })

正如您在if语句中看到的那样，我被困在如何用aria-*作为占位符功能/伪代码来检查checkForAriaFunc的问题。

我控制台了document.body，发现有一个名为attributes的{{1}}属性，该属性包含以下内容：

那么使用一种方法的最佳方法是什么，以便我可以检查元素是否具有任何NamedNodeMap标签，如果可以，则将它们全部打印出来？预先感谢！

更新根据马库斯的建议，我尝试了以下方法：

arias

但是回到未定义状态！

更新因此，按照guest271314的建议，我尝试使用function ariaChecker(el) { Object.keys(el.attributes).map((property) => { if (property.includes('aria')) { console.log(property); } }) }编写自己的函数：

filter

但是我得到：

Answer 1

大概您可以像下面这样使用Object.keys（）：

Object.keys(document.body.attributes).forEach((property) => { ...})

请参见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

Answer 2

我已经为您完成了此功能。它会查找所需的任何属性，并返回其值，如果不存在，则返回false：

function searchNodeAttr(node, search){
  var attrs = node.attributes; 
  if(attrs && attrs.length){
    for( var a in attrs){
      var attr = attrs[a];
      if(attr.nodeType == 2){
        if((new RegExp(search)).test(attr.name)) return attr.value;
         } else break;
     };
     }

  return false;
}

您的情况下的用法：

var ariaAttr = searchNodeAttr(node, 'aria-');
if (node.hasAttribute('role') || ariaAttr !== false){
console.log(ariaAttr)
}

Answer 3

您可以使用.map()或name方法为NamedNodeMap的{{1}}属性RegExp创建一个函数，返回一个String其中元素具有Array个匹配属性的对象，其中DOM元素.some()设置为属性，值设置为一组对象，这些对象设置为tagName，name匹配值传递为函数的参数，使用value的{{1}} .filter()数组元素值

false

Boolean

如何检查对象是否具有包含JavaScript中给定字符串的键？

3 个答案: