---
# System prepended metadata

title: 常用語法
tags: [HyUI4.0]

---

---
type: slide
---

# 常用語法

###### tags:`HyUI4.0`

---

## createElement
JS中如果要新增一個元件可以利用此語法，但這只是單純創建，可以搭配後面的 prepend / append / insertBefore / appendChild 將該元件加入頁面中
```javascript
const newElem = document.createElement('p');
```

---

## className
獲取或設置指定元素的類屬性的值
```javascript=
// 獲取class，獲取的內容會變字串
let class = element.className;

// 設置class，若有複數class時，會取代所有class
element.className = class;
```

---

## classList
操作class的語法，單純使用可以抓取元件中的class
抓取後有以下方式可以操作
```javascript=
// 模板
let main = document.querySelector('.main')

<div class="main"></div>
```

---

### add
增加 class
```javascript=
main.classList.add('abc')

// 輸出
<div class="main abc"></div>
```

---

### remove
移除 class
```javascript=
main.classList.remove('main')

// 輸出
<div class="abc"></div>
```

---

### toggle
切換 class
```javascript=
main.classList.toggle('active)
// 如果沒有該class增加，反之移除

// 輸出
<div class="abc active"></div>
// or
<div class="abc"></div>
```

---

### replace
替換 class
```javascript=
main.classList.replace('abc','cde')
// (原本class,替換class)

// 輸出
<div class="cde"></div>
```

---

### contains
查詢 class
```javascript=
main.classList.contains('cde')

// 輸出
true / false
```

---

## style
等同JQ的.css()功能，是呈現行內樣式，有兩種寫法
第一種：一次只能寫一個css樣式，若遇到'-'(padding-top)則需改成駝峰式
第二種：可以寫複數樣式
```javascript=
// 第一種
main.style.paddingTop = `20px`

// 第二種
main.style = `display:block;color:red`
```

---

## prepend / append
功能與JQ其實很像但使用上卻跟JQ有差
```javascript=
element.prepend((Node or DOMString));
element.apppend((Node or DOMString));
```
以往使用JQ可以這樣寫，輸出時可以是一個dom元件或是字串
```javascript=
$('.parent').apppend('<p></p>');
$('.parent').apppend('String');

// 輸出
<div class="parent">
    <p></p>
    String
</div>
```

---

但如果是使用JS，輸出時都只會是字串，所以需要先將內容先指定給變數後再使用
```javascript=
const parent = document.querySelector('.parent');
parent.append('<p></p>');
parent.append('String');

// 輸出
<div class="parent">
    "<p></p>"
    "String"
</div>
```

---

範例：
```javascript=
let child = `<div class="child"></div>`;
parent.append(child);

// 輸出
<div class="parent">
    <div class="child"></div>
</div>
```

---

## insertBefore
可以將元件指定在某個元件的前面
```javascript=
element.insertBefore(newItem,existingItem);
```
範例：
```javascript=
const b = document.querySelector('.b');
const c = document.querySelector('.c');
parent.insertBefore(b, c);

// 元架構
<div class="b"></div>
<div class="parent">
    <div class="a"></div>
    <div class="c"></div>
</div>

// 輸出
<div class="parent">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>
```

---

## appendChild
功能同append但不能使用字串
```javascript=
const parent = document.querySelector('div');
const child = document.createElement('p');

// 追加元件
parent.append(child) // 正常
parent.appendChild(child) // 正常

// 追加DOMStrings
parent.append('Hello world') // 正常
parent.appendChild('Hello world') // 錯誤
```
:::warning
使用 prepend / append / insertBefore / appendChild 時，變數如果指定現有元件，會將該元件直接搬移到Element裏面
:::

---

## Attribute
在之前我們也很常會用到JQ的 .attr() 去設定或是移除資料，在JS可以這樣做

---

### setAttribute
設定 attribute
```javascript=
element.setAttribute(attributename,attributevalue)
```
範例：
```javascript=
main.setAttribute('style','color:red')

// 輸出
<div class="main" style="color:red"></div>
```

---

### getAttribute
設定 attribute
```javascript=
element.getAttribute(attributename);
```
範例：
```javascript=
main.getAttribute('style');

// 輸出
color:red
```

---

### hasAttribute
查詢 attribute
```javascript=
element.hasAttribute(attributename);
```
範例：
```javascript=
main.hasAttribute('style');

// 輸出
true
```

---

## dataset
除了Attribute以外還有另外一個設定Attribute的方式，這個方式會自動在前方加入data-的字樣，如果用駝峰寫法會自動拆成鏈型，例如：boxTitle => box-title
範例：
```javascript=
main.dataset.height = '120';

// 輸出
<div class="main" data-height="120"></div>
```
若是要讀取的話不要指定值即可，獲取的內容會變字串
```javascript=
main.dataset.height;

// 輸出
"120"
```

---

## innerHTML

與JQ的.html()相似，可以抓取內容或是寫入內容，可支援html標籤
```javascript=
<div class='abc'>def</div>

abc.innerHTML // def
abc.innerHTML = aaa //aaa
```