H5新增API

zhaoqing發表於2019-02-16
H5API

H5新增API

選擇器

querySelector()和querySelectorAll()，引數都是css選擇器，前者返回符合條件的第一個匹配的元素，如果沒有則返回Null，後者返回符合篩選條件的所有元素集合，如果沒有符合篩選條件的則返回空陣列。

getElementsByClassName()返回一個類似陣列的物件，包含了所有指定 class 名稱的子元素。當呼叫發生在document物件上時, 整個DOM都會被搜尋, 包含根節點，也可以在任意元素上呼叫。

document.querySelector(`div`);     //選擇第一個div
document.body.querySelector(`p`)[0];   //body下第一個p標籤

document.getElementsByClassName(`red test`);
//獲取所有 class 同時包括 `red` 和 `test` 的元素

classList屬性

  • length: 返回class數量。
  • add(class1, class2, …):將給定的字串值新增到列表中。如果值已經存在，就不新增了。
  • contains(class):表示列表中是否存在給定的value值，如果存在則返回true，不存在則返回false。
  • remove(class1, class2, …):移除元素中一個或多個類名，移除不存在的類名不會報錯。
  • item(index):返回指定索引值的類名，index為數字(從0開始)，索引不在範圍內返回null，不為數字會被轉成數字型別再取整數部分，若轉換失敗返回第一個類名。
  • toggle(value,true || false):將值為value的class在新增和移除之間切換。

classList 屬性返回的是一個 DOMTokenList 物件。此屬性不相容IE10以下版本。

Object.prototype.toString.call(node.classList);   
//`[object DOMTokenList]`

相對應 className 屬性，可以設定或返回元素的 class 。返回的是字串型別，設定會把原來的 class 值完全覆蓋。語法：node.className = className。

<div class=`wrap box`></div>

let oDiv = document.querySelector(`div`);
console.log(oDiv.className);   //`wrap box`
oDiv.className = `class1`;
console.log(oDiv.className);   //`class1`

data屬性

新的HTML5標準允許在普通的元素標籤裡，嵌入類似data-*的屬性，來實現一些簡單資料的存取。它的數量不受限制，並且也能由js動態修改，也支援CSS選擇器。

用getAttribute、setAttribute存取dataset。

<div data-id=`10` data-name=`box`></div>
<script
    node.getAttribute(`data-id`);
    node.setAttribute(`data-name`,`test`);
</script>

通過.dataset API 存取dataset。它返回一個物件，可以通過node.dataset.name的形式新增或修改。

node.dataset.name = `test`;

內容可編輯

加有contenteditable屬性的元素，點選可以編輯。此屬性為布林屬性。

<div contenteditable=true>
    <p>i am editable</p>
    <p>i am editable too</p>
</div>

本地儲存

localStorage sessionStorage。Javascript本地儲存小結。

scrollIntoView()

Element.scrollIntoView() 方法讓當前的元素滾動到瀏覽器視窗的可視區域內。scrollIntoView MDN

引數為一個布林值，為true，元素的頂端將和其所在滾動區的可視區域的頂端對齊；如果為false，元素的底端將和其所在滾動區的可視區域的底端對齊。

element.scrollIntoView(); // 等同於element.scrollIntoView(true)

相關文章