时间戳

首页 > 解决方案 > 如何过滤 querySelectorAll 结果？

javascript - 如何过滤 querySelectorAll 结果？

问题描述

我想通过从页面中提取 h2、h3、h4 和 h5 标记来创建嵌套目录。所以我写了这个：

var enterycontent = document.getElementsByClassName("entry-content")[0]
var htags = enterycontent.querySelectorAll('h2,h3,h4,h5');
var ul = document.getElementById("table_of_contents");

for (i = 0; i < htags.length; i++) {
  var nhs = htags[i];
  htags[i].setAttribute("id", "htag" + i);
  var innerhtag = nhs.innerText;
  var li = document.createElement('li');
  ul.appendChild(li);
  var hrefid = '#htag' + i;
  li.innerHTML = ('<a href="#htag' + i + '">' + innerhtag + '</a>');
}

它工作得很好。但我想再添加一件事，所以我尝试在 h3、h4、h5 标签中添加“子”类，在h2 标签中添加“父”类。我尝试使用 .includes 函数，但它不起作用。

if(nhs.includes("h2")) {
//css adding rules...
}

如何过滤 querySelectorAll 结果并添加IF 条件以添加“子”和“父”css 类？

标签： javascript

解决方案

您可以使用nodeName来检查元素的类型。所以在你的情况下，这会起作用。

if (nhs.nodeName === "H2") { 
    // Do something
}

为了使用您的代码，它最终会看起来像下面这样。

for (i = 0; i < htags.length; i++) {
  var nhs = htags[i];
  htags[i].setAttribute("id", "htag" + i);
  var innerhtag = nhs.innerText;
  var li = document.createElement('li');
  ul.appendChild(li);
  var hrefid = '#htag' + i;
  li.innerHTML = ('<a href="#htag' + i + '" target="_blank" data-localscroll="true">' + innerhtag + '</a>');
  if (nhs.nodeName === "H2") {
      // Do something
  } else if (nhs.nodeName === "H3" || nhs.nodeName === "H4" || nhs.nodeName === "H5") {
      // Do something else
  }
}

重要 nodeName将以大写字母返回元素的类型，因此检查h2不起作用，您需要检查H2.

推荐阅读