Scriptify.ru

Работа с DOM включает себя: поиск, удаление, перемещение элементов, работа со свойствами и атрибутами, получение прокрутки, координат и размеров.

innerHTML, outerHTML - получить содержимое элемента

При помощи свойства innerHTML можно получить внутреннее содержимое элемента, включая теги. outerHTML получает содержимое элемента полностью, включая сам элемент.

<div id="outer-el">
    <div id="inner-el">hello</div>
</div>
<script>
var el = document.getElementById('outer-el');
var inner = el.innerHTML;
var outer = el.outerHTML;
console.log(inner);
console.log(outer);
// <div id="inner-el">hello</div>
// <div id="outer-el"><div id="inner-el">hello</div></div>
</script>

appendChild - вставка нового элемента

Свойство appendChild вставляет элемент в конец списка

<div id="outer-el">
    <div id="inner-el">hello</div>
</div>

<script>
var el = document.getElementById('outer-el');
var newEl = document.createElement('div');
newEl.id = 'new-el';    
el.appendChild(newEl);
console.log(el.outerHTML);
/*
<div id="outer-el">
    <div id="inner-el">hello</div>
    <div id="new-el"></div>
</div>
*/
</script>

removeChild - удаление элемента

Свойство removeChild удаляет элемент, обращаясь к его родителю.

<div id="outer-el">
    <div id="inner-el">hello</div>
</div>

<script>
var el = document.getElementById('outer-el');
var removedEl = document.getElementById('inner-el');
removedEl.parentNode.removeChild(removedEl);
console.log(el.outerHTML);
//  <div id="outer-el"></div>
</script>

style и style.cssText - изменение стиля элемента

Свойство style устанавливает значение одного свойства стиля. style.cssText позволяет устанавливать стили в виде одной строки

<div id="outer-el">
    <div id="inner-el">hello</div>
</div>

<script>
var el = document.getElementById('inner-el');
el.style.margin = '5px';
el.style.padding = '5px';   
console.log(el.outerHTML);
// <div id="inner-el" style="margin: 5px; padding: 5px;">hello</div>
el.style.cssText = 'margin:10px;padding:10px;';
console.log(el.outerHTML);
// <div id="inner-el" style="margin: 10px; padding: 10px;">hello</div>  
</script>   

setAttribute - установка HTML-атрибутов элемента

Установка стандартных HTML-атрибутов, таких как id, class, data-* и других возможна "через точку". Нестандартные атрибуты можно установить через setAttribute.

<div id="outer-el">
    <div id="inner-el">hello</div>
</div>

<script>
var el = document.getElementById('inner-el');
el.id = 'new-id';
el.className = 'block';
el.attr = 'new-attr'; // нестандартный атрибут, не установится
el.dataset.value = 'value'; 
console.log(el.outerHTML);
//<div id="new-id" class="block" data-value="value">hello</div>

el.setAttribute('aria-hidden', 'true');
console.log(el.outerHTML);
// <div id="new-id" class="block" data-value="value" aria-hidden="true">hello</div>
</script>

window.pageYOffset - получение значения текущей прокрутки документа

Свойство window.pageYOffset показывает количество пикселей, на которые был прокручен документ (по вертикали). Для лучшей совместимости предпочтительнее использовать это свойство заместо window.scrollY

console.log(window.pageYOffset);
// 400

window.innerHeight и window.innerWidth - определение размеров области просмотра

Свойство window.innerHeight / window.innerWidth показывает высоту/ширину текущей области просмотра (viewport).

console.log(window.innerWidth);
//1366

getBoundingClientRect - определение координат элемента относительно области просмотра

Метод getBoundingClientRect() возвращает координаты элемента относительно области просмотра

<div id="outer-el">
    <div id="inner-el">hello</div>
</div>

<script>
document.body.style.margin = 0;
var el = document.getElementById('outer-el');   
el.style.cssText = "margin-left:20px; margin-top:20px; height:30px; width:100px;";
var coordinates = el.getBoundingClientRect();
console.log('top: ' + coordinates.top + ' right: ' + coordinates.right + ' bottom: ' + coordinates.bottom + ' left: ' + coordinates.left);
//top: 20 right: 120 bottom: 50 left: 20    
</script>

offsetLeft/offsetTop - определение смещения элемента сверху/справа относительно другого элемента

offsetLeft/offsetTop возвращает позицию в пикселях левого верхнего угла блока, относительно его offsetParent (ближайшая ячейка таблицы, body для статического позиционирования или ближайший позиционированный элемент для других типов позиционирования.)

<script>
document.body.style.margin = "20px";    
var outer = document.getElementById('outer-el');
outer.style.cssText = "position:absolute; width:200px; height:200px; background:#999;";
var inner = document.getElementById('inner-el');
inner.style.cssText = "position:relative; top:100px; left:100px; background:#777; width:50px;"; 
var innerElOffset = inner.offsetTop; // Смещение внутреннего элемента относительно внешнего элемента
console.log(innerElOffset);
// 100
var outerElOffset = outer.offsetTop; // Смещение внешнего элемента относительно документа
console.log(outerElOffset);
//  20
</script>

Содержание статьи