Scribd Logo
Upload

Welcome to Scribd!

  • JavaScript and The DOM

    Uploaded by

    Luis Almeida
    7 views6 pages
    The document discusses various methods for manipulating and accessing elements in the DOM, including: 1) Using relative and absolute paths to link script files; 2) Adding and removing child elements using removeChild() and appendChild(); 3) Accessing parent nodes with parentNode and getting/setting inner HTML with innerHTML; 4) Creating new elements with createElement(), selecting elements with getElementById(), querySelector(), and accessing the document body.

    Original Description:

    Original Title

    JavaScript and the DOM

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses various methods for manipulating and accessing elements in the DOM, including: 1) Using relative and absolute paths to link script files; 2) Adding and removing child elements using removeChild() and appendChild(); 3) Accessing parent nodes with parentNode and getting/setting inner HTML with innerHTML; 4) Creating new elements with createElement(), selecting elements with getElementById(), querySelector(), and accessing the document body.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    7 views6 pages

    JavaScript and The DOM

    Uploaded by

    Luis Almeida
    The document discusses various methods for manipulating and accessing elements in the DOM, including: 1) Using relative and absolute paths to link script files; 2) Adding and removing child elements using removeChild() and appendChild(); 3) Accessing parent nodes with parentNode and getting/setting inner HTML with innerHTML; 4) Creating new elements with createElement(), selecting elements with getElementById(), querySelector(), and accessing the document body.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 6

    <!

    -- Using a relative path -->


    <script src="./script.js"></script>

    <!-- Using an absolute path -->


    <script src="https://code.jquery.com
    /jquery-3.3.1.min.js"></script>

    <body>
    <script src="main.js" defer></script>
    <h1>Hello</h1>
    </body>

    <body>
    <script src="main.js" async></script>
    <h1>Hello world!</h1>
    </body>

    <script>
    console.log("Hello world!");
    </script>
    <h1 id="heading">Welcome!</h1>
    <body>
    <p>first child</p>
    <p>second child</p>
    </body>

    removeChild()
    const groceryList =
    document.getElementById('groceryList');
    const iceCream =
    document.getElementById('iceCream');

    groceryList.removeChild(iceCream);

    element.parentNode
    <div id="parent">
    <p id ="first-child">Some child
    text</p>
    <p id ="second-child">Some more child
    text</p>
    </div>
    <script>
    const firstChild =
    document.getElementById('first-child');
    firstChild.parentNode; // reference to
    the #parent div
    </script>

    document.createElement()
    const newButton =
    document.createElement("button");
    element.InnerHTML
    <box>
    <p>Hello there!</p>
    </box>

    <script>
    const box =
    document.querySelector('box');
    // Outputs '<p>Hello there!</p>':
    console.log(box.innerHTML)
    // Reassigns the value:
    box.innerHTML = '<p>Goodbye</p>'
    </script>

    document
    const body = document.body;

    document.getElementById()
    // Save a reference to the element with
    id 'demo':
    const demoElement =
    document.getElementById('demo');
    .querySelector()
    // Select the first <div>
    const firstDiv =
    document.querySelector('div');

    // Select the first .button element


    inside .main-navigation
    const navMenu =
    document.getElementById('main-
    navigation');
    const firstButtonChild =
    navMenu.querySelector('.button');

    document.body

    element.onclick
    let element =
    document.getElementById('addItem');
    element.onclick = function() {
    let newElement =
    document.createElement('li');

    document.getElementById('list').appendChi
    ld(newElement);
    };

    element.appendChild()
    var node1 = document.createElement('li');
    document.getElementById('list').appendChi
    ld(node1);
    element.style
    let blueElement =
    document.getElementById('colorful-
    element');
    blueElement.style.backgroundColor =
    'blue';

    You might also like