Check contains specific without JQuery

Question

Is it possible to check that the <head> contains a specific <link> tag?

For example I would add a link to the head:

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

Is it then possible to check that it is present within the head?

I know that I can get an HTMLCollection with

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

But I can't seem to navigate this to check...

If you just want to check if that link excist, give it an id or class to query this? — Wimanicesir, Mar 12 '20 at 13:25
Does this answer your question? [For loop for HTMLCollection elements](https://stackoverflow.com/questions/22754315/for-loop-for-htmlcollection-elements) — Heretic Monkey, Mar 12 '20 at 13:26
You just loop thru the collection and look for whatever you need to look for. What is the specific issue? Not knowing how to look for something or you looked for something but didn't work? — Huangism, Mar 12 '20 at 13:26
Of course you could also just use `document.querySelectorAll('link[rel="stylesheet"]')` to get all of the stylesheets, but since you specifically asked about `children`... — Heretic Monkey, Mar 12 '20 at 13:28

score 1 · Answer 1 · answered Mar 12 '20 at 13:33

The reason you can't "navigate" headChildren is because it's an 'iterable' but not officially an array.

Use Array.from to convert it then you can treat it like a normal array.

let actualArray = Array.from(headChildren)

You can also iterate over 'iterables' with a for of loop:

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

score 1 · Answer 2 · answered Mar 12 '20 at 13:38

1

I would use querySelectorAll and not children. I would convert the HTML collection to an array and use some to loop over the collection to find a match with the href.

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

answered Mar 12 '20 at 13:38

epascarello

204,599
20
195
236

1

Why not directly `link[rel="stylesheet"][href="https://my.path.css"]`? – myf Mar 12 '20 at 13:44
You have to watch out for matching exactly on `href` since browsers will often use the canonical URL rather than what was typed into the actual `link`'s `href` property. In either case (checking `link.href` or `[href="..."]`). – Heretic Monkey Mar 20 '20 at 21:35

score 0 · Accepted Answer · answered Mar 12 '20 at 13:41

The suggestions for the loop were only half of the solution I required.

I wanted a simple way to check that the exact tag that I had created and pushed into the was present.

I attempted all the different types of equality to no avail. '==' and '===' wouldn't work I'm assuming because of referring to object identities etc like Strings suffer from.

I found the solution with `.isEqualNode' which equates two nodes.

Therefore my solution in the end was:

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

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

Check contains specific without JQuery

3 Answers3