Методи HTML DOM

Програмування

querySelector ()

Метод Document querySelector()повертає firstелемент у документі, який відповідає вказаному селектору або групі селекторів. Якщо збігів не знайдено, повертається значення null.

Вміст HTML:

 element-example

Вміст JavaScript:

document.querySelector("#id-example"); // Returns the element with id "id-example" document.querySelector(".class-example"); // Returns the element with class "class-example" document.querySelector("a"); // Returns the "a" element

Примітка querySelector()повертає перший відповідний елемент, щоб повернути всі збіги, використовуйте натомість метод querySelectorAll ().

 First Second 
document.querySelector("#example"); // Returns only the element containing 'First'

innerHTML

innerHTMLПроп повертати вміст HTML всередині обраного елемента , а також дозволяє визначити новий зміст HTML.

Отримати вміст елемента

Demo
var element = document.getElementById("demo"); console.log(element.innerHTML) //logs 
Demo

Встановити вміст елемента

var element = document.getElementById("demo"); element.innerHTML = " Demo ";

HTML тепер буде подібним

 Demo

Міркування щодо безпеки

Значення, яке встановлено, innerHTMLповинно надходити з надійних джерел, оскільки Javascript поміщає все, що знаходиться всередині цього елемента, і воно буде виконуватися як звичайний HTML.

Приклад:

Якщо встановити alert();значення ””, функція Javascript “alert ()” буде запущена:

var element = document.getElementById("demo"); element.innerHTML = "alert();";

Цей тип атаки називається Cross Site Scripting, або скорочено XSS.

Це один із найпоширеніших способів здійснення атаки XSS. Якщо ви хочете дізнатися трохи більше і навчитися захищатись від цього, перегляньте цей ресурс.

getElementById ()

getElementById()Метод повертає елемент , який має ідентифікатор атрибута з заданим значенням. Він приймає один аргумент, який враховує регістр рядка ідентифікатора для потрібного елемента.

Цей метод є одним із найпоширеніших методів у HTML DOM і використовується майже кожного разу, коли ви хочете маніпулювати елементом у вашому документі або отримати інформацію від нього. Ось простий приклад синтаксису:

Вміст HTML:

Вміст JavaScript:

document.getElementById("demo"); // Returns the element with id "demo"

Якщо у вас є більше одного елемента з однаковим значенням id(погана практика!), getElementByIdПоверне перший знайдений елемент:

 First Second 
document.getElementById("demo"); // Returns the element with id "demo" containing 'First'

Більше інформації:

document.getElementById ()

Альтернативні рішення:

Зазвичай вживаною альтернативою document.getElementByIdє використання селектора jQuery, про який ви читали тут більше.

Більше інформації про HTML DOM

За допомогою HTML DOM JavaScript може отримувати доступ та змінювати всі елементи документа HTML.

Якщо веб - сторінка завантажується, браузер створює D ocument O ▪ Таблиця M Одяг сторінки.

Модель HTML DOM побудована як дерево Об'єктів:

Кожен елемент у DOM також називається вузлом.

   My title    My Link 
 My header

DOM для вищевказаного HTML такий:

DOM tree

За допомогою об’єктної моделі JavaScript отримує всю потужність, необхідну для створення динамічного HTML:

  • JavaScript can change all the HTML elements in the page
  • JavaScript can change all the HTML attributes in the page
  • JavaScript can change all the CSS styles in the page
  • JavaScript can remove existing HTML elements and attributes
  • JavaScript can add new HTML elements and attributes
  • JavaScript can react to all existing HTML events in the page
  • JavaScript can create new HTML events in the page