JavaНавчальний посібник із сценарієм DOM із прикладом

У чому полягає DOM JavaСценарій?

JavaСценарій може отримати доступ до всіх елементів веб-сторінки за допомогою Document Object Model (DOM). Фактично, веб-браузер створює DOM веб-сторінки, коли сторінка завантажується. Модель DOM створюється як дерево об’єктів, як це:

Як використовувати DOM і події

Використовуючи DOM, JavaСценарій може виконувати кілька завдань. Він може створювати нові елементи та атрибути, змінювати існуючі елементи та атрибути та навіть видаляти існуючі елементи та атрибути. JavaScript також може реагувати на існуючі події та створювати нові події на сторінці.

getElementById, innerHTML Приклад

getElementById: для доступу до елементів і атрибутів, ідентифікатор яких встановлено.
innerHTML: для доступу до вмісту елемента.

Спробуйте цей приклад самостійно:

<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

getElementsByTagName: для доступу до елементів і атрибутів за допомогою імені тегу. Цей метод поверне an масив усіх елементів із однаковою назвою тегу.

Спробуйте цей приклад самостійно:

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

Приклад обробника подій

createElement: щоб створити новий елемент
removeChild: видалити елемент
Ви можете додати обробник подій до певного елемента, як це:

document.getElementById(id).onclick=function()
{
    lines of code to be executed
}

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

Спробуйте цей приклад самостійно:

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

Вам може сподобатися: