Skip to main content

Node Properties

Browser Document: Node Properties

What is a DOM node?​

View Answer:
Interview Response: A DOM (Document Object Model) node is an object representing a part of an HTML document. This can be elements, attributes, or text. It's the core interface for web page manipulation.

Here is a simple JavaScript code example that manipulates DOM nodes:

// Select a DOM node
let node = document.getElementById('myDiv');

// Change its text content
node.textContent = 'New Text';

// Add a new child element
let newElement = document.createElement('p');
newElement.textContent = 'I am a new paragraph!';
node.appendChild(newElement);

This code selects a <div> element with the id 'myDiv', changes its text, and adds a new <p> child node to it.

What are some common node properties?​

View Answer:
Interview Response: Common node properties include nodeName, nodeType, nodeValue, parentNode, childNodes, firstChild, lastChild, nextSibling, and previousSibling.

What is the nodeName property?​

View Answer:
Interview Response: The nodeName property returns the name of a specific node in the DOM, like the tag name for HTML elements or '#text' for text nodes.

Code Example:

Here is a simple JavaScript code example showing how to use the nodeName property.

// Select a DOM node
let node = document.getElementById('myDiv');

// Log its node name
console.log(node.nodeName);  // Logs: 'DIV'

This code selects a <div> element with the id 'myDiv' and logs its node name, which is 'DIV'.

How does nodeValue differ from textContent?​

View Answer:
Interview Response: The nodeValue property returns or sets the value of a node. For text nodes, it's the text itself, but for elements, it's null. textContent gets or sets the text inside an element, including its descendants.

Code Example:

Here is a JavaScript code example that shows the difference between nodeValue and textContent:

// Create a new text node
let textNode = document.createTextNode('Hello, World!');

console.log(textNode.nodeValue); // Logs: 'Hello, World!'
console.log(textNode.textContent); // Logs: 'Hello, World!'

// Select an element
let elementNode = document.getElementById('myDiv');

console.log(elementNode.nodeValue); // Logs: null
console.log(elementNode.textContent); // Logs: text content of 'myDiv', including any child elements

In this code, both nodeValue and textContent return the same result for a text node. But for an element, nodeValue returns null while textContent returns the element's text content.

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

View Answer:
Interview Response: The DOM hierarchy consists of nodes, organized in a tree structure: Document (root), Element (tags), Text (content), Comment, and Attribute (properties). Parent, child, and sibling relationships connect nodes for traversal and manipulation. 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.

Diagram:



How can you access an element's attributes using node properties?​

View Answer:
Interview Response: We can use the attributes property to access a live NamedNodeMap of an element's attributes, where each attribute is represented as an Attr node.

Code Example:

<pre test="test"></pre>

<script>
const pre = document.querySelector("pre");
const attrMap = pre.attributes;
const value = attrMap.getNamedItem("test").value;
pre.textContent = `The 'test' attribute contains ${value}.
And 'boum' has ${attrMap["boum"] ? "been" : "not been"} found.`;
</script>

How do you access an element's class list using node properties?​

View Answer:
Interview Response: You can access an element's class list using the classList property. For instance, element.classList returns a DOMTokenList object of the class attributes.

Code Example:

let element = document.querySelector('.example-class');
let classList = element.classList;

classList.forEach(className => {
    console.log(className);
});

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

View Answer:
Interview Response: The Node abstract class represents a single node in the DOM tree, defining shared properties and methods for various node types, facilitating tree traversal, manipulation, and event handling.

Technical 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: The Element base class represents an HTML element, defining methods and properties for manipulation and interaction. It encapsulates attributes, content, and child elements, while providing access and modification capabilities.

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 base class represents an HTML-specific element, inheriting from Element. It is inherited by concrete HTML elements such as the HTMLInputElement, HTMLBodyElement, and HTMLAnchorElement classes. It provides properties and methods for styling, form control, and accessibility, tailored to HTML-specific behaviors and attributes.

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 node.constructor.name is its name, or we can toString it. We can also use instanceof to check the inheritance, which returns a Boolean value.

Code Example:

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

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

