JavaScript DOM opetusohjelma esimerkin kanssa

by: James Hartman James Hartman
Hours Päivitetty

Mitä DOM sisältää JavaKäsikirjoitus?

JavaKomentosarja voi käyttää kaikkia verkkosivun elementtejä käyttämällä asiakirjaobjektimallia (DOM). Itse asiassa verkkoselain luo verkkosivun DOM:n, kun sivu ladataan. DOM-malli luodaan tämän kaltaisena objektipuuna:

DOM sisään JavaKäsikirjoitus

DOM:n ja tapahtumien käyttäminen

DOM:n avulla JavaSkripti voi suorittaa useita tehtäviä. Se voi luoda uusia elementtejä ja attribuutteja, muuttaa olemassa olevia elementtejä ja attribuutteja ja jopa poistaa olemassa olevia elementtejä ja attribuutteja. JavaKäsikirjoitus voi myös reagoida olemassa oleviin tapahtumiin ja luoda uusia tapahtumia sivulle.

getElementById, innerHTML Esimerkki

  1. getElementById: Käyttääksesi elementtejä ja attribuutteja, joiden tunnus on asetettu.
  2. innerHTML: Elementin sisällön käyttäminen.

Kokeile tätä esimerkkiä itse:

<html>
<head>
	<title>DOM!!!</title>
</head>
<body>
  <h1 id="one">Welcome</h1>
  <p>This is the welcome message.</p>
  <h2>Technology</h2>
  <p>This is the technology section.</p>
  <script type="text/javascript">
		var text = document.getElementById("one").innerHTML;
		alert("The first heading is " + text);
  </script>
</body>
</html>

getElementsByTagName Esimerkki

getElementsByTagName: Elementtien ja attribuuttien käyttäminen tagin nimen avulla. Tämä menetelmä palauttaa an ryhmä kaikista kohteista, joilla on sama tunnistenimi.

Kokeile tätä esimerkkiä itse:

<html>
<head>
	<title>DOM!!!</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>This is the welcome message.</p>
  <h2>Technology</h2>
  <p id="second">This is the technology section.</p>
  <script type="text/javascript">
	var paragraphs = document.getElementsByTagName("p");
    alert("Content in the second paragraph is " + paragraphs[1].innerHTML);
    document.getElementById("second").innerHTML = "The orginal message is changed.";
  </script>
</body>
</html>

Tapahtumakäsittelijä Esimerkki

  1. createElement: Luo uusi elementti
  2. removeChild: Poista elementti
  3. Voit lisätä an tapahtumakäsittelijä tiettyyn elementtiin, kuten tämä:
document.getElementById(id).onclick=function()
{
    lines of code to be executed
}

OR

document.getElementById(id).addEventListener("click", functionname)

Kokeile tätä esimerkkiä itse:

<html>
<head>
	<title>DOM!!!</title>
</head>
<body>
  <input type="button" id="btnClick" value="Click Me!!" />
  <script type="text/javascript">
	document.getElementById("btnClick").addEventListener("click", clicked);
    function clicked()
    {
   		 alert("You clicked me!!!");
    }	
  </script>
</body>
</html>

Saatat tykätä: