Node Properties
Browser Document: Node Properties
What is a DOM node?
View Answer:
// 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:
What is the nodeName property?
View Answer:
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:
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:
How can you access an element's attributes using node properties?
View Answer:
<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:
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:
Can you please explain the purpose of the Element base class?
View Answer:
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:
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:
// 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:
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:
How are DOM classes described in the specification?
View Answer:
// 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:
<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:
<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:
Can you explain what the innerHTML property does in JavaScript?
View Answer:
<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:
What is the main thing you should know when using “innerHTML+=” syntax?
View Answer:
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:
<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:
<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:
<!-- if isAdmin -->
<div>Welcome, Admin!</div>
<!-- /if -->
Can you explain what the textContent property does in JavaScript?
View Answer:
<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:
<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>