Skip to content

Commit b813276

Browse files
AritraC1AritraC1
committed
DOM
1 parent 2764c51 commit b813276

File tree

1 file changed

+20
-15
lines changed

1 file changed

+20
-15
lines changed

‎Notes/DOM.md

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -28,21 +28,21 @@ For example: document.getElementById("myId") gets a node, and you can change its
2828
## Accessing and Manipulating the DOM with JavaScript
2929

3030
### 1. Selecting Elements
31-
`document.getElementById("myId");`
32-
`document.querySelector(".myClass");`
33-
`document.querySelectorAll("div");` <!-- NodeList of all divs -->
31+
- `document.getElementById("myId");`
32+
- `document.querySelector(".myClass");`
33+
- `document.querySelectorAll("div");` <!-- NodeList of all divs -->
3434

3535
### 2. Changing Styles
36-
`const title = document.getElementById("title");`
37-
`title.style.backgroundColor = "blue";`
38-
`title.style.color = "white";`
39-
`title.style.padding = "12px";`
40-
`title.style.borderRadius = "15px";`
36+
- `const title = document.getElementById("title");`
37+
- `title.style.backgroundColor = "blue";`
38+
- `title.style.color = "white";`
39+
- `title.style.padding = "12px";`
40+
- `title.style.borderRadius = "15px";`
4141

4242
### 3. Changing Content
43-
`title.textContent = "DOM DOM DOM";`
44-
`title.innerHTML = "<span>DOM</span>";`
45-
`title.innerText = "DOM DOM";` <!-- Only shows visibile text -->
43+
- `title.textContent = "DOM DOM DOM";`
44+
- `title.innerHTML = "<span>DOM</span>";`
45+
- `title.innerText = "DOM DOM";` <!-- Only shows visibile text -->
4646

4747
#### Difference Between textContent, innerHTML, innerText
4848

@@ -56,12 +56,17 @@ For example: document.getElementById("myId") gets a node, and you can change its
5656
- 💡 **Note:** `innerText` is affected by CSS styles (e.g., `display: none`), while `textContent` is not.
5757

5858
### 4. Changing Attributes
59-
`title.setAttribute("class", "heading common");`
60-
`title.getAttribute("class");`
61-
`title.removeAttribute("class");`
59+
- `title.setAttribute("class", "heading common");`
60+
- `title.getAttribute("class");`
61+
- `title.removeAttribute("class");`
6262

6363
### 5. Adding/Removing Elements
64-
64+
```javascript
65+
const new = document.createElement("div");
66+
new.textContent = "I'm new!";
67+
document.body.appendChild(new);
68+
document.body.removeChild(new);
69+
```
6570

6671
### 6. Event Listeners
6772
```javascript

0 commit comments

Comments
 (0)