{Взаимодействие между Javascript и HTML елементите}

HTML DOM

Когато дадена уеб страница е заредена, браузърът създава DOM (Document Object Model). DOM по същество е представяне на HTML елементите под формата на дървовидна структура, в която корените са <html> тага и всички останали тагове са негови потомци.

id, class and name attributes

Всеки HTML таг може да има атрибути id, class и name.
* атрибутът id обикновено се използва като уникален идентификатор за идентифициране на HTML елемент,
* атрибутът class се използва за указване на множество елементи със сходни свойства,
* атрибутът name обикновено се използва като идентификатор за HTML елементи във формуляр.

Достъп до HTML елементи от JavaScript

Обектът документ дава достъп до HTML DOM от JavaScript. Той съдържа различни методи, които могат да бъдат използвани за достъп до HTML елементи, използвайки техните атрибути id, class и name.

Пример:

<html>
  <body>
    <p id="ptag">
        This is a paragraph with id ptag.
    </p>
    <p class="pclass">
        This is a paragraph with class pclass.
    </p>
    <p name="pname">
        This is a paragraph with name pnam.
    </p>
  <script>
    // reference to the first element with id "ptag" i.e. the first <p> tag
    var paragraphFromId = document.getElementById("ptag");
    
    // array of elements which have the given class
    var allFromClass = document.getElementsByClassName("pclass");
    // if we want the first paragraph, when we need to
    // get the first element (0th index) of the array
    // i.e. this gives the reference to the second <p> tag
    var paragraphFromClass = document.getElementsByClassName("pclass")[0];
     
    // array of elements with the given name
    var allFromName = document.getElementsByName("pname");
    // reference to the third <p> tag 
    // (same logic as for getElementsByClassName)
    var paragraphFromName = document.getElementsByName("pname")[0];
     
    // array of elements of the specific tag
    // returns as array of length 3 because there are 3
    // p tag elements in our HTML
    var allptags = document.getElementsByTagName("p");
  </script>
 </body>  
</html>

Промяна на атрибути, стилове и текст с помощта на JavaScript

Създайте файл intro.html, поставете в него следния код и го отворете в браузъра:

<html>
    <head>
        <meta charset="utf-8">
        <title>Change attributes with js</title>
    </head>
    <body style="background: LightGreen;">
        <b style="font-size: 40px;" id="heading">
            За лентяйството
        </b>
        <p id="paragraph">
            По въпроса за лентяйството аз се лаская от мисълта да се считам за специалист.<br />
            Лентяят не е човек, който се мотае без работа с ръце в джобовете. Тъкмо обратното — най-изумителната му черта е, че винаги е страшно зает.<br />
            <i>Не можеш да се наслаждаваш истински на безделието, ако нямаш достатъчно много работа. Какво удоволствие можеш да изпиташ от това, че не вършиш нищо, ако изобщо нямаш какво да вършиш.</i><br />
            <i>Дж. К. Джером</i>
        </p>
        <img id="image" width=400 src="https://iliyankovachev.files.wordpress.com/2019/02/fish1.jpg">
        </img>
    </body>
</html>

1.Отворете конзолата и изпълнете последователно:

var image = document.getElementById("image");
image.width = 250;

2.Нека сменим цялото изображение (променяйки свойството му src). Изпълнете в конзолата:

image.src=“https://iliyankovachev.files.wordpress.com/2019/02/fish2.jpg&#8220;

3.Да сменим цвета на фона с бежов:

var bodytag = document.body;
bodytag.style.background = "Beige";

4.Фона на заглавието – 100px:

var about = document.getElementById("heading");
about.style.fontSize = 100;

5.Да подменим текста в курсив в края на параграфа „Не можеш да се наслаждаваш истински на безделието, …нямаш какво да вършиш.“ със следния текст: „Склонността към лентяйството винаги е била най-силната черта на моя характер.“

var italics = document.getElementsByTagName("i")[0];
italics.innerText = "Склонността към лентяйството винаги е била най-силната черта на моя характер.";

Забележете, че използвахме функцията getElementsByTagName() този път, тъй като нямахме атрибут id за тага <i>. Също така, за да променим текста, обновихме свойството innerText на JavaScript обекта.
Също така, разполагаме с подобно свойство innerHTML, в случай че стойността която задаваме, включва HTML елемент.
6.Например искаме част от новия текст („най-силната черта“) да бъде удебелен.

italics.innerHTML = „Склонността към лентяйството винаги е била <b>най-силната черта</b> на моя характер.“;

Създаване на нови HTML елементи чрез Javascript

7.Създаване на елемент „бутон“:

var btn = document.createElement('button');
btn.innerText = "Click me!";
bodytag.appendChild(btn);

//За да вмъкнем нов ред преди бутона:
bodytag.insertBefore(document.createElement("br"), btn);

Синтаксис на insertBefore(): parentNode.insertBefore(newNode, childNode);

Задача: Създайте параграф със съдържание „Човекът, който в юношеските ми години ме къпеше в купела на мъдростта срещу девет гвинеи на семестър (без допълнително възнаграждение), обичаше да казва, че никога не бил срещал момче, което може да свърши толкова малко работа за толкова много време.“ и го вмъкнете преди изображението.

Реклами