Cheat Sheet for JS methods to work with DOM, part 1

Used sources:

• DOM Living Standart
• HTML Living Standart
• Document Object Model (DOM) Level 3 Core Specification
• DOM Parsing and Serialization

Introduction

JavaScript provides many methods to work with Document Object Model or abbreviated DOM (object model document): Some of them are more useful than others; Some are used often, other almost never; Some are relatively new, others are recognized as outdated.

I will try to give you an exhaustive idea of ​​these methods, and also show a couple of useful receptions that will make your web developer life a little easier.

Reflecting on the feeding of the material, I came to the conclusion that the optimal will be following the specifications with intermediate and final conclusions associated with small lyrical deviations.

We will not immerse yourself in the theory, we will not. Instead, we will focus on the practical component.

In order to get the most out of this crib, write the code with me and carefully follow what is happening in the developer tools console and on the page.

This is how our initial markup will look like:

<ul id="list" class="list">
  <li id="item1" class="item">1</li>
  <li id="item2" class="item">2</li>
  <li id="item3" class="item">3</li>
</ul>

We have a list (ul) with three elements (li). The list and each element have an identifier (id) and CSS Class (class). Id and class are an element attributes. There are many other attributes: some of them are global, i.e. can be added to any element, others — local, i.e. can only be added to certain elements. We will often withdraw the data into the console, so we will create such a “utility”:

const log = console.log

Mixin NonElementParentNode

This mixing is designed for processing (by browser) of parent nodes that are not elements.

What is the difference between nodes and elements? If briefly, the “nodes” are a more general concept than “elements”. The node can be represented by element, text, comment, etc. The element is a node submitted by markup (HTML tags (opening and closing) or, respectively, by one tag).

The mixing under consideration has a method inherited from the Document object from which it is convenient to start a conversation. A small reservation: Of course, we could create a list and elements by programmatically. To create elements, use the createElement(tag) method of the Documentobject:

const listEl = document.createElement('ul')

his method of creating elements is called imperative. It is not very comfortable and too verbose: Create a parent element, adds attributes to it one by one, we introduce it to DOM, create the first child element, etc. It should be noted that there is another, more refined way to create elements — template or string literals, but we will talk about them later.

One of the main methods of obtaining the element (more precisely, the link to the element) is the method getElementById(id)of the Document object:

// Get a link to our list
const listEl = document.getElementById('list')
log(listEl)
// ul#list.list - такая запись означает "элемент `ul` с `id === list`" и таким же `class`
// ul#list.list - such a record means "element `ul` with `id === list`" and the same `class`

Why should Identitifiers be unique within the application (Pages)? Because the idelement becomes the value of the name of the global object of the window:

log(listEl === window.list) // true

As we know, when accessing the properties and methods of window, the word window can be omitted, for example, instead of window.localStorage, you can simply write localStorage. Therefore, it suffices to access the item with id to access the appropriate window property:

log(list) // ul#list.list

Please note that it does not work in Reactand other frameworks that abstract work with DOM, for example, using Virtual DOM. Moreover, it is sometimes impossible to refer to the native properties and methods of windowwithout window.