Powerful unknown web APIs

Powerful unknown web APIs:

 

https://damianfallon.blogspot.com/

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 nodeAcompared 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:

And you want to make sure that  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:

Hello World!

Hello World!

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:

NODE B

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:

Node C

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 

https://damianfallon.blogspot.com/

from Tumblr https://generouspiratequeen.tumblr.com/post/628224278352084993

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s