The Document Object Model
The HTML document loaded in a tab of your web browser is represented by The DOM
It is expressed in a "tree structure" way by the browser that enables the HTML structure to be easily accessed by the programming languages,
for example, the browser itself uses it to apply the styling and scripts to the correct HTML element at the time of rendering the page, and developers like us can manipulate the DOM after the page has been rendered.
The DOM tree is a massive concept on its own and ain't much beginner friendly if you want to learn more about it you can follow the following link https://javascript.info/dom-nodes
How to create Elements in JS
For creating HTML elements without leaving the JavaScript file we can use the document.createElement() method.
const para = document.createElement(`p`);
para.innerText = `This paragraph has been created without leaving the Javascript file`;
document.body.appendChild(para);
Let's take a look at the above code. In the first line, we created a variable and assigned it to the document.createElement('p'); we passed 'p' as an argument because it resembles the <p></p> tag in HTML which creates a paragraph. In the next line, we added some text using .innerText property. Next, we need to add this created element to our page for that we used document.body.appendChild() and passed in our variableName as an argument.
Note: innerText returns all the text contained by an element and its child elements. .appendChild() appends a node element as the last child of an element. We can break this down as a child of an element which would be the 'p' tag we created. which append to the parent of it which is the body.
In the next part of this article, we will have a look at event handlers. For that, we need to know how to get of the already existing HTML elements.
Document.getElementByID()
By using the Document.getElementByID() method we can grab the HTML element's hold by passing in its unique ID selector.
const idElement = document.getElementByID(`id-el`);
Document.getElementByClassName()
In HTML we mostly group similar elements by classes. To get the access of these classes we can use this property.
const classElements = document.getElementByClassName(`class-el`);
there's another method called getElementByTagName() which we don't use very often but as the name suggests we can get access of a specific HTML tag.
There are other two methods that are pretty similar to each other, which are .querySelector() and .querySelectorAll() which can be used to get access of all the classes, Ids, and tag names.
Document.querySelector()
This returns the first element within the HTML document that matches the passed argument.
const querySelectorEl = document.querySelector(`#query-id`);
Document.querySelecorAll()
This works the same as the other but instead of returning the first element only, it returns all the elements that match the passed argument.
const querySelectorAllEl = document.querySelectorAll(`.query-class`);
Thank you for reading, hope you gained some knowledge.
Follow me on Twitter: https://twitter.com/iYashuu__ I post web development-related stuff here!