owned this note
owned this note
Published
Linked with GitHub
# JavaScript-DOM
## DOM選擇器
| 標題 | 語法 | 備註 |
| ------ | ----------- | ----------- |
| 選擇id | ==`document.getElementById('id')`== |
| 選擇標籤 | ==`document.getElementsByTagName('TagName')`== |
| 選擇第一個符合條件的 | 標籤:==`document.getElementsByClassName('className')`== ID:==`document.querySelector('#id')`== class:==`document.querySelector('.TagName')`==|
| 選擇全部符合條件的 | 標籤:==`document.getElementsByClassName('className')`== class:==`document.querySelectorAll('.TagName')`==|回傳值為一個陣列|
---
## DOM事件
DOM0級與DOM2級差別:Dom2 級則會依序執行,Dom0 級綁定相同事件會把前面的覆寫
| 標題 | DOM 2語法 | DOM 0 語法 |備註|
| ------ | ----------- | ----------- | ----------- |
| DOMContentLoaded | ==`document.addEventListener('DOMContentLoaded', function() {...})`== ||DOMContentLoaded事件是當document被完整的讀取跟解析後就會被觸發,不會等待stylesheets,圖片和subframes 完成讀取|
| 滑鼠點擊(click) | ==`obj.addEventListener("click”, function() {...} )`== |==`obj.onclick = function() {...}`== |
| 滑鼠連續點擊觸發 | ==`obj.addEventListener("dbclick”, function(){...})`== |==`obj.ondbclick = function() {...}`== |
| 按下滑鼠按鈕時觸發 | ==`obj.addEventListener("mousedown”, function(){...})`== |==`obj.onmousedown = function() {...}`== |
| 釋放滑鼠按鈕時觸發 | ==`obj.addEventListener("mouseup”, function(){...})`== |==`obj.onmouseup = function() {…}`== |
| 滑鼠游標移動的時候觸發 | ==`obj.addEventListener("mousemove”, function(){...})`== |==`obj.onmousemove = function() {...}`== |
| 滑鼠游標移入時觸發 | 只有在滑鼠指標穿過被選元素時,才會觸發mouseenter事件:<br>==`obj.addEventListener("mouseenter”, function() {...})`== <br>不論滑鼠指標穿過被選元素或其子元素,都會觸發 mouseover事件:<br>==`obj.addEventListener("mouseenter”, function() {...})`== | 只有在滑鼠指標穿過被選元素時,才會觸發mouseenter事件:<br>==`obj.onmouseenter = (function() {...})`== <br>不論滑鼠指標穿過被選元素或其子元素,都會觸發 mouseover事件:<br>==`obj.onmouseenter = (function() {...})`== |
| 元素內容改變 | ==`obj.addEventListener("change", function() {...})`== |==`obj.onchange = (function() {...})`== |
| 按下鍵盤時觸發 | ==`obj.addEventListener('keydown', function() {...})`== |==`obj.onkeydown = (function() {...})`== |
| 放開鍵盤時觸發 | ==`obj.addEventListener('keyup', function() {...})`== |==`obj.onkeyup = (function() {...})`== |
| 阻止默認事件 | ==`obj.addEventListener('click',function(event){event.preventDefault();})`== ||如 <a> 的連結功能|
| 停止事件冒泡 | ==`obj.addEvenListenter('click',function(e){e.stopPropagation()})`== |
| 動態事件綁定 | ==`document.addEventListener('click',function(e){if(e.target.classList.contains('btn')) {......}})`== ||e.target 指的是點擊到的那個元素 <br> classList.contains('btn')判斷點擊的那個元素,有沒有 btn 這個 class|
| 當元素獲得焦點 | ==`obj.addEventListener('focus', function() {...})`== |==`obj.onfocus = (function() {...})`==|
| 當元素失去焦點 | ==`obj.addEventListener('blur', function(){...})`== |==`obj.onblur = (function() {...})`==|
| DOM載入完成後 | ==`obj.addEventListener("DOMContentLoaded", function(){...})`== |
| 網頁載入完成 | ==`window.addEventListener('load', function() {...})`== | ==`window.onload = (function() {...})`== |
| 當可視螢幕大小改變時 | ==`window.addEventListener('resize', function() {...})`== |
| 當ipnut的值發生變更時 | ==`obj.addEventListener("input", function(){...})`== |
## DOM-Scroll事件
| 標題 | 語法 | 備註 |
| ------ | ----------- | ----------- |
| Scroll事件 | ==`window.addEventListener('scroll', function () {})`== |
| 取得元素的寬高以及相對於視窗可視範圍的座標位置 | ==`getBoundingClientRect()`== |
| 頁面的可視高度距離 |==`window.innerHeight`==|相當於css屬性的height:100vh;<br><br> innerHeight * 2 相當於相當於css屬性的 height:100vh;|
| 使介面滾動到指定元素的最標位置|==`obj.scrollTo(x-coord, y-coord)`== <br><br> ==`obj.scrollTo(options)`==|
| 與最上方的距離|==`obj.scrollY`==|
| 與最左方的距離|==`obj.scrollX`==|
|元素 borderBox的寬|==`obj.offsetWidth`==|包含 padding、border|
|元素 borderBox的高|==`obj.offsetHeight`==|包含 padding、border|
|元素 paddingBox的寬|==`obj.clientWidth`==|包含 padding、border|
|元素 paddingBox的高|==`obj.clientHeight`==|包含 padding、border|
|元素的寬|==`obj.scrollWidth`==|包含 padding及外溢內容的寬/高,不包含 border|
|元素的高|==`obj.scrollHeight`==|包含 padding及外溢內容的寬/高,不包含 border|
|與父層的距離|==`obj.offsetTop`==|父層的 position 需要設定 static 以外的屬性|
|滑鼠與頁面的距離|document.addEventListener('mouseover', function (e) { <br> console.log(e.pageX);<br> console.log(e.pageY); <br> })|e.pageX:滑鼠距離頁面最左側的距離。<br><br> e.pageY:滑鼠距離頁面最上方的距離。|
---
## DOM建立與移除元素
| 標題 | 語法 | 備註 |
| ------ | ----------- | ----------- |
| 建立一個新的HTML元素 | ==`obj.document.createElement('TagName')`== |
| 建立一個新的文字元素 | ==`obj.document.createTextNode("text")`== |
| 新增一個新的子元素到現有子元素的最後| ==`現有子元素.appendChild(新的子元素)`==|只接受Node物件,返回附加的Node物件|
| 新增一個新的子元素到現有子元素的最後| ==`現有子元素.append(新的子元素)`==|接受Node物件和DOMString,沒有返回值|
| 新增一個新的子元素到現有子元素的最前| ==`現有子元素.prepend(新的子元素)`==|
| 新增一個元素節點| ==`obj.insertAdjacentHTML('positon','text')`==|positon是一個字串,表示相對於元素的位置,接受以下四個值:<br>'beforebegin':在元素之前。<br>'afterbegin':在元素的第一個子元素之前。<br>'beforeend':在元素的最後一個子元素之後。<br>'afterend':在元素之後。<br><br>text<br>該參數是個方法,解析為 HTML 或 XML 的字串|
| 移除指定元素| ==`obj.remove()`==|
---
## DOM修改與設置屬性
| 標題 | 語法 | 備註 |
| ------ | ----------- | ----------- |
| 取得與設置元素文字內容| 方法ㄧ:<br>==`obj.textContent`== <br><br>方法二:<br>==`obj.innerText`== <br><br>方法三:<br>==`obj.innerHTML`== <br><br>方法四:<br>==`obj.outerHTML`==|textContent<br>會保留多餘的空白 <br><br>innerText<br>會過濾掉多餘的空白<br><br>innerHTML<br>會連html標籤也取得<br><br>outerHTML <br>與innerHTML相同,但元素本身的html也會被取得
|回傳該元素屬性的屬性值| ==`obj.getAttribute('屬性名')`== |回傳該元素的屬性。 如果該屬性不存在,其回傳值會是 null 或 ""(空字串)<br><br>data的值使用此DOM取得
| 設置該元素屬性的屬性值| ==`obj.setAttribute('css屬性','屬性值')`== |
| 移除該元素屬性| ==`obj.removeAttribute('屬性名')`==|
| 設置style得值| ==`obj.style.setProperty('css屬性', 屬性值,'權重')`== <br><br>==`obj.style.css屬性 = css屬性值`== |與setAttribute 相比多了一個權重參數,可以設定important 設定CSS屬性的優先級,如果沒有指定則視為空字串
| 增加一個指定名稱和值的新屬性| ==`obj.setAttribute('css屬性','屬性值')`==|
| 取得與設置src| ==`obj.src`==|
| 取得與設置alt| ==`obj.alt`==|
| 取得與設置title| ==`obj.title`==|
| 取得元素寬高| ==`obj.offsetWidth;obj.offsetHeight`== <br><br><br>==`obj.clientWidth;obj.clientHeight`== <br><br><br>==`obj.scrollWidth;obj.scrollHeight`== |元素本身的寬度/高度,包含邊界、捲軸及padding<br><br>元素所包含的子元素的寬度/高度,包含padding,但不包含邊界及捲軸<br><br>元素所包含的子元素的完整框度和高度,包含了超出捲軸外的部分的寬度和高度。
| 取得相對距離| ==`obj.offsetLeft;obj.offsetTop`== <br><br><br>==`obj.clientLeft;obj.clientTop`== <br><br><br>==`obj.scrollLeft;obj.scrollTop`== |元素本身相對於母元素的水平/垂直距離<br><br>元素本身內外的水平/垂直距離,也就是左邊/上邊的邊界寬度。(包含捲軸寬度)<br><br>內容被捲動的距離,也就是內容頂端和捲軸頂端的相對距離
| 區塊內的內容高度| ==`obj.scrollHeight`==|取得的是內容高度,不是區塊高度|
| 取得className| ==`obj.className`==|
| 取得class的值| ==`obj.classList`==|
| class的值-沒有就添加,有就移除| ==`obj.classList.toggle('')`==|
| 判斷class Name內是否存在指定的值| ==`obj.classList.contains('')`==|回傳值為布林|
| 修改className| ==`obj.className=""`==|
| 增加className| ==`obj.classList.add("")`==|
| 刪除className| ==`obj.classList.remove("")`==|
---
## DOM節點查找
| 標題 | 語法 | 備註 |
| ------ | ----------- | ----------- |
| 往父層找指定元素| ==`obj.closest('')`== |
| 找到最近的父元素| ==`obj.parentElement`== |
| 往內層找| ==`obj.querySelector()`== <br><br> ==`obj.querySelectorAll()`==|不只找下一層,而是此元素的所有子層<br><br> querySelectorAll()回傳的值會是個 陣列
| 往前一個兄弟元素| ==`obj.previousElementSibling`== |
| 往後一個兄弟元素| ==`obj.nextElementSibling`== |
| 找到第一層的子元素| ==`obj.children`== |回傳的會是 HTMLCollection|
| 找到第一個子元素| ==`obj.firstElementChild`== |
| 找到最後一個子元素| ==`obj.lastElementChild`== |
---
## 表單取得
| 標題 | obj | 語法 | 備註 |
| ----| --- | --- | --- |
| 資料取得|一般文字欄位:input<br><br>多行文字欄位:textarea | ==`obj.value`==
||下拉式選單| ==`obj.value`== |obj為select<br><br>取得的值是option的value
||單選框 | ==`obj.value`==|radio的name相同時,選取時需選取:check<br>取得的值才會是checked的value<br><br>EX:==`document.querySelector("input[name=food_type]:checked");`==
||複選核取方塊 | ==`obj.value`==|radio的name相同時,選取時需選取:check<br>取得的值才會是checked的value<br><br>EX:==`document.querySelectorAll('.checkbox:checked');`==
| 設定資料|一般文字欄位:input| ==`obj.value='...'`==
||多行文字欄位:textarea| ==`obj.innerHTML='...'`==|如果要斷行,要用 ==`\n`==。
||下拉式選單| ==`obj.value = '2'`== |value的值為要選取的那個選項的value|
|判斷有無勾選|radio單選框的選取<br><br>複選核取方塊| ==`obj.checked`== |有選取回傳值為 true,反之為 false|
|設定勾選或不勾選|radio單選框的選取<br><br>複選核取方塊| 勾選:<br>==`obj.checked = true`== <br><br>不勾選:<br>==`obj.checked = false`== |
###### 持續更新中!
###### 以上筆記如有錯誤,懇請留言指正,感謝!