Element

Element - об'єкт для роботи з HTML елементом.

Element

document.createElement() - створює новий об'єкт Element. var el=document.createElement("p");
document.getElementById() - повертає об'єкт Element за його id. var el=document.getElementById("test");
document.getElementsByName() - повертає масив елементів за name. var masEl = document.getElementsByName("test");
document.getElementsByTagName() - масив елемінтів за назвою. var masEl= document.getElementsByTagName("div");
document.getElementsByClassName() - повертає масив елементів за вказаним класом. var masEl = document.getElementsByClassName("test");
document.querySelector() - повертає об'єкт Element за вказаним CSS селектором. var masEl = document.querySelector("#test");
document.querySelectorAll() - повертає масив елементів за вказаним CSS селектором. var masEl = document.querySelectorAll("div p");

Опис:

Element це об'єкт DOM який являється HTML-елементом. Об'єкт Element містить властивості і методи для роботи з елементами (тегами) у дереві документу (веб-сторінки).

Element

Element.isContentEditable - чи можна вміст елементу редагувати.
Element.attributes - повертає масиво подібний список атрибутів елементу.
Element.classList - назви класу (ів), додавати, видаляти класи елемента.
Element.className - клас елемента.
Element.clientHeight - внутрішня висота елемента.
Element.clientLeft - внутрішній лівої відступ елемента.
Element.clientTop - внутрішній верхній відступ елемента.
Element.clientWidth - внутрішня ширина елемента.
Element.id - ідентифікатор елемента.
Element.innerHTML - внутрішній HTML код елемента.
Element.outerHTML - HTML код самого елемента і внутрішній.
Element.innerText - внутрішній текст елемента.
Element.textContent - текстовий вміст елемента.
Element.localName - локальна назва елемента.
Element.namespaceURI - простір імен URI елемента.
Element.parentElement - батьківський елемент.
Element.children - список дочірних елементів.
Element.firstElementChild - перший дочірний елемент.
Element.lastElementChild - останій дочірний елемент.
Element.nextElementSibling - наступний елемент у батьківському списку.
Element.previousElementSibling - попередній елемент у батьківському списку.
Element.scrollHeight - висота вмісту елемента.
Element.offsetTop - верхній відступ елемента.
Element.offsetLeft - лівий відступ елемента.
Element.offsetHeight - висота елемента.
Element.offsetWidth - ширина елемента.
Element.scrollLeft - позиція лівої прокрутки елемента.
Element.scrollLeftMax - максимально можива позиція прокрутки вліво для елемента.
Element.scrollTop - позиція верхної прокрутки елемента.
Element.scrollTopMax - максимальна позиція верхньої прокрутки для елемента.
Element.scrollWidth - ширину вмісту елемента.
Element.tabStop - чи може елемент отримати фокус введення з допомогою клавіші табуляції.
Element.tagName - назва тегу для даного елемента.
Element.style - CSS стилі елемента.
Element.baseURI - базова адреса документу елемента.
Element.ownerDocument - документ елемента.
Element.dataset - атрибути користувача.

Також кожен об'єкт Element має усі атрибути елементу (тегу) які є представлені як властивость і мають такуж назву що і атрибут. Наприклад елемент тегу

<a href="/">

має властивість a.href.

Винятком є атрибут class до якого необхідно звертатися за допомогою властивості Element.className.

Також атрибути можна отримати/задати за допомогою getAttribute() / setAttribute().

Element

Element.appendChild() - вставляє елемент в кінці списку дочірних.
Element.animate() - анімація елемента.
Element.insertBefore() - вставляє елемент перед вказаним дочірним елементом.
Element.replaceChild() - замінює дочірний елемент.
Element.replaceWith() - замінює поточний елемент.
Element.append() - вставляє елемент або текст в кінці елемента.
Element.prepend() - вставляє елемент або текст спочатку елемента.
Element.removeChild() - видаляє дочірний елемент.
Element.remove() - видаляє елемент.
Element.cloneNode() - копіює елемент.
Element.hasChildNodes() - чи має елемент дочірні елементи.
Element.closest() - найближчий батьківський елемент за вказаним CSS селектором.
Element.contains() - перевіряє чи є елемент нащадком.
Element.compareDocumentPosition() - розташування двох елементів.
Element.getAttribute() - повертає значення атрибуту за його назвою.
Element.setAttribute() - задає значення атрибуту.
Element.removeAttribute() - видаляє атрибут у елементі.
Element.hasAttribute() - чи є вказаний атрибут у елементі.
Element.hasAttributes() - чи є у елементі атрибути.
Element.insertAdjacentElement() - вставляє елемент у задану позицію в елементі.
Element.insertAdjacentHTML() - вставляє HTML текст у елемент.

Element.insertAdjacentText()

Element.matches() - чи задовільняє елемент CSS селектор.
Element.getElementsByClassName() - повертає масив дочірних елементів за назвою класу.
Element.getElementsByTagName() - повертає масив дочірних елементів за назвою елементів.
Element.querySelector() - перший дочірний елемент за вказаним CSS селектором.
Element.querySelectorAll() - список дочірних елементів за вказаним CSS селектором.
Element.getBoundingClientRect() - позиція елемента.
Element.getClientRects() - позиція для кожного рядка тексту в елементі.
Element.scrollIntoView() - прокручуює сторінку, щоб елемент був у полі зору.
Element.click() - імітує клацання миші по елементу.
Element.focus() - переміщує фокус на елемент.
Element.blur() - забирає фокус у елемента.
Element.addEventListener() - додає обробника події до елементу.
Element.dispatchEvent() - імітація події.
Element.removeEventListener() - видаляє подію з елемента.

Події

Element

Element.onabort - переривання завантаження.
Element.onblur - елемент втрачає фокус.
Element.onchange - змінено значення у елементі.
Element.onclick - клік по елементу.
Element.oncontextmenu - викликається контексне меню.
Element.ondblclick - подвійний клік по елементу.
Element.onfocus - елемент отримав фокус.
Element.oninput - значення змінено.
Element.oninvalid - елемент не пройшов валідацію.
Element.onkeydown - натискається клаві.
Element.onkeypress - натиснуто клавішу.
Element. onkeyup - відпустили клавішу.
Element.onload - елемент завантажено.
Element.onmousedown - натиснуто кнопку миші по елементу.
onmousemove - переміщується курсор миші по елементі.
onmouseout - відведено курсор миші з елементу.
onmouseover - наведено курсор миші на елемент.
onmouseup - відпущено кнопку миші.
Element.onreset - очищено дані форми
Element.onscroll - прокрутка елемента
Element.onselect - виділено текст.
Element.onsubmit - відправлення даних форми.
Element.ontoggle - відкрито / закрито елемент.
Element.ontouchstart - дотик на елементі.
Element.ontouchmove - переміщення дотику по елементі.
Element.ontouchend - дотик по елементі завершено
Element.ontouchcancel - дотик на елементі перервано

Приклад:

Створюємо елемент і додаємо його до документу:

var el=document.createElement("div");
el.innerText="JavaScript *** тест створений елемент";
el.style.border="2px solid #aaee08";
el.style.textAlign="center";
document.body.appendChild(el);

#test

var div=document.createElement('div'); div.innerHTML='<p style="color:blue;">Текст</p>'; document.getElementById('testing').appendChild(div);