H5新增API

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)