Tutorial di base JavaScript

Oggetti JavaScript

Funzioni JavaScript

HTML DOM JS

BOM del browser JS

Tutorial di base AJAX

Manuale di riferimento JavaScript

Modifica del contenuto HTML JS DOM Metodi JS HTML DOM

Selettore JS HTML DOM

JavaScript viene utilizzato principalmente per ottenere o modificare il contenuto o il valore degli elementi HTML e applicare alcuni effetti.

Per questo, devi prima trovare l'elemento. Ci sono molti modi per farlo:

Trova l'elemento HTML tramite ID
Trova gli elementi HTML tramite il nome del tag
Trova elementi HTML tramite nome di classe
Trova elementi HTML tramite selettore CSS
Trova elementi HTML tramite raccolte di oggetti HTML

Trova l'elemento HTML per ID

Puoi usaregetElementById()Il metodo seleziona l'elemento in base all'ID unico dell'elemento.

Questo è il metodo più semplice per trovare un elemento HTML nel DOM.

Esempio di selezione di un elemento con attributo IDid="msg"dei seguenti elementi:

Esempio

var x = document.getElementById("msg");

Testa per vedere‹/›

Se si trova l'elemento, questo metodo restituirà l'elemento come oggetto.

Se non si trova l'elemento, myElement conterrà null.

Trova gli elementi HTML tramite il nome del tag

Puoi anche usaregetElementsByTagName()Il metodo seleziona gli elementi HTML tramite il nome del tag.

Questo metodo restituisce una lista simile a un array di tutti gli elementi del documento con il nome di tag specificato.

In questo esempio selezionato tutti<p>Elemento:

Esempio

var x = document.getElementsByTagName("p");

Testa per vedere‹/›

Cambiare il colore di sfondo di tutti gli elementi paragrafo del documento:

Esempio

var x = document.getElementsByTagName("p");
for(let i = 0; i < x.length; i++) {
　　　x[i].style.backgroundColor = "coral";
}

Testa per vedere‹/›

In questo esempio selezionatoid="wrapper"e poi selezionare"wrapper"tutti gli elementi<p>Elemento:

Esempio

var x = document.getElementById("wrapper");
var y = x.getElementsByTagName("p");

Testa per vedere‹/›

Trova elementi HTML tramite nome di classe

Puoi usare questogetElementsByClassName()Metodo per selezionare tutti gli elementi con un nome di classe specifico.

Questo metodo restituisce una lista simile a un array di tutti gli elementi con il nome della classe specificato nel documento.

Questo esempio restituisce tutti gli elementi conclass="demo"Elenco degli elementi:

Esempio

var x = document.getElementsByClassName("demo");

Testa per vedere‹/›

Trova elementi HTML tramite selettore CSS

Puoi usare questoquerySelectorAll()Metodo per selezionare gli elementi che corrispondono al selettore CSS specificato (ID, classe, tipo, ecc.).

Questo metodo restituisce una lista simile a un array di tutti gli elementi che corrispondono al selettore specificato.

I selettori CSS forniscono un metodo molto potente ed efficace per selezionare elementi HTML nel documento.

Esempio

var x = document.querySelectorAll("div");

Testa per vedere‹/›

Questo esempio restituisce tutti gli elementi con"note"di tutti i documenti con classe<div>Elenco degli elementi:

Esempio

var x = document.querySelectorAll("div.note");

Testa per vedere‹/›

Trova elementi HTML tramite raccolte di oggetti HTML

L'elemento più alto del documento HTML può essere utilizzato direttamente come proprietà del documento.

Ad esempio, puoi usare l'attributo per accedere<html>Elementodocument.documentElement.

dettoIl componente può essere accedutodocument.bodyproprietà.

Esempio

var html = document.documentElement;
var body = document.body;

Testa per vedere‹/›

Attenzione:sedocument.bodyinusato prima del tagAll'interno di <head>ritorna null invece dell'elemento body.

Puoi anche accedere ai seguenti oggetti HTML (e raccolte di oggetti):

Proprietà	Descrizione
document.anchors	Restituisce tutti gli elementi con l'attributo nome<a>Elemento
document.applets	Restituisci tutti<applet>Elemento(Disabilitato in HTML5)
document.baseURI	Restituisce l'URI assoluto di base del documento
document.body	RestituisciElemento
document.cookie	Restituisce i cookie del documento
document.doctype	Restituisce il tipo di documento del documento
document.documentElement	Restituisci<html>Elemento
document.documentMode	Restituisce il modello utilizzato dal browser
document.documentURI	Restituisce l'URI del documento
document.domain	Restituisci il dominio del server del documento
document.domConfig	Disabilitato;Restituisci la configurazione DOM
document.embeds	Restituisci tutti<embed>Elemento
document.forms	Restituisci tutti<form>Elemento
document.head	Restituisci<head>Elemento
document.images	Restituisci tutti<img>Elemento
document.implementation	Restituisci l'implementazione DOM
document.inputEncoding	Restituisci la codifica del documento (set di caratteri)
document.lastModified	Restituisci la data e l'ora dell'aggiornamento del documento
document.links	Restituisci tutti gli elementi con l'attributo href<area>e<a>Elemento
document.readyState	Restituisci lo stato del documento (in caricamento)
document.referrer	Restituisci l'URI del richiedente (documento linkato)
document.scripts	Restituisci tutti<script>Elemento
document.strictErrorChecking	Restituisci se viene eseguita la verifica degli errori obbligatoria
document.title	Restituisci<title>Elemento
document.URL	Restituisci l'URL completo del documento

Modifica del contenuto HTML JS DOM Metodi JS HTML DOM