DOM
Recupero di elementi

Per ID

document.getElementById('uniqueID')

recupererà

<div id="uniqueID"></div>

Finché esiste un elemento con l'ID specificato, document.getElementById restituirà solo quell'elemento. Altrimenti, restituirà null .

Nota: gli ID devono essere unici. Più elementi non possono avere lo stesso ID.

Per nome della classe

document.getElementsByClassName('class-name')

recupererà

<a class="class-name">Any</a>
<b class="class-name">tag</b>
<div class="class-name an-extra-class">with that class.</div>

Se nessun elemento esistente contiene la classe data, verrà restituita una raccolta vuota.

Esempio:

<p class="my-class">I will be matched</p>
<p class="my-class another-class">So will I</p>
<p class="something-else">I won't</p>

var myClassElements = document.getElementByClassName('my-class');
console.log(myClassElements.length); // 2
var nonExistentClassElements = document.getElementByClassName('nope');
console.log(nonExistentClassElements.length); // 0

Per nome tag

document.getElementsByTagName('b')

recupererà

<b>All</b>
<b>of</b>
<b>the b elements.</b>

Se non esistono elementi con il nome del tag specificato, verrà restituita una raccolta vuota.

Dal selettore CSS

Prendi in considerazione il seguente codice html

<ul>
  <li id=“one” class=“main”>Item 1</li>
  <li id=“two” class=“main”>Item 2</li>
  <li id=“three” class=“main”>Item 3</li>
  <li id=“four”>Item 4</li>
</ul>

Seguendo dom albero sarà costruito sulla base del codice html sopra

                      ul
    
                      |
    
     |          |         |         |
    
    li         li        li        li
     |          |         |         |
Item 1        Item 2    Item 3    Item 4

Possiamo selezionare elementi dall'albero DOM con l'aiuto di selettori CSS. Questo è possibile grazie a due metodi javascript querySelector() e querySelectorAll() .

Il metodo querySelector () restituisce il primo elemento che corrisponde al selettore css fornito dal DOM.

document.querySelector('li.main')

restituisce il primo elemento li chi è la classe main

document.querySelector('#two')

restituisce l'elemento con id two

NOTA: se non viene trovato alcun elemento, viene restituito un valore null . Se la stringa del selector contiene uno pseudo-elemento CSS, il ritorno sarà null .

Il metodo querySelectorAll () restituisce tutti gli elementi che corrispondono al selettore css fornito dal DOM.

document.querySelectorAll('li.main')

restituisce una lista di nodi contenente tutti gli elementi li che la classe è main .

NOTA : se non viene trovato alcun elemento, viene restituito un elenco di nodi vuoto. Se la stringa selettori contiene uno pseudoelemento CSS, la lista elementi restituita sarà vuota

Selettori delle query

Nei browser moderni [1] , è possibile utilizzare il selettore di tipo CSS per richiedere elementi in un documento, allo stesso modo di sizzle.js (utilizzato da jQuery).

querySelector

Restituisce il primo Element nel documento che corrisponde alla query. Se non c'è corrispondenza, restituisce null .

// gets the element whose id="some-id"
var el1 = document.querySelector('#some-id');
 
// gets the first element in the document containing "class-name" in attribute class
var el2 = document.querySelector('.class-name');
 
// gets the first anchor element in the document
var el2 = document.querySelector('a');
 
// gets the first anchor element inside a section element in the document
var el2 = document.querySelector('section a');

querySelectorAll

Restituisce un NodeList contiene tutti gli elementi nel documento che corrispondono alla query. Se nessuno corrisponde, restituisce un NodeList vuoto.

// gets all elements in the document containing "class-name" in attribute class
var el2 = document.querySelectorAll('.class-name');
 
// gets all anchor elements in the document
var el2 = document.querySelectorAll('a');

// gets all anchor elements inside any section element in the document
var el2 = document.querySelectorAll('section a');