JavaScript DOM and Exception Related Random topics

5 min readApr 29, 2020

Hello everyone! we will discuss here some random topics about JavaScript dom and exception.And will learn try..catch blocks ,nodes, elements insertion

1)What is “try..catch”?

try..catch is mainly a error handling way.It constructs with two blocks.When the code runs at that time only ‘try’ block works and ignores ‘catch’ block.If any error occurs,the try execution is stopped, and control flows to the beginning of catch(err). The err object has two properties message and name where err.message gives us readable error message and err.name gives us the string with error name (error constructor name).Besides try..catch block only works on run time error.The JavaScript engine first reads the code, and then runs it. The errors that occur on the reading phase are called “parse-time” errors and are unrecoverable (from inside that code). That’s because the engine can’t understand the code.So, try..catch(err) can only handle errors that occur in valid code. Such errors are called “runtime errors” or, sometimes, “exceptions”.

2) ‘throw’ operator in error handling

The throw operator generates an error. And the syntax is throw< error object>.We can use anything as a error object like number, string .JavaScript has many built-in constructors for standard errors: error , systaxError, ReferenceError, TypeError and others. We can use them to create error objects as well.

3)What is Custom error?

In development, sometimes we need our own error class to reflect specific things that may go wrong in our tasks.JavaScript allows to use throw with any argument, so technically our custom error classes don’t need to inherit from Error. Run this below code and check on your browser console.You will show an error.

4)What Is DOM tree?

DOM means document object model.According to DOMmodel every html tag is object.And nesting tag is called ‘children’ .All html tags which created html document represented in the browser as a tree. Thats why it called DOM tree where tags become element nodes and form the structure.Text becomes text nodes.We can use developer tools to inspect DOM and modify it manually.If the browser encounters malformed HTML, it automatically corrects it when making the DOM.

5) childNodes, firstChild, lastChild

Child nodes (or children) — elements that are direct children. In other words, they are nested exactly in the given one. For instance, <head> and <body> are children of <html> element.

Descendants — all elements that are nested in the given one, including children, their children and so on.

Properties firstChild and lastChild give fast access to the first and last children.

If there exist child nodes, then the following is always true:

ele.childNodes[0]=== ele.firstChild

ele.childNodes[childNodes.length-1] === ele.lastChild

6)Difference between parentNode vs parentElement

parentNode: The parent node property is read only property which returns us the name of the parent node of the selected node as a node object. The Node object represents a single node in the document tree and a node can be an element node, text node or more.

parentElement: The parent element is read only property which returns the parent element of the selected element.The element object represents an HTML element, like P, DIV, etc.

Difference is Parent Element returns null if the parent is not an element node, that is the main difference between parentElement and parentNode. In many cases one can use anyone of them, in most cases, they are the same. For instance:

alert( document.documentElement.parentNode ); // document
alert( document.documentElement.parentElement ); // null

The reason is that the root node document.documentElement (<html>) has document as its parent. But document is not an element node, so parentNode returns it and parentElement does not.

7) what is text node content?

The innerHTML property is only valid for element nodes.Other node types, such as text nodes, comment nodes have their counterpart: nodeValue and data properties.

<body>
  Hello
  <!-- Comment -->
  <script>
    let text = document.body.firstChild;
    alert(text.data); // Hello

    let comment = text.nextSibling;
    alert(comment.data); // Comment
  </script>
</body>

8)Insertion method in DOM

To make the ‘div’ show up, we need to insert it somewhere into document. For instance, in document.body.

There’s a special method append for that: document.body.append(div).

This set of methods provides more ways to insert:

node.append(...nodes or strings) – append nodes or strings at the end of node,
node.prepend(...nodes or strings) – insert nodes or strings at the beginning of node,
node.before(...nodes or strings) –- insert nodes or strings before node,
node.after(...nodes or strings) –- insert nodes or strings after node,
node.replaceWith(...nodes or strings) –- replaces node with the given nodes or strings

9) insertAdjacentHTML/Text/Element

For that we can use another, pretty versatile method: elem.insertAdjacentHTML(where.html).The first parameter is a code word, specifying where to insert relative to elem. Must be one of the following:

"beforebegin" – insert html immediately before elem,
"afterbegin" – insert html into elem, at the beginning,
"beforeend" – insert html into elem, at the end,
"afterend" – insert html immediately after elem.

The second parameter is an HTML string, that is inserted “as HTML”.

<div id="div"></div>
<script>
  div.insertAdjacentHTML('beforebegin', '<p>Hello</p>');
  div.insertAdjacentHTML('afterend', '<p>Bye</p>');
</script>

that will lead to

<p>Hello</p>
<div id="div"></div>
<p>Bye</p>

10)DocumentFragment

DocumentFragment is a special DOM node that serves as a wrapper to pass around lists of nodes.We can append other nodes to it, but when we insert it somewhere, then its content is inserted instead.

that will lead to,

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>