The Document Model

What is the DOM (Document Model)?

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.

The Query Selector

query.Selector is a method used to find the content of an element:

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:

// 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:

// 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

Using "getAttribute" the user can add attributes to a tag of their choice:

// 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

"setAttribute" is also used to edit existing css:

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

using "content" and "classlist" the user can change, add or remove a class:

// 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

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:

const doc= document.querySelector('doc');
 Array.from(doc.children);

 Array.from(doc.children).forEach(child => {
child.classList.add('doc.element');
 });

Creating and Removing elements

the user can use ".remove" and ".addEventListener" to add and remove elements:

// 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

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

The NetNinja's udemy course

www.w3schools.net