Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Oppiskele DOM-Ominaisuuksien Tutkiminen JavaScriptissä | DOM-Manipulointi Interaktiivista Web-Kehitystä Varten
Edistynyt JavaScript-Osaaminen

bookDOM-Ominaisuuksien Tutkiminen JavaScriptissä

JavaScript tarjoaa useita ominaisuuksia sisällön käsittelemiseen ja muokkaamiseen. Näiden ominaisuuksien ymmärtäminen mahdollistaa verkkosivujen sisällön dynaamisen päivittämisen käyttäjän vuorovaikutuksen tai muiden ehtojen perusteella.

InnerHTML

innerHTML-ominaisuuden avulla voidaan hakea tai asettaa elementin HTML-sisältö, mukaan lukien tunnisteet ja teksti. Se on yksi yleisimmin käytetyistä ominaisuuksista sivun sisällön dynaamiseen päivittämiseen.

index.html

index.html

index.js

index.js

copy

innerHTML hakee kaiken sisällön, mukaan lukien HTML-tunnisteet, ja mahdollistaa sisällön lisäämisen tai päivittämisen HTML-tunnisteiden kanssa.

TextContent

textContent-ominaisuus hakee tai asettaa elementin tekstisisällön, poistaen kaikki HTML-tunnisteet. Sopii tilanteisiin, joissa käsitellään pelkkää tekstiä ilman HTML-rakenteen huomioimista.

index.html

index.html

index.js

index.js

copy

textContent hakee vain tekstisisällön, ohittaen HTML-tunnisteet, ja asettaa pelkän tekstin paikoilleen, paeten automaattisesti mahdolliset tunnisteet.

Arvo

value-ominaisuutta käytetään lomake-elementeissä kuten <input>, <textarea> ja <select>, mahdollistaen käyttäjän syöttämän arvon hakemisen tai asettamisen.

index.html

index.html

index.js

index.js

copy

value hakee lomake-elementtien nykyisen arvon ja asettaa uuden arvon input-, textarea- tai select-elementeille.

Eroavaisuudet InnerHTML:n ja TextContentin välillä

Käytännön esimerkki: Käyttäjäprofiilin päivittäminen

Kuvittele käyttäjäprofiilisivu, jossa alkuperäiset tiedot näytetään ja käyttäjä voi päivittää profiilitietonsa lomakkeen avulla. Kun käyttäjä lähettää lomakkeen, sivun sisältö päivittyy dynaamisesti.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Aluksi profiilissa näytetään ennalta määritetty käyttäjänimi ja esittelyteksti, joita voidaan muokata syötekenttien avulla. Kun "Tallenna muutokset" -painiketta painetaan, JavaScript päivittää näkyvän profiilin: textContent päivittää käyttäjänimen pelkkänä tekstinä, kun taas innerHTML päivittää esittelytekstin mahdollistaen perus HTML-muotoilun, jolloin käyttäjän tekemät muutokset näkyvät.

1. Mitä innerHTML-ominaisuus tekee?

2. Milloin käyttäisit textContent-ominaisuutta innerHTML:n sijaan?

3. Mitä seuraava koodi tulostaa?

4. Mitä ominaisuutta käytetään <input>-elementin arvon hakemiseen tai asettamiseen?

question mark

Mitä innerHTML-ominaisuus tekee?

Select the correct answer

question mark

Milloin käyttäisit textContent-ominaisuutta innerHTML:n sijaan?

Select the correct answer

question mark

Mitä seuraava koodi tulostaa?

Select the correct answer

question mark

Mitä ominaisuutta käytetään <input>-elementin arvon hakemiseen tai asettamiseen?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 6

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Awesome!

Completion rate improved to 2.22

bookDOM-Ominaisuuksien Tutkiminen JavaScriptissä

Pyyhkäise näyttääksesi valikon

JavaScript tarjoaa useita ominaisuuksia sisällön käsittelemiseen ja muokkaamiseen. Näiden ominaisuuksien ymmärtäminen mahdollistaa verkkosivujen sisällön dynaamisen päivittämisen käyttäjän vuorovaikutuksen tai muiden ehtojen perusteella.

InnerHTML

innerHTML-ominaisuuden avulla voidaan hakea tai asettaa elementin HTML-sisältö, mukaan lukien tunnisteet ja teksti. Se on yksi yleisimmin käytetyistä ominaisuuksista sivun sisällön dynaamiseen päivittämiseen.

index.html

index.html

index.js

index.js

copy

innerHTML hakee kaiken sisällön, mukaan lukien HTML-tunnisteet, ja mahdollistaa sisällön lisäämisen tai päivittämisen HTML-tunnisteiden kanssa.

TextContent

textContent-ominaisuus hakee tai asettaa elementin tekstisisällön, poistaen kaikki HTML-tunnisteet. Sopii tilanteisiin, joissa käsitellään pelkkää tekstiä ilman HTML-rakenteen huomioimista.

index.html

index.html

index.js

index.js

copy

textContent hakee vain tekstisisällön, ohittaen HTML-tunnisteet, ja asettaa pelkän tekstin paikoilleen, paeten automaattisesti mahdolliset tunnisteet.

Arvo

value-ominaisuutta käytetään lomake-elementeissä kuten <input>, <textarea> ja <select>, mahdollistaen käyttäjän syöttämän arvon hakemisen tai asettamisen.

index.html

index.html

index.js

index.js

copy

value hakee lomake-elementtien nykyisen arvon ja asettaa uuden arvon input-, textarea- tai select-elementeille.

Eroavaisuudet InnerHTML:n ja TextContentin välillä

Käytännön esimerkki: Käyttäjäprofiilin päivittäminen

Kuvittele käyttäjäprofiilisivu, jossa alkuperäiset tiedot näytetään ja käyttäjä voi päivittää profiilitietonsa lomakkeen avulla. Kun käyttäjä lähettää lomakkeen, sivun sisältö päivittyy dynaamisesti.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Aluksi profiilissa näytetään ennalta määritetty käyttäjänimi ja esittelyteksti, joita voidaan muokata syötekenttien avulla. Kun "Tallenna muutokset" -painiketta painetaan, JavaScript päivittää näkyvän profiilin: textContent päivittää käyttäjänimen pelkkänä tekstinä, kun taas innerHTML päivittää esittelytekstin mahdollistaen perus HTML-muotoilun, jolloin käyttäjän tekemät muutokset näkyvät.

1. Mitä innerHTML-ominaisuus tekee?

2. Milloin käyttäisit textContent-ominaisuutta innerHTML:n sijaan?

3. Mitä seuraava koodi tulostaa?

4. Mitä ominaisuutta käytetään <input>-elementin arvon hakemiseen tai asettamiseen?

question mark

Mitä innerHTML-ominaisuus tekee?

Select the correct answer

question mark

Milloin käyttäisit textContent-ominaisuutta innerHTML:n sijaan?

Select the correct answer

question mark

Mitä seuraava koodi tulostaa?

Select the correct answer

question mark

Mitä ominaisuutta käytetään <input>-elementin arvon hakemiseen tai asettamiseen?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 6
some-alt