What is DOM?
DOM stands for Document Object Model. DOM is a programming interface for HTML and XML documents. We can think of it as a way the document is represented so programs can change the document structure, style and content. We can view the DOM by going on to the console of the webpage and typing 'document'. Then we can search for what we find on the webpage or what code.
What is the query selector?
The method Query Selector returns the first element that matches a specified CSS selector(s) in the document. In the example below we specify the tag 'p' so the selector goes through the document from top to bottom searching for anything with that tag. Now whatever is in the 'p' tag will appear in the console.
Const para = document.querySelector('p');
console.log(para);
How else can we query the DOM?
There are other ways we can query the DOM when searching for elements by ID, class name, or their tag name. We can always use the console log to see what we are looking for but we are going to find it by using a method called 'getelementby___'. The extra space is for which way we are going to get it. Here is an example:
cosnt title = document.getelementbyId('page-title');
console.log(title);
const errors = documents.getelementsbyclassname('error');
console.log(errors);
const paras = document.getelementsbytagname('p');
console.log(paras);
console.log(paras[1]);
How do we add and change page content?
Here we are going to see how we can change text or things on our documents and how we can add as well. When we want to change some content on our doc we will use our query.selectorto select what we are changing. We will then select what we change by using the inner text property and set it to a new value. Check it out:
<html>
<body>
<p id="D1">I hate cheese!</p>
<script>
document.getElementById("D1").innerHTML = "I love cheese!";
</script>
</body>
</html>
How can we get and set attributes?
When we get an attribute from a document we want to set a variable to where we are getting it from and use the query selector to then get what we are setting. Here what we are going to do is set text to a link. We will use a link variable and the method setAttribute to set the link to the text. Here is how it looks:
const link = document.queryselector('a');
console.log(link.getattribute('href'));
link.setAttribute('href', 'https://www.youtube.com');
How can we change CSS styles?
When changing CSS styles we are also going to be using our Query.selector and the method setAttribute. What we are doing is inserting a piece of code into our HTML or CSS text and changing styles. Here I will show you how we select a style of a paragraph and change it:
const title = document.querySelector('p1');
title.setAttribute('style', 'margin: 50; px');
We can also see all of our properties we can use in CSS by setting our query selector in the console log. We go into our log and look at our console, there will be a big object with a list of CSS properties. Here is how it is done:
const title = document.querySelector('p1');
console.log(title.style)
How do you add and remove classes?
When adding classes we will want to use a method called add. Pretty simple right? We will write it as a class list with the add method and where we add it with our query.selector. Here is how it looks:
const content = document.queryselector('p');
console.log(content.classList);
content.classList.add('error');
content.classList.remove('error');
What are parents, children and siblings?
Parents, children and siblings represent the relationship between elements in JavaScript. In a simple HTML document with some CSS, the parent could be the body tag and the children can be the div tags. From here the siblings are the p tags as they are on the same level as the div tags. Now lets look at an example of these node relationships with the getElementBy method:
<body>
<ul id="myList">
<li>Example one</li>
<li>Example two</li>
<li>Example three</li>
<li>Example four</li>
<li>Example five</li>
<li>Example Six</li>
</ul>
</body>
<script>
var myList = document.getElementById('myList');
console.log(myList.children.length); // 6
console.log(myList.childElementCount); // 6
#How do you create and remove elements?
</script>
What are events?
Events can be things or changes that happen to HTML elements. In JavaScript we react to these elements. So basically, and event can be something the user or browser does. Examples of some HTML events would be you clicked something, the page loaded, an input box was changed or you selected a new input. We can also have event bubbling. This is the order in which event handlers are called when one element is nested inside a second element, and both elements have registered a listener for the same event. So now you may ask, "well what can we do with JavaScript here?". Well we can use JavaScript to set when we interact with the page, the page reacts. Check it out:
<button onclick="displayDate()">The time is?</button>
<button onchange ="displayDate()">The time is?</button>
<button onmouseover="displayDate()">The time is?</button>
How can we add and delete elements from the DOM?
When adding or removing things using our query selector, we will always use a method. In this case, to remove elements we will use the method remove. When adding elements to our document in the DOM we will use add or create followed by what exactly we are adding. Here is an example:
var para = document.createElement("p");
var node = document.createTextNode("This is a new paragraph.");
var elmnt = document.getElementById("p1");
elmnt.remove();
How do we build a Popup?
When building a popup in JavaScript we want to start by adding our HTML and our class as popup. We also need our CSS so our popup can be stylish and look good in general. From here we are now going to use our JavaScript. We are going to use the classList and show tag to then show our popup. Here is how it should look:
<script>
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
</script>
Conclusion
In conclusion the DOM has a wide variety of functions that range from changing up the document to adding new elements. In the DOM we can change just about anything in our document with the query.selector and the method we are going to use.
Top comments (1)
Nice text about the Document. 👍🏽 Keep good work