---
# System prepended metadata

title: Javascript DOM

---

# Javascript DOM

### Video
- [JS DOM](https://youtu.be/t5HqIaobRT0)

### Warm up a little bit

```javascript
document.getElementById(“id”);
```

```javascript
document.getElementsByClassName(“class”);
```

```javascript
document.getElementsByTagName(“tag”);
```

```javascript
document.querySelectorAll(“”);
```
- `tag` `p > child` `p.class` `p#id`
<hr/>

### Some useful object Collection
```javascript
document.forms[index]
```
```javascript
document.forms[“id”]
```
```javascript
document.forms[“id”].elements.id.value
```
<hr/>

### Changing the content of HTML
```javascript
document.getElementById(“id”).innerHTML = “NEW STUFF”;
```
```javascript
document.getElementsByTagName(“img”)[index].src = “./123.jpg”;
```
<hr/>

### Changing the style of HTML
```javascript
document.getElementById(“id”).style.property = NewStyle;
```
```javascript
document.getElementsByTagName(“p”).style.color = red;
```
```javascript
document.getElementById(“id”).style.visibility = “hidden” / “visible”
```
<hr/>

### Cooperate with Event

- `onclick=”function()”`
- `onchange`
- `onmouseover`
- `onmouseout`
- Quick Review about CSS

<hr/>

### Review: The use of this in function
<hr/>

### Small Exercise
<hr/>

### Event Listener
```javascript
element.addEventListener(“click”, function(){}, useCapture)
```

- The difference between Capture and bubble
	- Capture: parent -> child
	- Bubble: child -> parent

### What is Node
![](https://i.imgur.com/SmFILig.png)


### Creating new node
```javascript=
const para = document.createElement(“p”);
const txt = document.createTextNode(“this is new node”);
para.appendChild(txt);
```
