DOM manipulation refers to the process of modifying the structure, content, or style of an HTML or XML document using a programming language, typically JavaScript. The Document Object Model (DOM) is a programming interface for HTML and XML documents that represents the structure of a document as a tree of objects, with each object representing an element in the document.
Here are some examples of DOM manipulation using JavaScript:
- Adding, deleting, or modifying elements in the document
- Changing the text or attribute values of elements
- Changing the styles of elements using CSS
- Handling events such as clicks, hover, or form submissions
DOM manipulation is an important part of web development, as it allows you to dynamically update the content and layout of a webpage based on user input or other events. It is typically used in combination with other technologies such as HTML, CSS, and JavaScript libraries or frameworks to create interactive and responsive websites and applications.
There are a lot of functions and properties realted to dom manipulation,but these are some of the more common ones.
<!-- HTML document -->
<p id="my-paragraph">Hello, World!</p>
<script>
// Retrieve the element with the "my-paragraph" ID
const paragraph = document.getElementById('my-paragraph');
// Output the text of the element
console.log(paragraph.innerText); // Output: "Hello, World!"
</script>
<!-- HTML document -->
<p>Hello, World!</p>
<p>Hello, DOM!</p>
<script>
// Select the first `p` element
const paragraph = document.querySelector('p');
// Output the text of the element
console.log(paragraph.innerText); // Output: "Hello, World!"
</script>
<!-- HTML document -->
<p>Hello, World!</p>
<p>Hello, DOM!</p>
<script>
// Select all `p` elements
const paragraphs = document.querySelectorAll('p');
// Output the text of the elements
paragraphs.forEach(paragraph => console.log(paragraph.innerText));
// Output: "Hello, World!", "Hello, DOM!"
</script>
<!-- HTML document -->
<p>Hello, World!</p>
<p>Hello, DOM!</p>
<script>
// Select all `p` elements
const paragraphs = document.getElementsByTagName('p');
// Output the text of the elements
for (let i = 0; i < paragraphs.length; i++) {
console.log(paragraphs[i].innerText);
}
// Output: "Hello, World!", "Hello, DOM!"
</script>
<!-- HTML document -->
<p class="error">An error occurred</p>
<div class="error">Something went wrong</div>
<script>
// Select all elements with the "error" class
const errors = document.getElementsByClassName('error');
// Output the text of the elements
for (let i = 0; i < errors.length; i++) {
console.log(errors[i].innerText);
}
// Output: "An error occurred", "Something went wrong"
</script>
<!-- HTML document -->
<a id="my-link">Click here</a>
<script>
// Retrieve the element
const link = document.getElementById('my-link');
// Set the `href` attribute
link.setAttribute('href', 'https://www.example.com');
</script>
<!-- HTML document -->
<p>Hello, <strong>World</strong>!</p>
<script>
// Retrieve the element
const paragraph = document.querySelector('p');
// Get the text content of the element
const text = paragraph.textContent;
// Output the text content
console.log(text); // Output: "Hello, World!"
</script>
<!-- HTML document -->
<a id="my-link" href="https://www.example.com">Click here</a>
<script>
// Retrieve the element
const link = document.getElementById('my-link');
// Get the value of the `href` attribute
const href = link.getAttribute('href');
// Output the value of the attribute
console.log(href); // Output: "https://www.example.com"
</script>
<!-- HTML document -->
<div id="my-div">This is a div</div>
<script>
// Retrieve the element
const div = document.getElementById('my-div');
// Add the "error" class to the element
div.classList.add('error');
</script>
<!-- HTML document -->
<div id="my-div"></div>
<script>
// Create a new `p` element
const paragraph = document.createElement('p');
// Set the text content of the element
paragraph.textContent = 'Hello, World!';
// Append the element to the document
document.getElementById('my-div').appendChild(paragraph);
</script>
// Result
<div id="my-div">
<p>Hello, World!</p>
</div>
// Result
3. document.createDocumentFragment(): A document fragment is a lightweight, in-memory representation of a part of a document. It can be used to build up a document structure in memory, and then insert the entire structure into the document at once, rather than inserting each element individually. This can be more efficient and performant than repeatedly inserting elements into the document one at a time.
4. element.appendChild(element): Appends an element to the end of the contents of another element
This is a paragraph.
// Result
This is a paragraph.
6. element.prepend(node1): Prepends an element to the beginning of the contents of another element
This is a paragraph.
// Result
This is a paragraph.
7. element.remove(): Removes the element from the DOM
This is a paragraph.
### Size and Scrolling
1. window.getComputedStyle(element): a function of the window object in JavaScript that is used to get the computed values of an element's style properties. It takes an element and an optional pseudo-element as arguments, and returns a CSSStyleDeclaration object that contains the computed values of the element's style properties.
2. element.clientHeight: used to get the height of an element, including its padding but not its margins, borders, or scrollbars. It is a read-only property and is measured in pixels.
3. element.offsetHeight: used to get the height of an element, including its padding, borders, and scrollbars, but not its margins. It is a read-only property and is measured in pixels.
4. element.scrollHeight: used to get the total height of an element's content, including its padding, but not its margins, borders, or scrollbars. It is a read-only property and is measured in pixels.
This is a paragraph.
This is another paragraph.
In this example, the div element is retrieved from the document using document.getElementById(), and the scrollHeight property is used to get the total height of the element's content. The scrollHeight includes the element's top and bottom padding of 20px and the combined height of the two p elements, which is 48px each, for a total of 96px. The output is the value 128, which represents the total height of the element's content.
The element.scrollHeight property is useful for getting the total height of an element's content when the element has scrollbars, or for determining if an element's content overflows its boundaries. It can be used in combination with other size properties, such as element.clientHeight, element.offsetHeight, and element.scrollTop, to manipulate the scroll position of an element.
5. element.offsetTop: used to get the distance of the element from the top of the offset parent element. The offset parent is the nearest ancestor element that has a position other than static. The offsetTop property is a read-only property and is measured in pixels.
6. element.scrollIntoView(): used to scroll the element into view within its nearest scrollable ancestor. It takes an optional argument that specifies how the element should be aligned within the viewport.
7. element.scrollTo(): used to scroll the document to a specified position. It takes two arguments: the x-coordinate and the y-coordinate of the position to scroll to. The coordinates are measured in pixels and are relative to the top-left corner of the document.
```