JavaScript-primer

DOM Manipulation

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.

Getting Elements

  1. document.getElementById(id): Gets a single element based on its attribute
<!-- 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>


  1. document.querySelector(selector): Gets a single element based on a selector. If multiple elements match the selector, return the first one.
<!-- 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>


  1. document.querySelectorAll(selector): Gets all elements matching a selector as a NodeList
<!-- 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>
 
  1. document.getElementsByTagName(tagName): Gets all elements with a specific tag as an HTML Collection.
<!-- 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>


  1. document.getElementsByClassName(className): Gets all elements with a specific class as an HTML collection.
<!-- 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>

Setting Attributes

  1. element.setAttribute(‘attribute’, ‘value’): Sets an HTML attribute to a specific value
<!-- 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>


  1. element.textContent: Used to get a text content of an element.
<!-- 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>

  1. element.getAttribute: used to get or set the value of an attribute on an element. It takes the name of the attribute as an argument, and returns the value of the attribute if it exists, or null if it does not.
<!-- 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>

  1. element.classList: used to manipulate the element’s class names. It is a DOMTokenList object that provides methods for adding, removing, and checking for the presence of class names on an element.
<!-- 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>


Adding and Removing Elements

  1. document.createElement(tagName): Creates a new HTML element. It takes the tag name of the element to be created as an argument, and returns a new element with that tag name.
<!-- 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>


  1. document.createTextNode(text): Creates a text node as an alternative to settting textContent. It takes a string of text as an argument, and returns a new text node with that text. ```

// Result

Hello, World!
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.

Hello, World!

6. element.prepend(node1): Prepends an element to the beginning of the contents of another element 

This is a paragraph.

// Result

Hello, World!

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.

This is a div

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.
This is a div
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.

This is a div
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.

This is a div
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.

This is a div
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.


This is a div

```