Чтобы прочесть данную статью, нужно знать объекты в JavaScript.
Пример 1
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Работа с HTML в JavaScript</title> </head> <body> <button id="mknopka">Нажать!</button> <div id="mtext"></div> <script> var moiaKnopka = document.getElementById('mknopka'); moiaKnopka.addEventListener('click', function() { var moiText = document.getElementById('mtext'); moiText.textContent = 'Привет, мир!'; }); </script> </body> </html> |
Функция “document.getElementById(a)”, где “a” – идентификатор (атрибут “id”) HTML элемента, возвращает элемент в виде объекта, свойства которого соответствуют атрибутам элемента. В данном примере эта функция присваивает переменной “moiaKnopka” HTML элемент “button” с идентификатором “mknopka”, а также присваивает переменной “moiText” элемент “div” с идентификатором “mtext”.
Функция “ob.addEventListener(ev, func)” назначает для HTML элемента “ob” функцию-обработчик “func”, которая выполняется при событии “ev”. В данном примере для кнопки назначается функция без имени, которая выполняется при нажатии на кнопку (событие “click”).
Свойство “textContent” HTML элемента соответствует тексту, который находится внутри тегов элемента. В данном примере свойству “textContent” элемента “div” присваивается текст и таким образом отображается на веб-странице.
Пример 2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Работа с HTML в JavaScript</title> </head> <body> <div id="mspisok"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <script> var spisok = document.querySelectorAll('#mspisok div'); for(var i = 0; i < spisok.length; i++) spisok[i].innerHTML = '<b>' + i + '</b>'; </script> </body> </html> |
Функция “document.querySelectorAll(a)”, где “a” – CSS селектор, возвращает HTML элементы соответствующие селектору в виде объектов. В данном примере переменной “spisok” через эту функцию присваиваются элементы “div”, которые содержатся в элементе с идентификатором “mspisok”.
Свойство “innerHTML” элемента HTML содержит вложенные HTML элементы и текст. В данном примере элементам “div” через это свойство присваивается номера элементов выделенные жирным шрифтом с помощью тегов “b”.
Пример 3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Работа с HTML в JavaScript</title> </head> <body> <div id="mmenu"> </div> <script> var menu = document.getElementById('mmenu'); for(var i = 1; i <= 5; i++) { var ssilka = document.createElement('a'); ssilka.href = i + '.html'; ssilka.textContent = 'Ссылка ' + i; menu.appendChild(ssilka); if(i < 5) { var txt = document.createTextNode(' - '); menu.appendChild(txt); } } </script> </body> </html> |
Функция “document.createElement(a)”, где “a” – название HTML элемента, создаёт и возвращает новый элемент. В данном примере возвращает в переменную “ssilka” новую ссылку.
Функция “document.createTextNode(a)”, где “a” – текст, возвращает элемент состоящий из текста. В данном примере возвращает в переменную “txt” тире отделённое пробелами.
Метод “ob.appendChild(a)” добавляет HTML элемент “a”, как следующий вложенный, в HTML элемент “ob”. В данном примере с помощью этого метода в цикле добавляется в элемент с идентификатором “mmenu” ссылки и тире между ними.
Пример 4
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Работа с HTML в JavaScript</title> </head> <body> <div> <div id="mpervii">1</div> </div> <button id="mdo"> Вставить до </button> <button id="mposle"> Вставить после </button> <script> var chislo = 1; var element = document.getElementById('mpervii'); var knopkado = document.getElementById('mdo'); var knopkaposle = document.getElementById('mposle'); function vstavka(pered) { var novii = document.createElement('div'); chislo++; novii.textContent = chislo; var glavnii = element.parentNode; if(pered) glavnii.insertBefore( novii, element); else glavnii.insertBefore( novii, element.nextSibling); element = novii; } knopkado.addEventListener('click', function() { vstavka(true); }); knopkaposle.addEventListener('click', function() { vstavka(false); }); </script> </body> </html> |
Свойство “el.parentNode” возвращает родительский узел HTML элемента “el” – узел, который непосредственно включает элемент “el”. В данном примере возвращает в переменную “glavnii” элемент “div”, который содержит вложенный элемент “div” с идентификатором “mpervii”.
Свойство “el.nextSibling” возвращает следующий HTML узел после элемента “el”. В данном примере возвращает следующий после текущего “element”.
Метод “ob.insertBefore(n, el)” вставляет элемент “n” в элемент “ob” перед элементом “el”, который содержится в “ob”. В данном примере этот метод при значении “true” переменной “pered” вставляет новый элемент “novii” в элемент “glavnii” перед текущем элементом “element”, а при значении “false” переменной “pered” вставляет новый элемент “novii” в элемент “glavnii” после текущего элемента “element” (перед следующем за текущим “element.nextSibling”).
Пример 5
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Работа с HTML в JavaScript</title> </head> <body> <div> <div>1</div> <div id="mudalit">2</div> <div>3</div> </div> <button id="mknopka"> Удалить </button> <script> var knopka = document.getElementById('mknopka'); knopka.addEventListener('click', function() { var element = document.getElementById('mudalit'); if(element) element.parentNode.removeChild(element); }); </script> </body> </html> |
Метод “ob.removeChild(el)” удаляет HTML элемент “el” из содержащего его элемента “ob”. В данном примере если удаляемый элемент существует (“if(element)”), то из содержащего его родительского узла (“element.parentNode”) удаляемый элемент удаляется.
