DOM (el documento HTML en el navegador)

El DOM (Document Object Model) es una forma de representar un documento HTML (o XML) como un árbol de nodos.
Utilizando los métodos y propiedades del DOM podremos acceder a los elementos de la página, modificarlo, eliminarlos o añadir nuevos

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Página sencilla</title>
    </head>
    <body>
        <p>Esta página es <strong>muy sencilla</strong></p>
    </body>
</html>

En cualquier página web tenemos disponible el objeto document que contiene multitud de métodos y propiedades para interactuar con el DOM.

Selección (nativa) de elementos

El objeto document provee de métodos para seleccionar nodos. Estos métodos devuelven objetos element a través de los cuales podremos acceder a las propiedades de estos nodos.

Dado este HTML...

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
</head>
<body>
     <p id="name">juanma<p>
     <ul id="guitar-players">
        <li id="jimi" class="rock blues">Jimi Hendrix</li>
        <li class="blues"><a href="http://www.ericclapton.com/">Eric Clapton</a>a></li>
        <li class="rock">Eddie Van Halen</li>
        <li class="rock">Yngwie Malmsteen</li>
        <li class="jazz">Django Reinhardt</li>
        <li class="blues"><a href="http://www.bbking.com/">B.B.King</a></li>
        <li class="blues rock">Gary Moore</li>
     </ul>
</body>
</html>

Algunos de estos métodos para seleccionar elementos son:

document.getElementById() Devuelve una referencia al elemento por su ID

    var myName = document.getElementById(“name”);

document.getElementsByClassName() o element.getElementsByClassName Devuelve una lista de elementos (llamada HTMLCollection) con los nombres de clase indicados


    var bluesGuitarPlayers = document.getElementsByClassName('blues')
    var rockGuitarPlayers = document.getElementsByClassName('rock')

    // or to restrict the search in an element...
    var myList = document.getElementById("guitar-players");
    var myBluesGuitarPlayers = myList.getElementsByClassName('blues')
    var myRockGuitarPlayers = myList.getElementsByClassName('rock')

    console.log( myRockGuitarPlayers[0].innerHTML )
    console.log( myRockGuitarPlayers.item(0).innerHTML )
    console.log( myRockGuitarPlayers.namedItem("jimi").innerHTML )

    for (var i = 0; i < myRockGuitarPlayers.length; ++i) {
      var link = myRockGuitarPlayers[i];  
      console.log(link.innerHTML);
    }

document.getElementsByTagName() o element.getElementsByTagName() Devuelve una lista de elementos (HTMLCollection) con un tipo de tag determinado

    var links = document.getElementsByTagName('a')

    // or to restrict the search in an element...
    var myList = document.getElementById("guitar-players");
    var linksGuitarPlayers = myList.getElementsByTagName('a')

document.querySelector() o element.querySelector() Retorna el primer elemento dentro del documento que coincide con el grupo especificado de selectores.

    var linkBluesGuitarPlayer = document.querySelector('#guitar-players .blues a')

    // or to restrict the search in an element...
    var myList = document.getElementById("guitar-players");
    var linkBluesGuitarPlayer = myList.querySelector('.blues a')
    console.log(linkBluesGuitarPlayer.href);

document.querySelectorAll() o element.querySelectorAll() Devuelve una lista de los elementos (una NodeList) que coinciden con el grupo especificado de selectores

    var linksBluesGuitarPlayers = document.querySelectorAll('#guitar-players .blues a')

    // or to restrict the search in an element...
    var myList = document.getElementById("guitar-players");
    var linksBluesGuitarPlayers = myList.querySelectorAll('.blues a')

    for (var i = 0; i < linksBluesGuitarPlayers.length; ++i) {
      var link = linksBluesGuitarPlayers[i];  
      console.log(link.href);
    }

Examples live at: https://jsfiddle.net/juanma/ctmsekgz/

Selección de elementos con jQuery

jQuery es una libreria que nos provee de una serie de métodos y utilidades dentro del objeto jQuery (o $) que nos facilitan la interactuación con el DOM mediante javascript

Para utilizar jQuery tendremos que cargar la libreria antes de utilizar sus métodos

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
</head>
<body>

    <a href="http://jquery.com/">jQuery</a>
    #leanpub-start-insert
    <script src="jquery.js"></script>
    #leanpub-end-insert
    <script>

    // Your code (with optional jquery code) goes here.

    </script>
</body>
</html>

`$()` o `jQuery()`

Con jQuery podemos crear objetos jQuery a partir de selecciones que pasamos como parametros al metodo $().

Con jQuery disponemos de una potente herramienta de selección de elementos

Para obtener los elementos utilizamos $() o jQuery() pasándole nuestra selección CSS entre comillas

var $linksBluesGuitarPlayers = $('#guitar-players .blues a')

// or to restrict the search in an element...
var $myList = $("#guitar-players");
var $linksBluesGuitarPlayers = $myList.find('.blues a')

$linksBluesGuitarPlayers.each (function(index,element) {
  console.log( $( this ).text() );
  console.log( "index:",index );
  console.log( "element:",element );
})

Selección nativa vs selección jQuery

$() devuelve un objeto jQuery (que no es un elemento DOM y tiene acceso a métodos propios de jQuery)

Estas diferencias hay que tener en cuentas para recorrer los elementos de las selecciones y para acceder a las propiedades de los elementos

Podemos pasar de objeto jQuery a selección DOM:

Para un elemento

$('#container') -> $('#container')[0]

Para un grupo de elementos

$('.hidden') -> $('.hidden').toArray()

Tambien podemos pasar de selección DOM a objeto jQuery:

Para un elemento:

document.getElementById('container') -> $(document.getElementById('container'))

Para un grupo de elementos:

document.links -> $(document.links);

>>> $('#container');
jQuery(div#container)
>>> $('#container')[0]

<div id="container">
>>> $('#footer_contents')
jQuery(div#footer_contents.clearfix)
>>> $('#footer_contents')[0]

<div id="footer_contents" class="clearfix">
>>> $('#footer_contents').attr("class");
"clearfix"
>>> $('#footer_contents').className
undefined
>>> $('#footer_contents')[0].className
"clearfix"
>>> $('#footer_contents')[0].attr("class");
 TypeError: $("#footer_contents")[0].attr is not a function

 >>> $('div.hidden')
 jQuery(div#ads_section_textlinks.clearfix, div#top_sales.top_box,
 div#top_valuated.top_box, div.list_container, div.ac_results)

 >>> $('div.hidden').toArray()
 [div#ads_section_textlinks.clearfix, div#top_sales.top_box,
 div#top_valuated.top_box, div.list_container, div.ac_results]

 >>> $('div.hidden').toArray()[0]
 <div id="ads_section_textlinks" class="clearfix
 hidden" style="display: block;">

 >>> document.getElementById('ads_section_textlinks');
 <div id="ads_section_textlinks" class="clearfix
 hidden" style="display: block;">

 >>> $(document.getElementById('ads_section_textlinks'));
 jQuery(div#ads_section_textlinks.clearfix)

 >>> $(document.querySelectorAll('div.hidden')[0]);
 jQuery(div#ads_section_textlinks.clearfix)

DOM

DOM (el documento HTML en el navegador)

Selección (nativa) de elementos

Selección de elementos con jQuery

`$()` o `jQuery()`

Selección nativa vs selección jQuery

results matching ""

No results matching ""

DOM (el documento HTML en el navegador)

Selección (nativa) de elementos

Selección de elementos con jQuery

$() o jQuery()

Selección nativa vs selección jQuery

results matching ""

No results matching ""

`$()` o `jQuery()`