JavaVýukový program skriptu DOM s příkladem

Od: James Hartman James Hartman
Hours aktualizováno

V čem je DOM JavaSkript?

JavaSkript může přistupovat ke všem prvkům na webové stránce pomocí Document Object Model (DOM). Ve skutečnosti webový prohlížeč vytvoří DOM webové stránky při načtení stránky. Model DOM je vytvořen jako strom objektů, jako je tento:

DOM dovnitř JavaScénář

Jak používat DOM a události

Pomocí DOM, JavaSkript může provádět více úkolů. Může vytvářet nové prvky a atributy, měnit stávající prvky a atributy a dokonce odstraňovat stávající prvky a atributy. JavaScénář může také reagovat na existující události a vytvářet nové události na stránce.

getElementById, příklad innerHTML

  1. getElementById: Přístup k prvkům a atributům, jejichž id je nastaveno.
  2. innerHTML: Přístup k obsahu prvku.

Zkuste tento příklad sami:

<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>

Příklad getElementsByTagName

getElementsByTagName: Přístup k prvkům a atributům pomocí názvu značky. Tato metoda vrátí an řada všech položek se stejným názvem tagu.

Zkuste tento příklad sami:

<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>

Příklad obsluhy události

  1. createElement: Chcete-li vytvořit nový prvek
  2. removeChild: Odebere prvek
  3. Můžete přidat obsluha události na konkrétní prvek, jako je tento:
document.getElementById(id).onclick=function()
{
    lines of code to be executed
}

OR

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

Zkuste tento příklad sami:

<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>