DOM
Извлечение элементов

По идентификатору

document.getElementById('uniqueID')

будет извлекаться

<div id="uniqueID"></div>

Пока существует элемент с данным идентификатором, document.getElementById возвращает только этот элемент. В противном случае он вернет значение null .

Примечание. Идентификаторы должны быть уникальными. Несколько элементов не могут иметь одинаковый идентификатор.

По названию класса

document.getElementsByClassName('class-name')

будет извлекаться

<a class="class-name">Any</a>
<b class="class-name">tag</b>
<div class="class-name an-extra-class">with that class.</div>

Если ни один из существующих элементов не содержит данный класс, возвращается пустая коллекция.

Пример:

<p class="my-class">I will be matched</p>
<p class="my-class another-class">So will I</p>
<p class="something-else">I won't</p>

var myClassElements = document.getElementByClassName('my-class');
console.log(myClassElements.length); // 2
var nonExistentClassElements = document.getElementByClassName('nope');
console.log(nonExistentClassElements.length); // 0

По названию тега

document.getElementsByTagName('b')

будет извлекаться

<b>All</b>
<b>of</b>
<b>the b elements.</b>

Если элементов с указанным именем тега не существует, возвращается пустая коллекция.

С помощью CSS Selector

Рассмотрим следующий html-код

<ul>
  <li id=“one” class=“main”>Item 1</li>
  <li id=“two” class=“main”>Item 2</li>
  <li id=“three” class=“main”>Item 3</li>
  <li id=“four”>Item 4</li>
</ul>

Следующее дерево dom будет построено на основе выше html-кода

                      ul
    
                      |
    
     |          |         |         |
    
    li         li        li        li
     |          |         |         |
Item 1        Item 2    Item 3    Item 4

Мы можем выбирать элементы из дерева DOM с помощью селекторов CSS. Это возможно с помощью двух javascript-методов: querySelector() и querySelectorAll() .

Метод querySelector () возвращает первый элемент, который соответствует данному селектору css из DOM.

document.querySelector('li.main')

возвращает первый элемент li , класс которого является main

document.querySelector('#two')

возвращает элемент с id two

ПРИМЕЧАНИЕ. Если элемент не найден, возвращается значение null . Если строка селектора содержит псевдоэлемент CSS, возврат будет null .

Метод querySelectorAll () возвращает все элементы, соответствующие данному селектору css из DOM.

document.querySelectorAll('li.main')

возвращает список узлов, содержащий все элементы li , класс которых является main .

ПРИМЕЧАНИЕ . Если элемент не найден, возвращается пустой список узлов. Если строка селекторов содержит псевдоэлемент CSS, возвращаемый элементList будет пустым

Селектор запросов

В современных браузерах [1] можно использовать CSS-подобный селектор для запроса элементов в документе - так же, как sizzle.js (используется jQuery).

querySelector

Возвращает первый Element в документе, который соответствует запросу. Если нет совпадения, возвращается значение null .

// gets the element whose id="some-id"
var el1 = document.querySelector('#some-id');
 
// gets the first element in the document containing "class-name" in attribute class
var el2 = document.querySelector('.class-name');
 
// gets the first anchor element in the document
var el2 = document.querySelector('a');
 
// gets the first anchor element inside a section element in the document
var el2 = document.querySelector('section a');

querySelectorAll

Возвращает NodeList содержащий все элементы документа, соответствующие запросу. Если они не совпадают, возвращает пустой NodeList .

// gets all elements in the document containing "class-name" in attribute class
var el2 = document.querySelectorAll('.class-name');
 
// gets all anchor elements in the document
var el2 = document.querySelectorAll('a');

// gets all anchor elements inside any section element in the document
var el2 = document.querySelectorAll('section a');