JAVASCRIPT DOM

Links

W3Schools


    //JAVASCRIPT DOM Document Object Model 
    HTML DOM is constructed as a tree of objects: Document,
    JavaScript can change all the HTML elements in the page 
    JavaScript can change all the HTML attributes in the page
    JavaScript can change all the CSS styles in the page
    JavaScript can remove existing HTML elements and attributes
    JavaScript can add new HTML elements and attributes
    JavaScript can react to all existing HTML events in the page
    JavaScript can create new HTML events in the page


    //DOM METHODS
    document.getElementById();
    VAR.innerHTML = "New Text";
    document.getElementById("demo").innerHTML = "Hello World!";

    document.getElemenyByTagName();
    document.getElemenyByClassName();
    document.querySelector();
    document.querySelectorAll();


    //DOM FINDING HML ELEMENTS 
    document.getElemenyByTagName();
    document.getElemenyByClassName();
    document.querySelector();
    document.querySelectorAll();


    //DOM FINDING CHILDREN with Nodes SMARTER WAY TO LEARN JAVASCRIPT
    var p = document.childNodes[0].childNodes[1].childNodes[1].childNodes[1];
    html > body > div > p
    first node is html, then head[0] and body[1] and then the elements you use

    var nType = targetNode.nodeTye;
    var targetNode = parentNode.firstChild //gets to a specific children firstChild, lastChild
    var nName = targetNode.nodeName; //gives you p DIV, SPAN, IMG
    var nName = targetNode.nodeValue; //gives you the value, but is different to innerHTML, will not give you subnode values like span o em inside a node p. innerHTML does this

    //Counting Elements
    var liElements = getElementsByTagName("li");
    var howManyLi = liElements.lenght();

    //Attributes
    var target = getElementById("p1");
    var hasClass = target.hasAttribute("class"); //searches if an element has an attribute of class
    var attVal = target.getAttribute("class"); //gets the value
    var attVal = target.setAttribute("class"); //sets the value
    var list = document.getElementBy('id').attributes; //gets all attributes of the element
    var nName = list[2].nodeName;

    //Adding nodes
    var nodeToAdd = document.createElement("p"); //adds a new node
    nodeToAdd.setAttribute("class", "regular"); //Add an attribute to the node
    var newTxt = document.createTextNode("Hello!"); //adds a new node
    nodeToAdd.appendChild(newTxt);

    //Inserting Nodes
    var parentDiv = .document.getElementBzId("div1");
    var newParagraph = document.createElement("p");
    var t = document.createTextNode("Hello World");
    newParagraph.appendChild(t);
    parentDiv.appendChild(newParagraph);


    //DOM CHANGING HTML ELEMENTS
    //Properties
    element.innerHTML
    element.attribute 
    element.style.property = new style
    //Methods
    element.setAttribute(attribute, value)


    //DOM ADDING / DELETING ELEMENTS METHODS
    document.createElement(element)
    document.removeChild(element)
    document.appendChild(element)
    document.replaceChild(new, old)
    document.write(text)


    //DOM EVENTS
    document.getElementById(id).onclick = function(){code}
    <h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
    <body onload="checkCookies()"></body>

    onchange="upperCase()"

    //MOUSE
    onmouseover
    onmouseout
    onmousedown
    onmouseup
    onfocus


    //DOM CSS
    document.getElementById("p2").style.color = "blue";


    //DOM EVENT LISTENER
    element.addEventListener(event, function, useCapture);
    document.getElementById("myBtn").addEventListener("click", displayDate);


    //DOM CSS
    document.getElementById("p2").style.color = "blue";


    //DOM NAVIGATION
    html root Node
    parent of head and body 

    Navigate: parentNode, childNode[i], firstChild, lasChild, nextSibling, previousSibling
    node vs text node: Text node is the text inside a tag. The node is the tag, doesn't have text
    document.createElement("p");
    document.creadeTextNode("This is new");
    
    firstChild.nodeValue

    document.body
    document.documentElement
    .nodeName .nodeType .nodeValue


    //DOM COLLECTIONS
    const myCollection = document.getElementsByTagName("p");
    for (let i = 0; i < myCollection.length; i++) {
        myCollection[i].style.color = "red";
      }


    //DOM DIFFERENCE COLLECTION NODELIST
    An HTMLCollection (previous chapter) is a collection of HTML elements.
    A NodeList is a collection of document nodes, can be accesed only by index number, only this can have attribute nodes and text nodes