Author: John Au-Yeung

Sometimes, we want to get the string representation of a DOM node with JavaScript.

In this article, we’ll look at how to get the string representation of a DOM node with JavaScript.

How to get the string representation of a DOM node with JavaScript?

To get the string representation of a DOM node with JavaScript, we can use the outerHTML property.

For instance, we write

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

const tmp = document.createElement("div");
tmp.appendChild(el);
console.log(tmp.outerHTML);

to create the p element with createElement.

And then we call appendChild to append a text node as its last child to it that we created with createTextNode.

Then we create the tmp element with `createElement.

And then we call tmp.appendChild to append the p element el as the last child of it.

Finally, we get the HTML string version of tmp with tmp.outerHTML.

Conclusion

To get the string representation of a DOM node with JavaScript, we can use the outerHTML property.

Sometimes, we want to convert a DOM node list to an array in JavaScript.

In this article, we’ll look at how to convert a DOM node list to an array in JavaScript.

How to convert a DOM node list to an array in JavaScript?

To convert a DOM node list to an array in JavaScript, we can use the spread operator or the Array.from method.

For instance, we write

const elements = [...nodeList];

or

const elements = Array.from(nodeList);

to use the spread operator or the Array.from method to convert the nodeList node list to an array.

Conclusion

To convert a DOM node list to an array in JavaScript, we can use the spread operator or the Array.from method.

Sometimes, we want to check if a query string value is present via JavaScript.

In this article, we’ll look at how to check if a query string value is present via JavaScript.

How to check if a query string value is present via JavaScript?

To check if a query string value is present via JavaScript, we can use the URLSearchParams constructor.

For instance, we write

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const product = urlParams.get("product");

to get the query string from the current URL with window.location.search.

Then we pass queryString into the URLSearchParams constructor to create the urlParams object.

Finally, we get the value of the query parameter with key 'product' with urlParams.get.

Conclusion

To check if a query string value is present via JavaScript, we can use the URLSearchParams constructor.

Sometimes, we want to disable browsers vertical and horizontal scrollbars with JavaScript.

In this article, we’ll look at how to disable browsers vertical and horizontal scrollbars with JavaScript.

How to disable browsers vertical and horizontal scrollbars with JavaScript?

To disable browsers vertical and horizontal scrollbars with JavaScript, we can set the overflow style to 'hidden'.

For instance, we write

document.documentElement.style.overflow = "hidden";

to hide the scrollbars on the page by setting document.documentElement.style.overflow to 'hidden'.

We can restore the scrollbars with

document.documentElement.style.overflow = "auto";

Conclusion

To disable browsers vertical and horizontal scrollbars with JavaScript, we can set the overflow style to 'hidden'.