The Document Model
Tags: javascript
Published: 2021-01-12 16:43:01

## What is the DOM (Document Model)? </a>
### The DOM is a visual layout of the document, this visual highlights the hierarchical relationships with the elements. The DOM allows for use of pop ups, adding and deleting content, editing existing text and identifying the contents of any element. 

![alt text](https://www.w3schools.com/js/pic_htmltree.gif)
### The Query Selector </a>
### `query.Selector` is a method used to find the content of an element: </a>
``` Java
const heroImg = document.query.Selector('img')
// This will search through the doc and select the first occurrence of "img"
```
#### The Query Selector can be used to select many different types of elements and tags: </a>
``` Java
// using a "." will select all items in a class:
let list1 = document.query.Selector('.list1')
// using "[]" allows the user to select one element from a list:
let listItem2 = document.query.Selector(list1[1])
// using "getElementById" selects items based on their id:
let firstHeading = document.getElementById('heading1')
```
### Changing Page Content: </a>
``` Java
// using the method "innerText" and "+=" allows the user to add content to a single tag:
let firstHeading = document.querySelector('');
console.log(firstHeading.innerText);
firstHeading.innerText += 'this is the new heading';
// the user can change the text in several tags at once using the "forEach" method:
let paragraphs = document.querySelector('');
paragraphs.forEach(paragraphs => {
paragraphs.innerText += 'new text' });
```
### Setting Attributes </a>
### Using "getAttribute" the user can add attributes to a tag of their choice: </a>
``` Java
// this example is how to get an attribute to an existing tag:
let link1 = document.querySelector('a');
console.log(link.getAttribute('href'));
// this is an example of how to set an attribute:
link.setAttribute('href', https://www.com')
```
### Editing CSS Through the DOM </a>
### "setAttribute" is also used to edit existing css: </a>
``` Java
title.setAttributes('style', 'margin: 50px', 'border: solid black')
// the user can also add css to existing css:
console.log(title.style);
title.style.margin = '50px';
// the user can use console.log to display the value of a css key word:
console.log(title.stles.color)
```
### Adding and Removing Classes </a>
### using "content" and "classlist" the user can change, add or remove a class:
``` Java
// display the current class
letcontent = document.querySelector('p');
console.log(content.classlist);
// Adding, using ".add" adds a class name
content.classList.add('error');
// Removingm using ".remove takes a class name away
content.classList.remove('error');
```
### Parents, Children and siblings </a>
![alt text](https://res.cloudinary.com/practicaldev/image/fetch/s--B2Ts1hyb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/http://i67.tinypic.com/2nqegt2.jpg)
### This is a node tree, this visual represents the relationship between the tags
### Elements with the same parent elements are called siblings, elements that come from other elements are known as children
### Using the parent-child relationship the user can use "Array.from" and ".children" to apply a class to multiple elements: </a>
``` Java
const doc= document.querySelector('doc');
 Array.from(doc.children);

 Array.from(doc.children).forEach(child => {
child.classList.add('doc.element');
 });
```
### Creating and Removing elements </a>
### the user can use ".remove" and ".addEventListener" to add and remove elements: </a>
``` Java
// delete element
const ul = document.querySelector('ul');
ul.remove();

// add method to element
const button = document.querySelector('button');
button.addEventListener('click', ( => {
    ul.innerHTML += '<li> something new </li>';
})
```
### Conclusion </a>
### The DOM allows for a wide expansion of the user's toolkit. It allows change for HTMl and CSS from java. The DOM could very helpful for revising a web page in progress.
### Resources </a>
### The NetNinja's udemy course </a>
### www.w3schools.net </a>