Scribd
Upload
25 views

DOM Selection

DOM manipulation refers to interacting with the DOM using JavaScript to access and modify HTML elements. Common tasks include selecting elements, modifying content and attributes, creating/adding/removing elements, styling elements, and handling events. getElementById and querySelector both select elements but getElementById is faster for selecting by ID while querySelector is more flexible.

Uploaded by

sherman
Copyright
© © All Rights Reserved
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
25 views

DOM Selection

DOM manipulation refers to interacting with the DOM using JavaScript to access and modify HTML elements. Common tasks include selecting elements, modifying content and attributes, creating/adding/removing elements, styling elements, and handling events. getElementById and querySelector both select elements but getElementById is faster for selecting by ID while querySelector is more flexible.

Uploaded by

sherman
Copyright
© © All Rights Reserved
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
You are on page 1/ 3

D.O.

M Manipulation

DOM manipulation in web development refers to the process of interacting with the Document
Object Model (DOM) of a web page using JavaScript. The DOM is a programming interface that
represents the structure of an HTML document as a tree-like structure of nodes, allowing developers
to access and modify the content and properties of HTML elements.

DOM manipulation is a powerful technique that enables developers to dynamically update, add, or
remove elements on a web page in response to user actions, server responses, or other events. It
plays a crucial role in creating interactive and dynamic web applications. Here are some common
tasks involved in DOM manipulation:

1. **Accessing Elements:**
- You can use methods like `getElementById`, `querySelector`, `querySelectorAll`, etc., to select
specific elements on the page.

2. **Modifying Element Content:**


- Change the text content or HTML markup of elements using properties like `textContent`,
`innerHTML`, or `innerText`.

3. **Modifying Element Attributes:**


- Update attributes like `src`, `href`, `class`, `data-*`, etc., using the element's property or the
`setAttribute` method.

4. **Creating and Adding Elements:**


- Create new DOM elements using `document.createElement`, set their content and attributes, and
then append them to the page using `appendChild`, `insertBefore`, or similar methods.

5. **Removing Elements:**
- Remove elements from the DOM tree using methods like `removeChild` or `remove`.

6. **Styling Elements:**
- Change the appearance of elements by modifying their inline styles with the `style` property or
by adding/removing CSS classes.

7. **Event Handling:**
- Attach event listeners to elements using methods like `addEventListener` to respond to user
interactions, such as clicks, keypresses, etc.

8. **DOM Traversal:**
- Traverse the DOM tree using properties like `parentNode`, `childNodes`, `nextSibling`,
`previousSibling`, etc., to navigate between elements.

Here's a simple example that demonstrates DOM manipulation:

HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation Example</title>
</head>
<body>
<div id="myDiv">
<p>Hello, I am a div with an ID!</p>
</div>
<button id="changeButton">Change Content</button>
</body>
</html>
```

JavaScript:
```javascript
// Access the button and div elements
const changeButton = document.getElementById('changeButton');
const myDiv = document.getElementById('myDiv');

// Add a click event listener to the button


changeButton.addEventListener('click', function() {
// Change the content of the div
myDiv.textContent = "Content changed using DOM manipulation!";
});
```

In this example, when the "Change Content" button is clicked, the content of the `<div>` element
with the id "myDiv" is updated using DOM manipulation.

D.O.M Selection

`getElementById` and `querySelector` are both methods used in JavaScript to select elements from
the DOM, but they have some differences in terms of how they work and what they can select.

1. `getElementById`:
- As the name suggests, it is specifically used to select elements by their unique `id` attribute.
- It is supported by all major browsers and is one of the fastest ways to select an element by its id.
- It only returns a single element (or `null` if no element with the specified id is found).
- The method is available directly on the `document` object.

Example:
```javascript
const element = document.getElementById('elementId');
```

2. `querySelector`:
- It is a more flexible method that allows you to select elements using CSS selector syntax.
- You can use any valid CSS selector to target elements based on element names, classes,
attributes, etc.
- It returns the first matching element it finds or `null` if no matching element is found.
- It is supported by modern browsers (Internet Explorer 8 and later).

Example:
```javascript
const element = document.querySelector('#elementId'); // Selects by id
const element = document.querySelector('.className'); // Selects by class
const element = document.querySelector('div'); // Selects by element type
const element = document.querySelector('[data-attr="value"]'); // Selects by attribute
```

Using `querySelector`, you can achieve the same result as `getElementById`, but it also provides
much greater flexibility in selecting elements based on various criteria. However, if you want to
select an element specifically by its id, and you know the id exists and is unique, then
`getElementById` is generally more efficient and a better choice for that specific use case.

Here's an example of how you can achieve the same result using both methods:

HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>getElementById vs querySelector Example</title>
</head>
<body>
<div id="myDiv">
<p>Hello, I am a div with an ID!</p>
</div>
</body>
</html>
```

JavaScript:
```javascript
// Using getElementById
const divElementById = document.getElementById('myDiv');
divElementById.textContent = "I have been changed using getElementById!";

// Using querySelector
const divQuerySelector = document.querySelector('#myDiv');
divQuerySelector.textContent = "I have been changed using querySelector!";
```

Both methods will change the text content of the `<div>` element with the id "myDiv" to their
respective messages.

You might also like