The exact function of the attributes could only be given when analyzing the code of the application in question, however, below I cite some possible applications of these attributes in these elements.
The attributes id and class sane global attributes, which means that the function will always be the same for any element without exception. That is, the id will define a unique identifier for the element, which should also be unique in the document. Already the class defines identifiers that do not need to be unique, used when you want to identify a similar group of elements.
But why use these attributes in link and script?
As commented, applications can vary greatly depending on the needs of each developer and/or application. For the element link william commented the most obvious application: dynamically change page style.
const btn = document.getElementById("changeStyleButton");
const css = document.getElementById("cssFile");
btn.addEventListener("click", event => {
let href = css.getAttribute("href");
css.setAttribute("href", (href == "style.css") ? "other.css" : "style.css");
console.log("O CSS mudou de " + href + " para " + css.getAttribute("href"));
});
<link id="cssFile" href="style.css" rel="stylesheet" />
<button id="changeStyleButton">Alterar estilo</button>
whereas both archives, style.css and other.css, exist, the style of the current page will be changed by pressing the button. However, for the element script this doesn’t make much sense - it may be that some application or problem can make use of this file exchange, but honestly I’ve never seen need. But there is an application using the element script which is very interesting: the Shadow DOM.
What is shadow DOM?
The construction of Web Components is due to the insertion of elements in the shadow gift of another element, basically, and as the goal is to work with the shadow gift it makes no sense for you to define such elements in light dom. The options are: you create the elements dynamically with Javascript when defining the shadow gift, which can be quite laborious, or create the DOM outside the light dom, within the meta and just copy it to the shadow gift. This second solution makes use of the element script type="text/template" and you will need to define the attribute id to be able to select the DOM in the future.
const element = document.getElementById("foo").createShadowRoot();
const shadow = document.getElementById('shadowDOM');
element.innerHTML = shadow.innerHTML;
<div id="foo"></div>
<script id="shadowDOM" type="text/template">
<h1>Elemento na Shadow DOM</h1>
</script>
To prove that the content is inserted in Shadow DOM, just scan with the browser inspector:
It is worth mentioning that from HTML 5 there is the element template replacing the use of the element script for the creation of DOM outside the light dom. I comment on that in this reply:
What is the head tag for in html?
In styles is probably to use the attribute
disabledto be able to change a theme dynamically without needing to "refresh", now in the script tag I can’t really see any usefulness.– Guilherme Nascimento
Just search the source code of the page that saw this and check the goal. The attributes
idandclassfunction as in any other element and it is very difficult to say when it is used. Basically, it is used when you need to select the elements dynamically. Why you do this can vary a lot.– Woss
@Andersoncarloswoss, particularly was the first time I saw and found really very strange such coding. I decided to ask to see if anyone had already dealt with such subject. Thank you for the explanation also
– UzumakiArtanis
I’m answering with something more concrete.
– Woss
I already used id in style. Reason, I made available to the client to change the theme of the page. Then, it had an array in js with several styles and it selected via interface which wanted, then just referenced via ID the style and put the URL of the desired file, thus changing the entire interface. I remembered that, I also used ID in the script to check if a certain .js. file was inserted. If there was no insertion of it, insert via CDN.
– Bruno Rigolon