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:

Name	Value
DOCUMENT_POSITION_DISCONNECTED	1
DOCUMENT_POSITION_PRECEDING	2
DOCUMENT_POSITION_FOLLOWING	4
DOCUMENT_POSITION_CONTAINS	8
DOCUMENT_POSITION_CONTAINED_BY	16
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC	32

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 🙂

Comments

[ender minyard]

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

I think you meant container, not cotainer. Great article otherwise!

[Charles Assunção]

Thanks :)

[Jake Varness]

Everyone always forgets how powerful plain JavaScript can be, especially when it comes to the DOM. Everyone always wants to know how to do certain things in React/Angular/whatever but they forget the basics!

[John Kazer]

Definitely. Although I really like using a virtual DOM, as it let's me focus on app logic separately from DOM manipulation. I guess there is a nice transition from apps with a bit of dynamism that use plain JavaScript through somewhat more complex apps that use a virtual DOM and then those big apps that use react or similar.

[Charles Assunção]

Can't agree more 😁

[Bartosz Wójcik]

In the last example node.replaceWith() does the ID stays the same id="nodeB"?

[Charles Assunção]

Actually no, good catch, thanks :)

[Laurent Brieu]

Hi,

there's a typo here :

<span id="use-name" />

must be :

<span id="user-name" />