---
# System prepended metadata

title: dom操作 包含even
tags: [javaScript]

---

# dom操作 包含even
https://www.youtube.com/watch?v=y17RuWkWdn8

##  append appendChild (往裡面加)
append能加 string 節點
但 appendChild只能加節點
![](https://i.imgur.com/LXReHJz.png)

節點創造
document.creatElememt('div')



## textContent vs  innerText
主要在content的會把空白 間距都印出來  text只會印內容
![](https://i.imgur.com/A0hDBtS.png)

至於innerHTML 用手寫標籤替代可以比較安全
![](https://i.imgur.com/4YCdwVg.png)

## 修改屬性

getAttribute 但其實能直接 用 .id .title 之類去取
![](https://i.imgur.com/REnDiWt.png)

## data-
除了基本的操作
![](https://i.imgur.com/KEfD6eJ.png)

能在js加 依照駝峰去轉換

## even
even是你滑鼠點擊 的xy ...跟你滑鼠在屏幕上的位置有關係

## target

冒泡 
![](https://i.imgur.com/vcDIZFZ.png)
會從點的往父曾找

如果要看捕捉
 ![](https://i.imgur.com/lHDA8Ml.png)
 在監聽事件第二參數 capture 預設false
 
 
### 在父曾下監聽事件 好處 新加入的也有監聽事件

重點 判斷div span 用matches()括號內是个css选择器字符串.
![](https://i.imgur.com/lJbT35a.png)





https://www.youtube.com/watch?v=XF1_MlZ5l6M



###### tags: `javaScript`