JavaScript DOM Tutorial cu Exemplu

prin: James Hartman James Hartman
Hours Actualizat

În ce este DOM JavaScenariul?

JavaScriptul poate accesa toate elementele dintr-o pagină web utilizând Document Object Model (DOM). De fapt, browserul web creează un DOM al paginii web atunci când pagina este încărcată. Modelul DOM este creat ca un arbore de obiecte ca acesta:

DOM în JavaScenariu

Cum să utilizați DOM și Evenimente

Folosind DOM, JavaScriptul poate efectua mai multe sarcini. Poate crea elemente și atribute noi, poate modifica elementele și atributele existente și chiar elimina elementele și atributele existente. JavaScenariu poate reacționa și la evenimentele existente și poate crea evenimente noi în pagină.

getElementById, innerHTML Exemplu

  1. getElementById: Pentru a accesa elemente și atribute al căror id este setat.
  2. innerHTML: Pentru a accesa conținutul unui element.

Încercați singur acest exemplu:

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

Exemplu getElementsByTagName

getElementsByTagName: Pentru a accesa elemente și atribute folosind numele etichetei. Această metodă va returna un mulțime dintre toate articolele cu același nume de etichetă.

Încercați singur acest exemplu:

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

Exemplu de gestionare a evenimentelor

  1. createElement: Pentru a crea un element nou
  2. removeChild: Eliminați un element
  3. Puteți adăuga un organizatorul evenimentului la un anumit element ca acesta:
document.getElementById(id).onclick=function()
{
    lines of code to be executed
}

OR

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

Încercați singur acest exemplu:

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