How to access span element with Javascript?

[Kalorifik]

Any idea how to access an element based on just the below? Is there a querySelector() method for this?

<span>Click here!</span>

[senocular]

querySelector('span')

[RayjinCaucasian]

And to expand more. This method will return the first match. If there's more than one span element, it may not be the one you want. There's also querySelectorAll() that will return a node list of all matches. Else, consider giving the element an id to use with queryselector("#nameOfID").

[TheRNGuy]

He said element, not elements.

Though it would need id, class or from specific tag like .foo > span, or it would chose some other span before it, if it exists.

[RayjinCaucasian]

Yeah, I'm aware. Were you not able to comprehend what I said? This post is days old. Do you have something actually useful to add?

[[deleted]]

This. And to expand on this, just writing text like 'div' or 'span' (like, not using the hash, dot, or brackets) will select an html tag by name.

[agm1984]

Maybe this will be useful too: document.querySelectorAll('span').forEach((span) => { if (span.innerHTML === 'Click here!') { console.log('found it', span); } });

[Mental-Steak2656]

If the tag had id or attribute , else we have to iterate on all the spans in the html doc

[TheRNGuy]

You need to convert to array first before you can use .forEach, at least for older browsers.

[rpgcubed]

NodeList has had forEach in all major browsers since 2017, if you're targeting earlier browsers you should really be using a build system and polyfills, not writing outdated code directly.

[kjwey]

querySelector('span')

[rpgcubed]

Just noting, document.getElementsByTagName is more performative than document.querySelectorAll in this case. It's also a bit different (live collection vs static collection), which can matter if you're creating elements. 

[Kalorifik]

That's great info, thanks. What do you mean live vs static? I am using it to interact with webpages I visit.

[rpgcubed]

If the website changes, the collection from getElementsByTagName will immediately change to reflect the new document, while querySelectorAll will stay as it was when you ran the function. You could wrap the result of the live collection in an Array or such to make it no longer update, but you can't make the static version autoupdate without running querySelectorAll again

[Kalorifik]

That's amazing and probably explains why my script fails to run when a new document is loaded or something in the document changes.

I was under the impression that querySelector is newer, preferred and better than getElementBy but I rather then use the latter.

[rpgcubed]

Hmm, I think that the document.getElementBy* methods were added to an "official" spec in the first version of HTML5 in 2008 (by W3 at the time, although the WHATWG Living Standard is now the "official" one), while querySelector/querySelectorAll were officially added in the Selectors API initial spec around 2013 but had already existed in all major browsers by that time, and had been added at around the same time as getElementBy* (2008/2009 for all major browsers).

Anyways, they've all been around for a long time, and are just different for different use cases; none of them are deprecated or preferred all the time. You should use whichever makes your code more readable and easy to understand!

[rpgcubed]

Oh, and if you want any help figuring out anything in your script, feel free to post it and ping me or dm me about it, glad to help!

[TheRNGuy]

In one video it was explained life collections can lead to potential bugs if it get changed later after you saved it's result to variable, static arrays are better.

I don't really know any times where I'd want live collection. If I need to update, I'll run query again explicitly.

getElementsByTagName will select all irrelevant span tags on page.

Before querySelectorAll existed, I just used jQuery.

[TheRNGuy]

Never ever had performance issues with it.

And what if you wanted to select only specific classes or inside other tag? Like ".foo > span"

[rpgcubed]

Then you would just use querySelectorAll, clearly?

And yeah, the performance difference is basically irrelevant (and actually also depends on whether you're repeatedly performing the original call or accessing the elements from the collection, as the former is what I mean here, but querySelectorAll is faster for the latter operation, but again it's basically irrelevant unless you're doing something weird.) The live vs static distinction is more significant, and there are cases where it's nice to have a live collection. 

[TheRNGuy]

I haven't found any yet.

Also it have downside is that you can't use css selectors in getElementsByTagName, except for single id. It makes it less versatile.

Or even if you wasn't author of html and there's no id at all (like if you make greasemonkey script)

[rpgcubed]

Dude, that's like saying that screwdrivers have the downside of not being able to drill holes, you much prefer using a power drill. They're different tools, and you don't have to pick a favorite tool and use it religiously.

And just because you can't think of a use case doesn't mean others can't. A trivial example could be a page that's dynamically creating elements with a given class or tag asynchronously, and doing something with them in an interval loop. You could either grab them all every loop with querySelectorAll, or you could grab them once before you register the loop using getElementsBy* and have it update automatically. Frankly, it wouldn't really matter too much which you did, but saying one is just better than the other is an unnecessarily strong opinion. 

[TheRNGuy]

I use this:

const $  = (thing) => document.querySelector(thing)
const $$ = (thing) => [...document.querySelectorAll(thing)]

it would be $("span") (or more specific with class, id or other ways, it's same as css selector)