Памятка по манипуляциям с DOM

Дата публикации 26.06.2018

 

Работа с селекторами:

//get all elements by tagName
document.getElementsByTagName("div");
//get all elements by className
document.getElementsByClassName("my-class"); //more fast

//get all elements by css selector
document.querySelectorAll("#myElement .my-class li:first-child");

Метод querySelectorAll будет возвращать статический NodeList, тогда как getElementsByTagName и getElementsByClassName будут возвращать живой NodeList.

 

Создание новых элементов

let frag = document.createDocumentFragment();
let myDiv = document.createElement("div");
let a = document.createElement("a");
a.setAttribute('href','https://google.com');
a.textContent = 'Click Me!';
myDiv.appendChild(a);
frag.appendChild(myDiv);
document.body.appendChild(frag);

 

Позиционирование элементов:

//By default new Element will be insert at the end of nodeList
parentNode.appendChild(newNode);

//or
referenceNode.insertAdjacentElement(position, node);

//delete
referenceNode.parentNode.removeChild(referenceNode);
// or
referenceNode.remove(); //No IE support

Примечание: ‘beforebegin’ и ‘afterend’ будут работать только тогда, когда referenceNode находиться в DOM дереве и имеет родительский элемент.
Возможны варианты:
        'beforebegin': Before the element itself.
        'afterbegin': Just inside the element, before its first child.
        'beforeend': Just inside the element, after its last child.
        'afterend': After the element itself.

 

Работа с атрибутами:

let valueOfAttribute = elem.attributeName;// get
elem.attributeName = 'newValue';// set

//or
let valueOfAttribute = elem[attributeName];
elem[attributeName] = 'newValue';

//WebAPI style
elem.getAttribute(attributeName);
elem.setAttribute(attributeName, value);
elem.removeAttribute(attributeName);
elem.hasAttribute(attributeName); // returns a boolean

//add CSS style
elem.style.backgroundImage = 'url(/image.jpg)';

 

Работа с именами классов:

// add a specified class
elem.classList.add('my-class')
// remove a specified class
elem.classList.remove('my-class')
// toggle a specified class
elem.classList.toggle('my-class')
// check the element has the specified class
elem.classList.contains('my-class') // returns a boolean

 

События:

//add
target.addEventListener(type, handler);
//remove
target.removeEventListener(type, handler); //handler must be a named function

 

Перемещение по элементам

//get parent element
myElement.parentElement;
//get next
myElement.nextElementSibling;
//get previous
myElement.previousElementSibling;

//children elements/ Read-only
myElement.children;

//first and last children element
myElement.firstElementChild;
myElement.lastElementChild;

Нативные методы будут возвращать null, если myElement является последним (первым) потомком его родителя.