JavaScript Interview Questions — The DOM
Tags: webdev, programming, javascript, beginners
Published: 2021-01-24 02:00:12

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


To get a job as a front end developer, we need to nail the coding interview.

In this article, we’ll look at some questions about DOM manipulation.

### What’s the difference between window vs document?

The difference between `window` and `document` is that `document` is a property of the `window` object.

`window` is the JavaScript global object that has everything including global functions, `location`, `history`, web components, `setTimeout` , `XMLHttpRequest` , `console` , `localStorage` and much more.

`document` represents the DOM of the page. The DOM represents the HTML markup that was written or generated.

With `document` , we have methods to traverse the DOM like `getElementById` , `querySelector` , `removeChild`, `appendChild` and more.

### What’s the difference between window.onload vs document.onload?

`window.onload` is fired when the DOM is ready and all the content including images, CSS, scripts, subframes, etc. finish loaded.

It means that everything is loaded.

`document.onload` is fired when the DOM is ready, which can be before images and other external content is loaded.

`document.readyState` returns `'loading'` when the document is loading, `'interactive'` once it’s finished parsing but stilling loading subresources, and `'complete'` once it’s completely loaded.

The `readystatechange` event is fired when the `readyState` is changed.

### What’s the difference between an attribute and a property?

Attributes represent the attributes in HTML elements inside the starting tag.

They’re exposed to the DOM via a property, Properties of the JavaScript DOM objects are created when the DOM is parsed for each attribute in the HTML tag.

If an attribute is changed, the value of the property will change. On the other hand, if we change the property in the JavaScript DOM object, the attribute will stay the same.

### What are the methods to get one or more elements from the DOM?

Browsers provide us with multiple methods to get elements from the DOM.

They’re the following:

#### getElementById

`geteElementById` returns an element with the given ID.

#### `getElementsByClassName`

`getElementsByClassName` gets a NodeList array-like object, which is an object with entries that have indexes and a `length` property by passing in a string with the class name.

#### `getElementsByTagName`

`getElementsByTagName` gets a NodeList by passing in a tag name.

#### `querySelector`

`querySelector` gets a DOM Node by passing in a CSS selector string.

#### `querySelectorAll`

`querySelectorAll` gets a NodeList by passing in a CSS selector string.

#### `getElementsByName`

`getElementsByName` returns a list of elements by the provided name of the HTML tag

#### `getElementsByTagNameNS`

`getElementsByTagNameNS` returns elements with a particular tag name within the provided namespace.

### What’s the fastest way to query DOM?

The fastest way to select an element is by ID if the ID exists.

The second quickest is `getElementByClassName` .

The longer the selector, the slower it will be.

`querySelectorAll` will be the slowest since it has to search for all kinds of CSS selectors.

Other methods like `getElementById` and `getElementsByTagName` only search for specific kinds of selectors.

### How do we use forEach and other array methods on a NodeList?

We can use the spread operator to convert the NodeList to an array, then we can use `forEach` or any other array method we want with the NodeList.

We can do this since it’s an array-like object.

For example, if we have the following HTML:

```
<div>foo</div>
<div>bar</div>
<div>baz</div>
```

Then we can get and loop through the divs by running:

```
[...document.querySelectorAll('div')].forEach(div => console.log(div.textContent));
```

Then we’ll get:

```
foo
bar
baz
```

from the `console.log` .

### How do we implement a function to get elements by attribute?

We can implement the function easily with `document.querySelectorAll` by using a CSS selector with the given attribute and value:

```
const getElementsByAttribute = (attribute, value) => {
  return [...document.querySelectorAll(`[${attribute}=${value}]`)];
}
```

Therefore, if we’re given the following HTML:

```
<div id='foo'>foo</div>
<div>bar</div>
<div>baz</div>
```

We’ll see an array with the div with ID `foo` returned.

### How do we implement a function to add a class to an HTML element?

We can write the following function to add a class to an element:

```
const addClass = (selector, className) => {
  const elm = document.querySelector(selector);
  if (elm) {
    elm.classList.add(className);
  }
}
```

In the code above, we used `querySelector` to get a single element. Then if the element with the given selector exists, we use the `classList` property’s `add` method to add a new class name to the element.

For example, given that we have the following HTML:

```
<div>foo</div>
<div>bar</div>
<div>baz</div>
```

The first div will have the `foo` class added if we run:

```
addClass('div', 'foo');
```

### Conclusion

We can select DOM elements and manipulate their properties.

They’re from the attributes that we have written in the HTML code or generated on the fly with JavaScript.

`document` represents the page and `window` is the parent object for `document` .