Skip to main content

Node Properties

Browser Document: Node Properties

Can you explain the hierarchy in classes of DOM nodes?​

View Answer:
Interview Response: Each DOM node belongs to the corresponding built-in class. The root of the hierarchy is EventTarget, inherited by the node, and other DOM nodes inherit from it, such as text, element, and comment nodes.

Can you briefly explain the purpose of the EventTarget abstract class?​

View Answer:
Interview Response: EventTarget is the root “abstract” class. Objects of that class do not adhere to an abstract creation process; it serves as a base so that all DOM nodes support so-called “events”.

Can you describe the Node abstract class's function?​

View Answer:
Interview Response: Node is also an “abstract” class, serving as a base for DOM nodes. It provides the core tree functionality: parentNode, nextSibling, childNodes, and more (they are getters). Objects of the node class get created. But concrete node classes inherit from it: Text nodes for text nodes, Element nodes for element nodes, and more exotic ones like Comment nodes for comment nodes.

Can you please explain the purpose of the Element base class?​

View Answer:
Interview Response: Element is a base class for DOM elements. It provides element-level navigation like nextElementSibling, children and searching methods like getElementsByTagName, querySelector. A browser supports not only HTML, but also XML and SVG. The Element class serves as a base for more specific classes: SVGElement, XMLElement and HTMLElement.

What is the purpose of the HTMLElement base class?​

View Answer:
Interview Response: HTMLElement is the base class for all HTML elements. It is inherited by concrete HTML elements such as the HTMLInputElement, HTMLBodyElement, and HTMLAnchorElement classes.

Additional Information:

  • HTMLInputElement is the class for ‹input› elements.
  • HTMLBodyElement is the class for ‹body› elements.
  • HTMLAnchorElement is the class for ‹a› elements.

How can you expose the DOM node class name?​

View Answer:
Interview Response: To see the DOM node class name, we recall that an object usually has the constructor property. It references the class constructor and constructor.name is its name, or we can toString it. We also can use instanceof to check the inheritance, which returns a Boolean value.

Code Example:

// Using the Object constructor
alert(document.body.constructor.name); // HTMLBodyElement

// Built-in toString return value
alert(document.body); // [object HTMLBodyElement]

// Check to see if its a instanceof of an Element
alert(document.body instanceof HTMLBodyElement); // true
alert(document.body instanceof HTMLElement); // true
alert(document.body instanceof Element); // true
alert(document.body instanceof Node); // true
alert(document.body instanceof EventTarget); // true

What is the difference between console.dir and console.log when returning objects in the console?​

View Answer:
Interview Response: In brief, console.log(elem) shows the element DOM tree and console.dir(elem) shows the element as a DOM object, and it is excellent to explore its properties.

Technical Response: Most browsers allow two commonly used commands in their development tools: console.log and console.dir. Their arguments get printed on the console. These instructions typically have the same effect on JavaScript objects. However, console.log(elem) displays the element's DOM tree for DOM elements. The element gets shown as a DOM object using console.dir(elem), allowing you to examine its properties.

What is an interface description language or IDL in programming?​

View Answer:
Interview Response: An interface description language or interface definition language (IDL), is a specification language used to describe a software component's application programming interface (API). IDLs describe an interface in a language-independent way, enabling communication between software components that do not share one language, such as those written in C++ and those written in Java.

How are DOM classes described in the specification?​

View Answer:
Interview Response: In the specification, DOM classes don’t get described by using JavaScript but a unique Interface description language (IDL) that is easy to understand. In IDL, all properties get prepended with their types. For instance, DOMString, boolean, and so on.

Code Example:

// Define HTMLInputElement
// The colon ":" means that HTMLInputElement inherits from HTMLElement
interface HTMLInputElement: HTMLElement {
  // here go properties and methods of <input> elements

  // "DOMString" means that the value of a property is a string
  attribute DOMString accept;
  attribute DOMString alt;
  attribute DOMString autocomplete;
  attribute DOMString value;

  // boolean value property (true/false)
  attribute boolean autofocus;
  //...
  // now the method: "void" means that the method returns no value
  void select();
  //...
}

What does the nodeType property return in JavaScript?​

View Answer:
Interview Response: It has a numeric value that reflects the type of node you are returning. For element nodes, it is 1; for text nodes, it is 3; and for the document object 9. There are others listed in the specification: https://dom.spec.whatwg.org/#node

Code Example:

<body>
  <script>
    let elem = document.body;

    // let us examine what it is?
    alert(elem.nodeType); // 1 => element

    // and the first child is...
    alert(elem.firstChild.nodeType); // 3 => text

    // for the document object, the type is 9
    alert(document.nodeType); // 9
  </script>
</body>

What is the difference between the nodeName and tagName properties?​

View Answer:
Interview Response: The tagName property exists only for Element nodes. The nodeName gets defined for any Node, but elements mean the same as tagName, and for other node types (text, comment, and more), it has a string with the node type.

Note: In other words, tagName is only supported by element nodes (as it originates from Element class), while nodeName can say something about other node types.

