Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • JS Clase04 2 DOM Getelement

    Cargado por

    CamoMaddox
    5 vistas13 páginas
    El documento explica diferentes métodos para acceder y modificar elementos en el DOM (Document Object Model) de JavaScript, incluyendo getElementsByTagName(), getElementsByClassName(), getElementById(), createElement(), appendChild(), y removeChild(). Estos métodos permiten seleccionar, crear, y modificar nodos en el árbol DOM para manipular el contenido y estructura de una página web.

    Descripción original:

    Título original

    JS_Clase04_2_DOM_getElement.pptx

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    El documento explica diferentes métodos para acceder y modificar elementos en el DOM (Document Object Model) de JavaScript, incluyendo getElementsByTagName(), getElementsByClassName(), getElementById(), createElement(), appendChild(), y removeChild(). Estos métodos permiten seleccionar, crear, y modificar nodos en el árbol DOM para manipular el contenido y estructura de una página web.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    5 vistas13 páginas

    JS Clase04 2 DOM Getelement

    Cargado por

    CamoMaddox
    El documento explica diferentes métodos para acceder y modificar elementos en el DOM (Document Object Model) de JavaScript, incluyendo getElementsByTagName(), getElementsByClassName(), getElementById(), createElement(), appendChild(), y removeChild(). Estos métodos permiten seleccionar, crear, y modificar nodos en el árbol DOM para manipular el contenido y estructura de una página web.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 13

    JavaScript: Clase 4 – DOM

    De Oliveira

    Febrero 2023
    Contenido
    Otras formas de acceder y modificar el DOM:
    ➔ getElementsByTagName()
    ➔ getElementsByClassName()
    ➔ getElementById()
    ➔ createElement()
    ➔ appendChild()
    ➔ removeChild()

    JS Clase 4: Objetos
    ¿Cómo se accede a sus elementos?
    Para modificar el DOM necesitamos diferentes MÉTODOS que nos permitan
    acceder a sus elementos

    getElementsByTagName() Cómo son métodos


    del objeto document,
    siempre se escribe
    getElementsByClassName() document.método()

    Tipos de getElementById()
    Métodos
    createElement()
    appendChild()
    removeChild()

    JS Clase 4: Objetos
    Get Elements By Tag Name
    ➔ Recibe un String , (nombre de etiqueta html) <html>
    <body>
    <section id=”parrafo”>
    ➔ Retorna lista de elementos que tienen un tag
    <p> Es un párrafo</p>
    <p> Dos p</p>
    name determinado.
    </section>
    </body>
    ➔ Debemos declarar una variable para almacenar </html>

    el valor <script>
    let p= document.getElementsByTagName(“p”)
    ➔ Podemos acceder a una sola etiqueta del array let firstP= p[0] // <p> Es un parrafo</p>
    </script>
    según el orden de aparición

    JS Clase 4: Objetos
    Get Elements By Class Name
    <html>
    ➔ Recibe un String , (nombre del atributo class)
    <body>
    <section class=”example” >
    ➔ Retorna lista de elementos que tienen dicha <p class=”example”> Es un párrafo</p>
    <p> Dos p</p>
    clase . </section>
    </body>

    ➔ Debemos declarar una variable para </html>

    almacenar el valor <script>


    let ex = document.getElementsByClassName(“example”)
    let firstP= ex[0] // <p> Es un parrafo</p>
    ➔ Podemos acceder a una sola etiqueta del
    </script>

    array según el orden de aparición

    JS Clase 4: Objetos
    Get Element By Id
    ➔ Recibe un String <html>
    <body>
    <section id=”menu”>
    ➔ Retorna un objeto element del HTML que </section>
    <section id=”parrafo”>
    coincidan con el id de la búsqueda <p> Es un párrafo</p>
    </section>
    ➔ Debemos declarar una variable para </body>
    </html>
    almacenar el valor
    <script>
    Nota: No es recomendable cambiar el estilo en línea let menuSelect = document.getElementById(‘menu’)
    menuSelect.style.color = red
    </script>

    JS Clase 4: Objetos
    Create Element
    ➔ Permite crear nuevos elementos al árbol <html>
    <body>
    <h1> Hola mundo </h1>
    del DOM.
    </body>
    </html>
    ➔ Recibe el nombre de la etiqueta html
    <script>
    ➔ Debemos declarar una variable para let listaConOrden= document.createElement(‘ol’)
    </script>

    almacenar el valor

    JS Clase 4: Objetos
    Append Child
    ➔ Permite agregar nuevos elementos al árbol <html>
    <body>
    <h1> Hola mundo </h1>
    del DOM.
    </body>
    </html>
    ➔ Recibe el nombre de un elemento
    <script>
    let listaConOrden= document.createElement(‘ol’)
    ➔ Debemos aclarar en dónde lo vamos a
    document.body.appendChild(listaConOrden)

    agregar
    </script>

    JS Clase 4: Objetos
    Remove Child
    ➔ Permite eliminar elementos del árbol del <html>
    <body>
    <h1> Hola mundo </h1>
    DOM.
    <h2 id=”dos”> Hola mundo mal </h2>
    </body>
    ➔ Recibe el nombre de un elemento </html>

    <script>
    ➔ Podemos almacenar en una variable el
    let h1Mal= document.getElementById(“dos”)
    document.body.removeChild((h1Mal)
    nodo eliminado
    </script>

    JS Clase 4: Objetos
    Resumen
    ✓ El DOM visualiza el documento de HTML como un árbol de tres nodos.
    ✓ Accedemos a sus nodos a través de métodos:
    ✓ getElementsByTagName(): nos permite capturar una etiqueta
    ✓ getElementsByClassName():nos permite capturar un elemento que contenga
    dicha clase
    ✓ getElementsById():nos permite capturar un elemento con dicho id
    ✓ createElement():nos permite crear un nuevo elemento
    ✓ appendChild():nos permite agregar un elemento al DOM
    ✓ removeChild():nos permite remover un elemento del DOM

    JS Clase 4: Objetos
    Ejercicio
    1) Crear un contador que incremente en uno cada vez que el usuario presiona un botón.
    Pista: investigar sobre el atributo `onclick` para el botón.

    1) Crear un formulario que le permita al usuario ingresar su nombre y email. Cuando el


    usuario manda el formulario, crea un nuevo paragraph (<p>) que muestre los datos
    ingresados. Pista: Investigar sobre el atributo `onsubmit` para el form.

    JS Clase 4: Objetos

    También podría gustarte