Sesion 11
The Document Object Model
-DOM-


STYLING WITH JS

To modify

Style WITH JS

Hello I'm a P element Google

  • Google
  • Brush Teeths
  • Wash the face
  • Clean the room
  • Reed your book

Classes list

NodeElement.classList

This is a function of the DOM to return all of clases of a element have

For crashed moments Node and Node Element, diferences, it's a great place to understand them



THIS ALLOWS US, to add class instance of modify directly the css of the elements of the web

Some things inside me

Hi im a paragrahp!

Remeber, add a ";" after the "{}", like this "};" become null the rule of the css.

classList, methods are

  1. add, add a class
  2. remove, remove a class
  3. toggle, swithc a class to aply or not aply, depending if it's aplayed or not
                        function CheckBgColor(){
                            let check = document.querySelectorAll("fieldset .chekcDIv")[0];
                            check.style.backgroundColor = fithColor;
                            check.style.borderRadius = borderRadius;
                            check.style.padding = "15px";
                            check.firstElementChild.style.color = white;
                            check.lastElementChild.style.color = grayColor;
                        };
                        
                        function checkboxClases(){
                            let check = document.querySelectorAll("fieldset .chekcDIv")[1];
                            console.log(check.classList)
                            alert(check.classList)
                        };
                        
                        function addCheckClass(){
                            document.querySelectorAll("fieldset .chekcDIv")[1].classList.add("bg-green");
                            document.querySelectorAll("fieldset .chekcDIv")[1].classList.remove("thisIsAnotherClass");
                        };
                        function removCheckClass(){
                            document.querySelectorAll("fieldset .chekcDIv")[1].classList.remove("bg-green");
                        };
                        function hideP(){
                            document.querySelector("#hiThere").classList.toggle("unvisibility");
                        };
                    

Modifying text

TextContent

This modify the text insade an element

element.inner.HTML return literally all the html insade of an element, for example:

"<h1><span>Hello</span></h1>", of this innterHTML return: <span>Hello</span>

In another way, element.textContent return just the text

"<h1><span>Hello</span></h1>", of this textContent return: Hello



Atributes

To modify atributes, we need to select the elemente, after that, set the atribute of the element with the whised value

Getting

element.atributes, return the list of atributes of the element

White element.getAtribute("atributeName") we can get the name of the wished atribute

Setting

White element.setAtribute("atributeName", "atributeNewValue") we can change the name of the wished atribute

Hi i'm another fieldset

Heading 1

Google

A paragrahp

classList, methods are