Technical Response: The contrast gets mirrored in their names, but it is slight. Only Element nodes have the tagName attribute. For each Node, the nodeName gets specified, but elements have the same meaning as tagName, and for other node kinds (text, comment, and more), it has a string with the node type. In other words, tagName only gets used to describe element nodes (since it gets inherited from the Element class), whereas nodeName may be used to describe other node types.

Code Example:

<body>
  <!-- comment -->

  <script>
    // for comment
    alert(document.body.firstChild.tagName); // undefined (not an element)
    alert(document.body.firstChild.nodeName); // #comment

    // for document
    alert(document.tagName); // undefined (not an element)
    alert(document.nodeName); // #document
  </script>
</body>

Is there a difference between what gets returned when the tagName attribute gets used on HTML and XML?​

View Answer:
Interview Response: YES. The browser may handle documents in two ways: HTML and XML. Typically, HTML mode gets used for web pages. When the browser receives an XML document with the header content-type XML/XHTML, XML-mode is activated. In HTML mode, tagName and nodeName always get capitalized. The case is left "as is" in XML mode.

Note: Nowadays, XML mode gets rarely used, but you may come across it in older applications.

Technical Response: Although this may seem trivial, the answer is YES. The browser has two modes of processing documents: HTML and XML. Usually, the HTML-mode gets used for web pages. XML-mode is enabled when the browser receives an XML-document with the header: Content-Type: application/xml+xhtml. In HTML mode tagName/nodeName is always uppercased: it is BODY either for ‹body› or ‹BoDy›. In XML mode, the case gets kept “as is”. Nowadays, XML mode rarely gets used, but you may encounter it in older applications.

Can you explain what the innerHTML property does in JavaScript?​

View Answer:
Interview Response: The innerHTML property allows us to insert data/HTML inside an element as a string. We can also modify it. So, it is one of the most powerful ways to change the page dynamically.

Code Example:

<body>
  <p>A paragraph</p>
  <div>A div</div>

  <script>
    alert(document.body.innerHTML); // read the current contents
    document.body.innerHTML = 'The new BODY!';
    // replaces and returns The New Body in the HTML
  </script>
</body>

What happens when you attempt to insert the script tag using the innerHTML property?​

View Answer:
Interview Response: If innerHTML inserts a ‹script› tag into the document – it becomes a part of HTML but does not execute.

What is the main thing you should know when using “innerHTML+=” syntax?​

View Answer:
Interview Response: When using the “innerHTML+=” we should know the property is not an addition but a full overwrite.

Note: We can append HTML to an element by using elem.innerHTML+="more HTML". But we should be careful about doing it.

Can you explain what the outerHTML property does in JavaScript?​

View Answer:
Interview Response: The element's full HTML gets stored in the outerHTML attribute. This structure is equivalent to innerHTML plus the element itself. Be aware that, unlike innerHTML, writing to outerHTML does not affect the element. Instead, it substitutes it in the DOM. We can write to elem.outerHTML, but this does not modify the element we're writing to ('elem'). Instead, it replaces it with the new HTML. By accessing the DOM, we may obtain pointers to the new items.

Code Example:

<div>Hello, world!</div>

<script>
  let div = document.querySelector('div');

  // replace div.outerHTML with <p>...</p>
  div.outerHTML = '<p>A new element</p>'; // (*)

  // Wow! 'div' is still the same!
  alert(div.outerHTML); // <div>Hello, world!</div> (**)
</script>

For element nodes, we can use innerHTML, but what is the recommended for use with the other node types like text nodes?​

View Answer:
Interview Response: We should use the nodeValue and data properties instead of innerHTML. These two are almost the same for practical use, and there are only minor specification differences. So, we should use the data property; it's shorter to implement.

Technical Response: The innerHTML attribute applies exclusively to element nodes. Other node kinds, such as text nodes, have an equivalent: nodeValue and data properties. These two are nearly identical in terms of practical usage, with just minor specification changes. As a result, we should utilize the data property because it is easier to implement.

Code Example:

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

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

What is a good use case for reading data from comments?​

View Answer:
Interview Response: We can use comments to embed information or template instructions into HTML. Then JavaScript can read it from data property and process embedded instructions.

Code Example:

<!-- if isAdmin -->
<div>Welcome, Admin!</div>
<!-- /if -->

Can you explain what the textContent property does in JavaScript?​

View Answer:
Interview Response: The textContent provides access to the text inside the element: only text, minus all ‹tags›. In practice, reading such text is rarely needed. Writing to textContent is much more helpful because it allows us to write text the “secure way”.

Code Example:

<div id="elem1"></div>
<div id="elem2"></div>

<script>
  let name = prompt("What's your name?", '<b>Winnie-the-Pooh!</b>');

  elem1.innerHTML = name; // Winnie-the-Pooh!
  elem2.textContent = name; // <b>Winnie-the-Pooh!</b>
</script>

Explain what the hidden attribute and DOM property does in JavaScript?​

View Answer:
Interview Response: The “hidden” attribute and the DOM property specifies whether the element is visible or not. Technically, hidden works the same as style="display:none". But it’s shorter to write.

Code Example:

<div>Both divs below are hidden</div>

<!-- hidden attribute -->
<div hidden>With the attribute "hidden"</div>

<div id="elem">JavaScript assigned the property "hidden"</div>

<script>
  elem.hidden = true; // <- hidden DOM property
</script>