Learn ECMAScript - Second Edition

Using the querySelector method

The querySelector method returns an element in the same way as when selecting an element through its CSS selector. However, document.querySelector returns only one element. Therefore, we can operate on it directly once we query for that element:

<div data-attr="coolDIV">Make me red!</div><script>document.querySelector('div[data-attr]').style.color = 'red'; // div becomes red</script>

It is equivalent to doing document.querySelector('div').style.color = 'red'; if we have only one <div> tag in the body.