Powerful unknown web APIs

We are constantly manipulating the DOM and working with it as front-end developers, the thing is we know many of the common methods available but there are so many web apis out there that are powerful but barely known by everyone, so let me share a few of them with you :)

nodeA.compareDocumentPosition(nodeB)

This is a very cool method that allows you to understand better the current structure of your DOM. Sometimes you need to know where the node you are working with is placed in the DOM or you need to have more control how you apply changes to specific node, using this method you can do it with some sort of safety.
This method will return a bitmask informing you the position of the nodeA compared to nodeB, the possible values are:

You can see some quick usage and try to understand it a little better having a look into this small CodesandBox

One last great thing about this one is that has a excellent cross browser support. 🥳

node.contains(anotherNode)

following the previously method, one of the most common comparison is if a certain node is inside another. So imagine the following HTML:

<div id="container">
    <div>
        <span id="user-name" />
    </div>
</div>

And you want to make sure that <span id="user-name /> is inside the container div. Using the previously method you could do something like:

const container = document.querySelector('#container');
const userName  = document.querySelector('#user-name')
if(container.compareDocumentPosition(userName) & Node.DOCUMENT_POSITION_CONTAINS){ 
 console.log(`container contains userName`);
}

But this is so common need that we got a easier way to achieve the same by using:

const container = document.querySelector('#container');
const userName  = document.querySelector('#user-name')
if(container.contains(userName)){ 
 console.log(`container contains userName`);
}

node.isEqualNode(nodeB)

This one is very straightforward by its name, you can compare if 2 node are equivalent, not necessary if the are the same. So if we have the following HTML:

<h1>Hello World!</h1>
<div>
  <div>
    <h1>Hello World!</h1>
  </div>
</div>

And if we compare like this:

const nodes = document.querySelectorAll("h1");
console.log(nodes[0].isEqualNode(nodes[1])); // true

This will compare the node content, attributes and type to check if they are equivalent, so this means that a small change like adding an id to one of the nodes would be enough to return false in the comparison.

node.replaceWith()

This one seems like a little magic 🧙🏻‍♀️, it allows you to get one node remove it from the DOM replacing it by a entire new node.

Let's see how it works in the following HTML:

<div>
  <div>
    <h1 id="nodeB">NODE B</h1>
  </div>
</div>

If we execute this lines of javascript:

const nodeB = document.querySelector("#nodeB");
const nodeC = document.createElement('h2');
nodeC.textContent = 'Node C';
nodeB.replaceWith(nodeC)

Like magic our current DOM will be:

<div>
  <div>
    <h2>Node C</h2>
  </div>
</div>

I hope you have seem something new here today, let me know in the comments if you already knew all of this or if you learned something new 🙂