Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Source code to javascript intro video #60

Merged
merged 4 commits into from
Oct 1, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 87 additions & 1 deletion content/batch/learn/js/dom.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -61,4 +61,90 @@ Want to improve this page?. Raise a issue on [@github](https://github.com/Manish

</TabsContent>

</Tabs>
</Tabs>

## Notes

# JavaScript DOM Cheatsheet

### What is DOM?

The Document Object Model (DOM) is a programming interface for HTML documents. It represents the page so that programs can change the document structure, style, and content.

## DOM Methods to find HTML elements:

### Get Element by Id

Returns the element that has the ID attribute with the specified value.

```jsx
let element = document.getElementById("myElement");
```

### Get Elements By Class Name

Returns a collection of all elements in the document with the specified class name.

```jsx
let elements = document.getElementsByClassName("myClass");
```

### Get Elements By Tag Name

Returns a collection of all elements in the document with the specified tag name.

```jsx
let elements = document.getElementsByTagName("p");
```

### Query Selector All

Returns all elements that matches a specified CSS selector(s) in the document

```jsx
let elements = document.querySelectorAll(".myClass");
```

### InnerHTML

Gets or sets the HTML content within an element.

```jsx
element.innerHTML = "<p>New HTML content</p>";
```

### InnerText

Gets or sets the text content within an element.

```jsx
element.innerText = "New text content";
```

### Add Class

Adds one or more class names to an element.

```jsx
element.classList.add("newClass");
```

### Remove Class

Removes one or more class names from an element.

```jsx
element.classList.remove("oldClass");
```

### Add Event Listener

Attaches an event handler to the specified element.

```jsx
const myButton = document.getElementById("myButton");

myButton.addEventListener("click", function() {
console.log("Button clicked!");
});
```
Loading
Loading