H5新增API

2023年5月12日 131次阅读 来源: zhaoqing

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)
    原文作者：zhaoqing
    原文地址: https://segmentfault.com/a/1190000014746493
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