JavaScript / jQuery HTML DOM

The HTML DOM (Document Object Model) is a programming interface for web documents. It defines the structure of a webpage so that programming languages like JavaScript and jQuery can interact with and manipulate it.

Both JavaScript and jQuery allow developers to traverse, modify, and manage the DOM effectively.

What is the HTML DOM?

The HTML DOM represents a webpage as a tree structure where:

• Nodes represent elements, attributes, and text.
• Methods allow interaction with elements, such as selecting, modifying, or deleting them.
• Properties let you get or set values for DOM elements.

HTML DOM with JavaScript

Accessing Elements

• By ID:

let element = document.getElementById('myId');

• By Class:

let elements = document.getElementsByClassName('myClass');

• By Tag Name:

let elements = document.getElementsByTagName('div');

• Using Query Selectors:

let element = document.querySelector('.myClass'); // First match
let elements = document.querySelectorAll('div'); // All matches

Modifying Elements

• Change Content: element.innerHTML = 'New Content';
• Change Styles: element.style.color = 'blue';
• Add/Remove Classes: element.classList.add('newClass'); element.classList.remove('oldClass');

Traversing the DOM

• Parent Node: let parent = element.parentNode;
• Child Nodes: let children = element.childNodes;
• Siblings: let nextSibling = element.nextSibling; let previousSibling = element.previousSibling;

Event Handling

• Add Event Listener: element.addEventListener('click', function() { alert('Element clicked!'); });

HTML DOM with jQuery

jQuery simplifies DOM interactions with concise methods.

Accessing Elements

• By ID: let element = $('#myId');
• By Class: let elements = $('.myClass');
• By Tag Name: let elements = $('div');

Modifying Elements

• Change Content: $('#myId').html('New Content');
• Change Styles: $('#myId').css('color', 'blue');
• Add/Remove Classes: $('#myId').addClass('newClass').removeClass('oldClass');

Traversing the DOM

• Parent Node: let parent = $('#myId').parent();
• Child Nodes: let children = $('#myId').children();
• Siblings: let nextSibling = $('#myId').next(); let previousSibling = $('#myId').prev();

Event Handling

• Add Event Listener: $('#myId').click(function() { alert('Element clicked!'); });

Comparing JavaScript and jQuery for DOM Manipulation

Example: Changing the Text of an Element

Using JavaScript:

document.getElementById('example').innerHTML = 'Hello, World!';

Using jQuery:

$('#example').html('Hello, World!');

When to Use JavaScript or jQuery

• JavaScript: Ideal for performance-critical applications and modern projects without dependencies.
• jQuery: Best for quick prototyping and ensuring compatibility with older browsers.

For more tutorials and coding tips, visit The Coding College.