DOM
Manipolazione di elementi
Ricerca…
Elementi di clonazione
Un elemento può essere clonato invocando il metodo cloneNode su di esso. Se il primo parametro passato a cloneNode è true , anche i figli dell'originale verranno clonati.
var original = document.getElementsByTagName("li")[0];
var clone = original.cloneNode(true);
Aggiungere un elemento
In questo esempio creiamo un nuovo elemento di lista con il testo "nuovo testo" e selezioniamo il primo elenco non ordinato e il suo primo elemento di elenco.
let newElement = document.createElement("li");
newElement.innerHTML = "new text";
let parentElement = document.querySelector("ul");
let nextSibling = parentElement.querySelector("li");
Quando inseriamo un elemento, lo facciamo sotto l'elemento genitore, e appena prima di un particolare elemento figlio di quell'elemento genitore.
parentElement.insertBefore(newElement, nextSibling);
Il nuovo elemento è inserito in
parentElemente poco prima dinextSibling.
Quando si vuole inserire un elemento come ultimo elemento figlio di parentElement , il secondo argomento può essere null .
parentElement.insertBefore(newElement, null);
Il nuovo elemento è inserito in
parentElementcome ultimo figlio.
Invece, appendChild() può essere usato per aggiungere semplicemente il figlio ai figli del nodo genitore.
parentElement.appendChild(newElement);
Il nuovo elemento è inserito in
parentElementcome ultimo figlio.
Sostituzione di un elemento
In questo esempio creiamo un nuovo elemento di lista con il testo "nuovo testo" e selezioniamo il primo elenco non ordinato e il suo primo elemento di elenco.
let newElement = document.createElement("li");
newElement.innerHTML = "new text";
let parentElement = document.querySelector("ul");
let nextSibling = parentElement.querySelector("li");
Per sostituire un elemento, utilizziamo replaceChild :
parentElement.replaceChild(newElement, nextSibling);
nextSiblingviene rimosso dal DOM. Al suo posto ora ènewElement.
Rimozione di un elemento
Un elemento può essere rimosso chiamando remove() su di esso. In alternativa, si può chiamare removeChild() sul suo genitore. removeChild() ha un supporto browser migliore di remove() .
element.remove();
element, e tutti i suoi childnodes, vengono rimossi dal DOM.
parentElement.removeChild(element);
element, e tutti i suoi childnodes, vengono rimossi dal DOM.
In ogni caso, è possibile inserire questo nodo nel DOM in un secondo momento, purché vi siano ancora riferimenti a questo nodo.
Aggiungi e sospendi metodi
JavaScript ora ha i metodi Accoda e Previa che erano presenti in jQuery
Il vantaggio principale di append e prepend è diverso appendChild e insertBefore , si possono prendere qualsiasi numero di argomenti o elementi HTML o testo normale (che verrà convertito in testo nodi).
Per accodare diciamo 1 div, 1 nodo di testo e 1 span
document.body.append(document.createElement('div'),"Hello world",document.createElement('span'))
Questo cambierà la pagina nella seguente struttura
<body>
.....(other elements)
<div></div>
"Hello World"
<span></span>
</body>
Indipendentemente lo stesso nel corpo
Uso
document.body.prepend(document.createElement('div'),"Hello world",document.createElement('span'))
Questo cambierà la pagina nella seguente struttura
<body>
<div></div>
"Hello World"
<span></span>
.....(other elements)
</body>
Si noti che i supporti del browser sono
Chrome 54+
Firefox 49+
Opera 39+
Maggiori informazioni su MDN