// Check to see if its a instanceof of an Element
console.log(document.body instanceof HTMLBodyElement); // true
console.log(document.body instanceof HTMLElement); // true
console.log(document.body instanceof Element); // true
console.log(document.body instanceof Node); // true
console.log(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 displays a string representation of an object, while console.dir presents an interactive, navigable tree view of object properties, making it easier to explore object structure.

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.

Code Example:

const obj = { name: 'John', age: 30 };

console.log(obj);  // Output: { name: 'John', age: 30 }
console.dir(obj);  // Output: Object: { name: 'John', age: 30, ... }

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

View Answer:
Interview Response: Interface Description Language (IDL) is a formal language used to define interfaces between software components, specifying data types, methods, and structures, enabling cross-language communication and code generation.

Technical 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: DOM classes are described in the specification using WebIDL, an interface description language that defines interfaces, methods, properties, and data types, serving as a blueprint for DOM API implementations.

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: The nodeType property in JavaScript returns an integer constant representing the node's type, such as Element (1), Attribute (2), Text (3), Comment (8), or Document (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?
    console.log(elem.nodeType); // 1 => element

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

    // for the document object, the type is 9
    console.log(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
    console.log(document.body.firstChild.tagName); // undefined (not an element)
    console.log(document.body.firstChild.nodeName); // #comment

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

Is there a difference between what gets returned when the tagName attribute gets used in 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 is 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>
    console.log(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 as text content but does not execute.

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

View Answer:
Interview Response: When using "innerHTML+=", be aware that it destroys and recreates element content, causing loss of attached event listeners, inefficient performance, and potential security risks from script injection.

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

Code Example:

The Problem:

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
</head>
<body>
    <div id="myDiv">
        Initial content
    </div>

    <script>
        let div = document.getElementById('myDiv');
        let items = ['Item 1', 'Item 2', 'Item 3'];

        // Incorrect usage: appending content using innerHTML +=
        for (let item of items) {
            div.innerHTML += '<p>' + item + '</p>';
        }
    </script>
</body>
</html>

The Solution:

To efficiently append content to an element without the issues of using innerHTML +=, you can use the createElement and appendChild methods. Here's an updated code example that demonstrates the recommended approach:

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
</head>
<body>
    <div id="myDiv">
        Initial content
    </div>

    <script>
        let div = document.getElementById('myDiv');
        let items = ['Item 1', 'Item 2', 'Item 3'];

        // Correct usage: appending content using createElement and appendChild
        for (let item of items) {
            let paragraph = document.createElement('p');
            paragraph.textContent = item;
            div.appendChild(paragraph);
        }
    </script>
</body>
</html>

In this updated example, instead of using innerHTML +=, we create a new <p> element for each item in the array using createElement. We set the text content of the paragraph element using textContent, and then append it to the myDiv element using appendChild. This approach avoids the performance and event handling issues associated with innerHTML += and provides a more reliable way to append content to the element.

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

View Answer:
Interview Response: The outerHTML property in JavaScript gets or sets the serialized HTML including the element itself, allowing retrieval and replacement of an element along with its content and attributes.

Technical 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!
  console.log(div.outerHTML); // <div>Hello, world!</div> (**)
</script>

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

View Answer:
Interview Response: For text nodes, we use the nodeValue or textContent properties, which enable getting or setting the content of text and comment nodes, without parsing or rendering HTML.

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;
    console.log(text.data); // returns Hello JavaScript

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

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

View Answer:
Interview Response: A good use case for reading data from comments is extracting metadata, such as version information or instructions, from HTML templates or application source code for diagnostics or documentation.

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 property in JavaScript gets or sets the text content of a node and its descendants, allowing manipulation of element content without parsing HTML or exposing HTML tags.Writing to textContent is much more helpful because it allows us to write text the “secure way”.

Technical 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>

Can you explain what the hidden attribute and DOM property do in JavaScript?​

View Answer:
Interview Response: The hidden attribute and DOM property in JavaScript control an element's visibility, hiding it from rendering when set to true, without affecting layout or functionality, it's useful for toggling content in the browser. 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>