# DOM - note
###### tags: `DOM`
## Day-01 : 2020.11.26
### (一) . Element
1. 定義 : 所有的DOM物件都是由這個ctor建構出來了。
- DOM : html映射到js的物件系統。
- Element function : 建構這些DOM物件的ctor。
2. 屬性 ：
- ```Element.atrribute``` : 只讀，關於這個元素的所有屬性。
- ```Element.classname``` :表示這個元素的class，為字串。
- ```Element.id``` : 表示這個元素的id，為字串。
- ```Element.tagname``` : 表示這個元素的tag。
3. 方法 ：
- ```Element.getAtrribute('atrribute name') ``` : 回傳特定屬性字串。
- ```Element.addEventListener('event name',function)``` : 增加觸發事件。

### (二) . DOM設定CSS注意 ：
- 用```Element.style.properity```設定，初值不是```class```
- 一開始給定的class屬性是在指定class內的。
- 用```style.properity```改動的為tag的line style。

<style>
#myblock{
   color:red;
}
</style>
<div id="myblock">
    MyBlock
</div>

let block=document.getElementById('myblock');
console.log(block.style.color) // 空字串
// 因為style屬性是inline style ，改變的不是id屬性。
block.style.color='red';  //這個時候，block變成有inline style。