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.
Leave a Reply