Skip to content

Commit

Permalink
Merge pull request #60 from Shyam3050/master
Browse files Browse the repository at this point in the history
Added Source code to javascript intro video
  • Loading branch information
Vishal-raj-1 authored Oct 1, 2023
2 parents ce7ae26 + 6576112 commit 095e905
Show file tree
Hide file tree
Showing 2 changed files with 407 additions and 2 deletions.
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

0 comments on commit 095e905

Please sign in to comment.