Nothing Special   »   [go: up one dir, main page]
Scribd Logo
Upload

Welcome to Scribd!

  • 169 views

    23 Dom Manipulation PDF

    Uploaded by

    Enrique Mejia Florez
    The document discusses different ways to manipulate elements in the DOM, including changing styles with the style property or CSS classes, modifying text content, innerHTML, and attributes. It recommends defining styles in CSS rather than directly in JavaScript for separation of concerns. The classList property can be used to add, remove, and toggle CSS classes. getAttribute() and setAttribute() access and update element attributes like src and href.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    23 Dom Manipulation PDF

    Uploaded by

    Enrique Mejia Florez
    169 views9 pages
    The document discusses different ways to manipulate elements in the DOM, including changing styles with the style property or CSS classes, modifying text content, innerHTML, and attributes. It recommends defining styles in CSS rather than directly in JavaScript for separation of concerns. The classList property can be used to add, remove, and toggle CSS classes. getAttribute() and setAttribute() access and update element attributes like src and href.

    Original Description:

    Original Title

    23-dom-manipulation.pdf

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document discusses different ways to manipulate elements in the DOM, including changing styles with the style property or CSS classes, modifying text content, innerHTML, and attributes. It recommends defining styles in CSS rather than directly in JavaScript for separation of concerns. The classList property can be used to add, remove, and toggle CSS classes. getAttribute() and setAttribute() access and update element attributes like src and href.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    169 views9 pages

    23 Dom Manipulation PDF

    Uploaded by

    Enrique Mejia Florez
    The document discusses different ways to manipulate elements in the DOM, including changing styles with the style property or CSS classes, modifying text content, innerHTML, and attributes. It recommends defining styles in CSS rather than directly in JavaScript for separation of concerns. The classList property can be used to add, remove, and toggle CSS classes. getAttribute() and setAttribute() access and update element attributes like src and href.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 9

    DOM Manipulation

    DOM Manipulation
    We're going to cover different ways of:

    changing an element's style


    adding/removing classes
    changing the content of a tag
    changing attributes(src, href, etc.)
    Style
    The style property is one way to manipulate an element's style

    /SELECT
    var tag = document.getElementById("highlight");

    //MANIPULATE
    tag.style.color = "blue";
    tag.style.border = "10px solid red";
    tag.style.fontSize = "70px";
    tag.style.background = "yellow";
    tag.style.marginTop = "200px";
    Is This a Bad Idea?
    It is recommended for styles to be defined in a separate file or files.
    The style property allows for quick styling, for example for testing
    purposes. - MDN

    Separation of Concerns

    http://blog.teamtreehouse.com
    An Alterative
    Rather than directly manipulating style with JS, we can
    define a CSS class and then toggle it on or off with JS
    //INSTEAD OF THIS:
    var tag = document.getElementById("highlight");
    tag.style.color = "blue";
    tag.style.border = "10px solid red";

    /*DEFINE A CLASS IN CSS*/


    .some-class {
    color: blue;
    border: 10px solid red;
    }

    var tag = document.getElementById("highlight");


    //ADD THE NEW CLASS TO THE SELECTED ELEMENT
    tag.classList.add("some-class");
    classList
    A read-only list that contains the classes for a
    given element. It is not an array.
    /*DEFINE A CLASS IN CSS*/
    .another-class {
    color: purple;
    fontSize: 76px;
    }

    var tag = document.querySelector("h1");

    //ADD A CLASS TO THE SELECTED ELEMENT


    tag.classList.add("another-class");

    //REMOVE A CLASS
    tag.classList.remove("another-class");

    //TOGGLE A CLASS
    tag.classList.toggle("another-class");
    textContent
    Returns a string of all the text contained in
    a given element
    <p>
    This is an <strong>awesome</strong> paragraph
    </p>

    /Select the <p> tag:


    var tag = document.querySelector("p");

    //Retrieve the textContent:


    tag.textContent //"This is an awesome paragraph"

    //alter the textContent:


    tag.textContent = "blah blah blah";
    innerHTML
    Similar to textContent, except it returns a string
    of all the HTML contained in a given element
    <p>
    This is an <strong>awesome</strong> paragraph
    </p>

    //Select the <p> tag:


    var tag = document.querySelector("p");

    tag.innerHTML
    //"This is an <strong>awesome</strong> paragraph"
    Attributes
    Use getAttribute() and setAttribute() to read and
    write attributes like src or href
    <a href="www.google.com">I am a link</a>
    <img src="logo.png">

    var link = document.querySelector("a");


    link.getAttribute("href"); //"www.google.com"
    //CHANGE HREF ATTRIBUTE
    link.setAttribute("href","www.dogs.com");
    ///<a href="www.dogs.com">I am a link</a>

    //TO CHANGE THE IMAGE SRC


    var img = document.querySelector("img");
    img.setAttribute("src", "corgi.png");
    //<img src="corgi.png">

    You might also like