检查 <head> 包含特定的 <link> 而没有 JQuery

Question

是否可以检查 <head> 是否包含特定的 <link> 标签？

例如我会在头部添加一个link：

let link = document.createElement('link');
link.href = 'https://my.path.css';
link.type = 'text/css';
link.rel = 'stylesheet';
document.head.append(link);

是否可以检查它是否存在于头部？

我知道我可以通过

获得一个 HTMLCollection

const headChildren = document.getElementsByTagName('head')[0].children;

但我似乎无法通过导航来检查...

Answer 1

你不能 "navigate" headChildren 的原因是因为它是一个 'iterable' 但不是正式的数组。

使用Array.from转换后就可以像普通数组一样处理了。

let actualArray = Array.from(headChildren)

您还可以使用 for of 循环遍历 'iterables'：

for (let child of headChildren) {
  console.log(child)
}

Answer 2

我会使用 querySelectorAll 而不是 children。我会将 HTML 集合转换为数组，并使用一些数组遍历集合以找到与 href 的匹配项。

const exist = Array.from(
  document.querySelectorAll('link[rel="stylesheet"]')
).some(link => link.href === 'https://my.path.css')

Answer 3

循环的建议只是我需要的解决方案的一半。

我想要一种简单的方法来检查我创建并推入的确切标签是否存在。

我尝试了所有不同类型的平等都无济于事。 '==' 和 '===' 不会工作，我假设是因为引用了对象标识等，例如字符串。

我找到了使两个节点相等的“.isEqualNode”的解决方案。

所以我最后的解决方案是：

const headChildren = document.getElementsByTagName('head')[0].children;

for (let child or headChildren) {
    if (child.isEqualNode(myLinkNode) {
        // Do something
    }
}

检查 <head> 包含特定的 <link> 而没有 JQuery

Check <head> contains specific <link> without JQuery

html

head