There are 12 node types. In practice we usually work with 4 of them:
document – the “entry point” into DOM.
element nodes – HTML-tags, the tree building blocks.
text nodes – contain text.
comments – sometimes we can put information there, it won’t be shown on UI, but JS can read it from the DOM.
<div id="myId">This is an element with ID</div>
<div class="myClass">This is an element with class</div>
<input type="text" name="myName" value="Input name">
<div>This is a div element</div>
<div class="myClass">This element with class</div>
<p>This is a paragraph</p>
// document.getElementById
const myElement = document.getElementById('myId');
console.log(myElement.textContent);
// document.getElementsByClassName
const elementsByClass = document.getElementsByClassName('myClass');
for (let i = 0; i < elementsByClass.length; i++) {
console.log(elementsByClass[i].textContent);
}
// document.getElementsByName
const elementsByName = document.getElementsByName('myName');
console.log(elementsByName[0].value);
// document.getElementsByTagName
const divElements = document.getElementsByTagName('div');
for (let i = 0; i < divElements.length; i++) {
console.log(divElements[i].textContent);
}
Modifying Elements:
<div id="myDiv">Initial content</div>
// Set attribute
const myDiv = document.getElementById('myDiv');
myDiv.setAttribute('class', 'highlight');
// Get attribute
const classValue = myDiv.getAttribute('class');
console.log(classValue); // Output: highlight
// InnerHTML
myDiv.innerHTML = '<p>This is <strong>new</strong> content</p>';
// InnerText
myDiv.innerText = 'This is new text content';
// Create element and append
const newElement = document.createElement('p');
newElement.textContent = 'This is a new paragraph element';
myDiv.appendChild(newElement);
// Prepend child
const newChild = document.createElement('div');
newChild.textContent = 'This is a prepended div';
myDiv.prepend(newChild);
// Append
const appendedElement = document.createElement('span');
appendedElement.textContent = 'This is appended content';
myDiv.append(appendedElement);
// Prepend
const prependedElement = document.createElement('span');
prependedElement.textContent = 'This is prepended content';
myDiv.prepend(prependedElement);
// Remove child
myDiv.removeChild(newElement);
Events: Any action being done on the UI is called an event.
Ex:
etc, all the above are different types of events which you have access to. You can set triggers based on these events.
<button id="myButton">Click me</button>
<div id="myElement"
style="width: 100px; height: 100px; background-color: red;">
</div>
<div id="myElement"
style="width: 100px; height: 100px; background-color: blue;">
</div>
<input type="text" id="myInput" placeholder="Type something...">
<form id="myForm">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<button type="submit">Submit</button>
</form>
<select id="mySelect">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
document.getElementById('myButton').addEventListener('click', function() {
console.log('Button clicked!');
});
document.getElementById('myElement').addEventListener('mouseover', function() {
console.log('Mouse over the element!');
});
document.getElementById('myElement').addEventListener('mouseout', function() {
console.log('Mouse out of the element!');
});
document.addEventListener('keydown', function(event) {
console.log('Key pressed: ' + event.key);
});
document.addEventListener('keyup', function(event) {
console.log('Key released: ' + event.key);
});
document.getElementById('myInput').addEventListener('focus', function() {
console.log('Input field focused!');
});
document.getElementById('myInput').addEventListener('blur', function() {
console.log('Input field blurred!');
});
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault();
console.log('Form submitted!');
});
document.getElementById('mySelect').addEventListener('change', function() {
console.log('Option changed!');
});
window.addEventListener('resize', function() {
console.log('Window resized!');
});
Event Propagation: mechanism by which events propagate through the DOM tree. It is implemented by browsers and in either of 2 ways:
Event Bubbling:
Event bubbling is the default behaviour in which an event first triggers on the innermost target element, then bubbles up through its ancestor elements in the DOM tree until it reaches the root of the document (i.e., the window object). This means that the event handlers on the ancestor elements are also executed in sequence.
Event Capturing:
Event capturing is the opposite of event bubbling. It involves the event starting from the root of the document and trickling down through the DOM tree to the target element. Once the event reaches the target element, it triggers the event handlers attached to it.
Difference:-
Event Bubbling and Event Capturing:
The main difference is in the direction in which the event propagates through the DOM tree.
Bubbling moves from the target element upwards to the ancestors, while capturing moves from the root downwards to the target element.
Event Delegation:
Event delegation is a design pattern in which instead of attaching event handlers directly to individual elements, you attach a single event handler to a common ancestor element of the target elements. This handler then listens for events that bubble up from the target elements.
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
// const listParent = document.getElementById('myList')
listParent.addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
console.log('Clicked on ' + event.target.textContent);
}
});