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

**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 harder questions about DOM manipulation.

### How to check if an element is a descendant of a parent element?

We can use the `parentNode` property of a DOM element to check if an element is a child of another element.

For example, we write the following function check if a node is a parent of a child node:

```
const isDescendant = (parent, child) => {
  while (child.parentNode) {
    if (child.parentNode == parent)
      return true;
    else
      child = child.parentNode;
  }
  return false;
}
```

In the `isDescendant` function, we get the parent node of the `child` with the `parentNode` property until we reach the top level.

In each parent, we check if the `parentNode` property references the same node as the `parent` .

We return `true` if that’s the case. Otherwise, we go top the grandparent, great-grandparent and all the way to the top level and return `true` if we find that `parentNode` is the same node as `parent`.

Otherwise, we return `false` if none of them are the same as `parent`.

For example, if we have the following HTML:

```
<div>
  <p>
    <span></span>
  </p>
</div>

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

Then if we have the following code:

```
const div = document.querySelector('div');
const p = document.querySelector('p');
const span = document.querySelector('span');
const foo = document.querySelector('#foo');

console.log(isDescendant(div, p));
console.log(isDescendant(div, span));
console.log(isDescendant(foo, span));
```

The first 2 should log `true` and the last one should `false` since the first div is the parent of p and grandparent of the span.

The div with ID foo isn’t a parent of any of the other nodes.

### What’s the difference between innerHTML and appendChild?

`innerHTML` removes all current child nodes of the elements. Then the JavaScript interpreter parses the string and then assigns the parsed string to the element as the children.

`appendChild` attaches the child node to the parent node it’s called on as the name suggests.

For example, if we have the following HTML:

```
<div>
  <p>foo</p>
</div>
```

Then if we write:

```
const div = document.querySelector('div');
div.innerHTML = '<p>bar</p>';
```

Then we only see ‘bar’ on the screen since we set the `innerHTML` property to overwrite what’s there.

On the other hand, if we use `appendChild` as follows:

```
const div = document.querySelector('div');

const p = document.createElement("p");
const bar = document.createTextNode("bar");
p.appendChild(bar);

div.appendChild(p);
```

Then we add the p element with the text node ‘bar’ and the call `appendChild` to append `p` to the `div` , we see:

```
foo

bar
```

displayed on the screen since we added a new child to the end of the list of child elements to the div.

### What is createDocumentFragment and why you might use it?

`document.createDocumentFragment` lets us create a new `DocumentFragment` in which DOM nodes can be added to build an offscreen DOM tree.

For example, if we have the following HTML:

```
<ul></ul>
```

Then we can use `createDocumentFragment` as follows to create an offscreen fragment and then insert the whole thing into the DOM:

```
const element = document.querySelector('ul');
const fragment = document.createDocumentFragment();
const fruits = ['apple', 'orange', 'grape'];

fruits.forEach((fruit) => {
  const li = document.createElement('li');
  li.textContent = fruit;
  fragment.appendChild(li);
});

element.appendChild(fragment);
```

With `createDocumentFragment` , we added all the nodes to fragment first and then append the whole thing to our `ul` element with `appendChild` .

`DocumentFragment` is a lightweight or minimal part of a DOM or a DOM subtree. It’s useful for manipulating the part of the DOM multiple times.

`DocumentFragments` are managed in memory so that the CPU won’t be taxed by expensive operations.

### What is reflow? What causes reflow? How could we reduce reflow?

Reflow is the situation where we change the position of the elements according to screen size or position changes.

If we change the width of the screen, like when we’re rotating the phone’s screen, then everything has to be moved to display in the screen property.

Reflows are expensive since everything has to be moved, especially on smaller devices like phones.

Reflows are caused by changing layout, resizing the window, changing the dimension of any element, changing fonts in any way, moving DOM elements, adding or removing stylesheets, and anything else that make similar kinds of changes.

To avoid reflow, we avoid setting multiple inline styles, apply animations to elements that fixed or absolute position, and avoid using tables for layout.

### Conclusion

We can use the `parentNode` property of a node to get the parent of a node.

Setting the `innerHTML` property of an element overwrites all the existing children and replace them with new ones from the string we set.

`appendChild` attaches a new child element to the end of the subtree.

`DocumentFragments` are lightweight offscreen elements that hold DOM elements. It’s managed in memory and can be added to the screen like any other element.

Reflow is the position change of elements according to some other changes on the screen. It’s an expensive operation that should be avoided.