1. What is the DOM?
- DOM stands for Document Object Model.
- It is a programming interface for web documents.
- The DOM represents the structure of a document (like an HTML or XML file) as a tree of objects.
- Each part of the document (elements, attributes, text) is represented as a node.
2. The HTML Structure
Consider a simple HTML document:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>- This HTML document has a hierarchical structure, starting with the
<html>element, which contains<head>and<body>, and so on.
3. Accessing the DOM with JavaScript
- JavaScript can interact with and manipulate the DOM.
- You can use various methods provided by the
documentobject to access elements.
4. Selecting Elements
document.getElementById(id): Selects an element by its ID.- Example : To Selects element with id ‘header’
var header = document.getElementById('header'); document.getElementsByClassName(className): Selects elements by their class name. // Selects element with class ‘paragraph’
var paragraphs = document.getElementsByClassName('paragraph'); document.getElementsByTagName(tagName): Selects elements by their tag name. // Selects all <div> elements
var divs = document.getElementsByTagName('div'); document.querySelector(selector): Selects the first element that matches a CSS selector. // Selects the first element with class ‘paragraph’
var firstParagraph = document.querySelector('.paragraph'); /document.querySelectorAll(selector): Selects all elements that match a CSS selector. // Selects all elements with class ‘paragraph’
var allParagraphs = document.querySelectorAll('.paragraph'); 5. Manipulating Elements
- Change content: You can change the content of an element.
- // Changes the inner HTML of the element with id ‘header’
var header = document.getElementById('header');
header.innerHTML = 'New Header Text'; - Change style: You can change the CSS styles of an element. // Changes the text color of the first <p> element to blue
var paragraph = document.querySelector('p');
paragraph.style.color = 'blue'; - Add/Remove Classes: You can add or remove CSS classes from an element.
- Adds a class ‘new-class’ to the first <p> element
- Removes a class ‘old-class’ from the first <p> element
var paragraph = document.querySelector('p');
paragraph.classList.add('new-class');
paragraph.classList.remove('old-class'); 6. Creating and Adding New Elements
- Create a new element: You can create a new element using
document.createElement(tagName).
var newDiv = document.createElement('div');
// Creates a new <div> element- Append the new element: You can add the new element to the document. // Adds the new <div> element to the end of the <body>
var body = document.querySelector('body');
body.appendChild(newDiv); 7. Event Handling
- Add event listeners: You can add event listeners to handle user interactions. // Adds a click event listener to a button element
var button = document.querySelector('button');
button.addEventListener('click', function()
{
alert('Button was clicked!');
}); 8. Putting It All Together
Here is a simple example that combines these concepts:
<!DOCTYPE html>
<html>
<head>
<title>My Interactive Page</title>
</head>
<body>
<h1 id="header">Hello, World!</h1>
<button id="changeTextButton">Change Text</button>
<script>
// Select the button and header
var button = document.getElementById('changeTextButton');
var header = document.getElementById('header');
// Add click event listener to the button
button.addEventListener('click', function()
{
// Change the header text
header.innerHTML = 'Text Changed!';
});
</script>
</body>
</html>- This HTML has a button that, when clicked, changes the text of the header.
Conclusion
- The DOM is a powerful interface for interacting with web documents.
- JavaScript provides many methods for selecting and manipulating DOM elements.
- You can create dynamic, interactive web pages by combining these techniques.
By understanding these basic concepts, you can start to explore more advanced topics and build more complex web applications.