The exact function of the attributes could only be given when analyzing the code of the application in question, however, below I mention some possible applications of these attributes in these elements.
The attributes id and class are global attributes , which means that the function will always be the same for any element, without exception. That is, id will set a unique identifier for the element, which must be unique also in the document. While 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 discussed, applications can vary greatly depending on the needs of each developer and / or application. For the link element Guilherme 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>
Since both files, style.css and other.css , exist, the current page style will change when you press the button. However, for the script element this does not make much sense - it may even be that some application or problem can make use of this file exchange, but honestly I've never seen need. But it has an application using the script element that is very interesting: the DOM Shadow.
What is shadow DOM?
Building Web Components is by inserting elements into the DOM shadow of another element, basically, and as the goal is to work with the shadow DOM It does not make sense for you to define such elements in light DOM . The options are: you create the elements dynamically with JavaScript by setting the shadow DOM , which can be very laborious, or create the DOM outside light DOM within meta and just copy it to the shadow DOM . This second solution makes use of the script type="text/template" element and you will need to set the id attribute 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 into Shadow DOM , simply parse it with the browser inspector:
ItisworthmentioningthatfromHTML5thereisthetemplateelementthatreplacestheuseofthescriptelementforDOMcreationoutsidethelightDOM.Icommentonthisinthisanswer:
What is the head tag for in the html?
