--- 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 ```