El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Selecció i Manipulació d'Elements del DOM

Següent ►
►

En aquest tema, aprendrem com seleccionar i manipular elements del Document Object Model (DOM) utilitzant JavaScript. El DOM és una representació estructurada del document HTML que permet a JavaScript accedir i modificar el contingut, l'estructura i l'estil de la pàgina web.

  1. Selecció d'Elements del DOM

1.1. getElementById

Aquest mètode retorna un element amb un ID específic.

// HTML: <div id="myDiv">Hello World</div>
const myDiv = document.getElementById('myDiv');
console.log(myDiv); // <div id="myDiv">Hello World</div>

1.2. getElementsByClassName

Aquest mètode retorna una col·lecció d'elements amb una classe específica.

// HTML: <div class="myClass">Hello</div><div class="myClass">World</div>
const elements = document.getElementsByClassName('myClass');
console.log(elements); // HTMLCollection [div.myClass, div.myClass]

1.3. getElementsByTagName

Aquest mètode retorna una col·lecció d'elements amb un nom de tag específic.

// HTML: <p>Paragraph 1</p><p>Paragraph 2</p>
const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs); // HTMLCollection [p, p]

1.4. querySelector

Aquest mètode retorna el primer element que coincideix amb un selector CSS.

// HTML: <div class="myClass">Hello</div>
const element = document.querySelector('.myClass');
console.log(element); // <div class="myClass">Hello</div>

1.5. querySelectorAll

Aquest mètode retorna tots els elements que coincideixen amb un selector CSS.

// HTML: <div class="myClass">Hello</div><div class="myClass">World</div>
const elements = document.querySelectorAll('.myClass');
console.log(elements); // NodeList [div.myClass, div.myClass]

  1. Manipulació d'Elements del DOM

2.1. Modificar el Contingut de Text

Podem utilitzar la propietat textContent per modificar el text d'un element.

const myDiv = document.getElementById('myDiv');
myDiv.textContent = 'New Content';

2.2. Modificar el Contingut HTML

Podem utilitzar la propietat innerHTML per modificar el contingut HTML d'un element.

const myDiv = document.getElementById('myDiv');
myDiv.innerHTML = '<p>New HTML Content</p>';

2.3. Modificar Atributs

Podem utilitzar el mètode setAttribute per modificar els atributs d'un element.

const myDiv = document.getElementById('myDiv');
myDiv.setAttribute('class', 'newClass');

2.4. Modificar Estils

Podem utilitzar la propietat style per modificar els estils CSS d'un element.

const myDiv = document.getElementById('myDiv');
myDiv.style.color = 'blue';
myDiv.style.fontSize = '20px';

2.5. Afegir i Eliminar Classes

Podem utilitzar les propietats classList.add i classList.remove per afegir o eliminar classes d'un element.

const myDiv = document.getElementById('myDiv');
myDiv.classList.add('newClass');
myDiv.classList.remove('oldClass');

Exercicis Pràctics

Exercici 1

Selecciona l'element amb l'ID header i canvia el seu text a "Benvingut al meu lloc web".

<!-- HTML -->
<h1 id="header">Hello</h1>
// JavaScript
const header = document.getElementById('header');
header.textContent = 'Benvingut al meu lloc web';

Exercici 2

Selecciona tots els elements amb la classe item i canvia el seu color de text a vermell.

<!-- HTML -->
<ul>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>
// JavaScript
const items = document.querySelectorAll('.item');
items.forEach(item => {
  item.style.color = 'red';
});

Exercici 3

Afegeix la classe highlight a l'element amb el tag p.

<!-- HTML -->
<p>Paràgraf a destacar</p>
// JavaScript
const paragraph = document.querySelector('p');
paragraph.classList.add('highlight');

Conclusió

En aquesta secció, hem après com seleccionar i manipular elements del DOM utilitzant JavaScript. Hem vist diversos mètodes per seleccionar elements i diferents tècniques per modificar el seu contingut, atributs i estils. La manipulació del DOM és una habilitat fonamental per a qualsevol desenvolupador web, ja que permet crear pàgines web dinàmiques i interactives. En el següent tema, explorarem la gestió d'esdeveniments en el DOM.

◄ Anterior
◄
Següent ►
►

JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats