Browser

Table of Content

DOM Manipulation

The Document Object Model (DOM) is a representation of an HTML document that JavaScript can manipulate dynamically. Using JavaScript, developers can access, modify, and update HTML elements and styles in real time.

This Privacy Policy describes how Alevio ("we,"

"our," or "us"), founded and led by Felix Danyluk (CEO and Founder), collects, uses, and discloses your information when you use our application, website, and services (collectively, the "Service").

Wichtig: Alevio ist als privacy-first Anwendung konzipiert. Alle deine persönlichen Daten werden lokal auf deinem Gerät gespeichert und nicht an unsere Server übertragen, es sei denn, du aktivierst explizit Cloud-Funktionen.

1. Information We Collect

Alevio operates primarily as a local application.

The information stored includes:

• Personal information: name and preferences (stored locally only).

• Usage data: daily responses and insights (stored locally only).

• Device information: app preferences and settings (stored locally only).

• Al Chat data: when using Al features, messages are sent to OpenAl for processing.

2. How We Use Your Information

We use the information we collect to:

• Provide, maintain, and improve our Service.

• Personalize your experience.

• Communicate with you about our Service.

• Monitor and analyze trends, usage, and activities.

3. Sharing Your Information

We may share your information with:

• Service providers who perform services on our behalf.

• Business partners with whom we jointly offer products or services.

• Law enforcement or other third parties when required by law.

4. Data Security

We implement appropriate technical and organizational measures to protect the security of your personal information. However, please note that no method of transmission over the note that no method of transmission over the Internet or method of electronic storage is 100% secure.

5. Your Choices

You can access, update, or delete your account information at any time by logging into your account settings. You may also contact us directly to request access to, correction of, or deletion of any personal information that you have provided to us.

6. Children's Privacy

Our Service is not intended for children under the age of 13. We do not knowingly collect personal information from children under 13. If you are a parent or guardian and you are aware that your child has provided us with personal information, please contact us.

7. Changes to This Privacy Policy

We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page.

8. Company Information

Alevio is founded and led by Felix Danyluk, CEO and Founder. Our commitment to privacy and data protection is a core value of our leadership team.

9. Contact Us

If you have any questions about this Privacy Policy, please contact us at privacy.alevio@gmail.com

Accessing DOM Elements

JavaScript provides several methods to select elements from the DOM.

Using `getElementById` (Select by ID)

Returns a single element matching the specified id.

let heading = document.getElementById("main-title");
console.log(heading.textContent);

Using `getElementsByClassName` (Select by Class)

Returns a collection (HTMLCollection) of elements that match the class name.

let items = document.getElementsByClassName("list-item");
console.log(items[0].textContent);

Using `getElementsByTagName` (Select by Tag)

Returns a collection of elements matching the tag name.

let paragraphs = document.getElementsByTagName("p");
console.log(paragraphs.length);

Using `querySelector` (Select First Match)

Returns the first matching element based on a CSS selector.

let firstItem = document.querySelector(".list-item");
console.log(firstItem.textContent);

Using `querySelectorAll` (Select All Matches)

Returns a NodeList of elements that match a CSS selector.

let allItems = document.querySelectorAll(".list-item");
allItems.forEach(item => console.log(item.textContent));

Modifying DOM Elements

Changing Text Content

The textContent and innerHTML properties allow updating element content.

let title = document.getElementById("main-title");
title.textContent = "Updated Title";

innerHTML allows inserting HTML inside an element.

let container = document.getElementById("content");
container.innerHTML = "<p>New paragraph added!</p>";

Changing Attributes

The setAttribute and getAttribute methods modify element attributes.

let link = document.querySelector("a");
link.setAttribute("href", "https://www.example.com");
console.log(link.getAttribute("href"));

Removing an attribute:

<script>link.removeAttribute("target");</script>

Modifying Styles

The style property allows modifying CSS properties directly.

let box = document.getElementById("box");
box.style.backgroundColor = "blue";
box.style.color = "white";
box.style.padding = "10px";

Adding or removing a CSS class:

box.classList.add("highlight");
box.classList.remove("highlight");

Creating and Removing Elements

Creating New Elements

Use document.createElement() to generate new HTML elements dynamically.

let newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
document.body.appendChild(newParagraph);

Removing Elements

Use remove() to delete an element.

let unwantedElement = document.getElementById("old-item");
unwantedElement.remove();

Removing a child element:

let parent = document.getElementById("list");
let child = document.getElementById("list-item");
parent.removeChild(child);

Handling Events in JavaScript

Adding Event Listeners

The addEventListener() method attaches event handlers to elements.

let button = document.getElementById("btn");
button.addEventListener("click", () => {
  alert("Button clicked!");
});

Common Event Types

click – When an element is clicked.
mouseover – When the mouse hovers over an element.
keydown – When a key is pressed.
submit – When a form is submitted.

Example:

let inputField = document.getElementById("input-box");
inputField.addEventListener("keydown", event => {
  console.log("Key pressed:", event.key);
});

Removing Event Listeners

Use removeEventListener() to detach event handlers.

function sayHello() {
  console.log("Hello!");
}
  
button.addEventListener("click", sayHello);
button.removeEventListener("click", sayHello);

Event Delegation

Instead of adding an event listener to multiple elements, use event delegation on a parent element.

document.getElementById("list").addEventListener("click", event => {
  if (event.target.tagName === "LI") {
    console.log("Item clicked:", event.target.textContent);
  }
});

Conclusion

DOM manipulation is essential for dynamic web applications. This section covered selecting, modifying, and interacting with elements. The next section will focus on event handling in depth, covering advanced techniques and best practices.