HTML5新增API之DOM 擴充套件

itwangchen發表於2019-03-22
HTMLAPI套件



獲取元素

1、document.getElementsByClassName ('class') 通過類名獲取元素，以偽陣列形式存在。
2、document.querySelector('selector') 通過CSS選擇器獲取元素，符合匹配條件的第1個元素。
3、document.querySelectorAll('selector') 通過CSS選擇器獲取元素，以偽陣列形式存在。複製程式碼

類名操作

1、Node.classList.add('class') 新增class
2、Node.classList.remove('class') 移除class
3、Node.classList.toggle('class') 切換class，有則移除，無則新增
4、Node.classList.contains('class') 檢測是否存在class複製程式碼

Node指一個有效的DOM節點，是一個通稱。

自定義屬性

在HTML5中我們可以自定義屬性，其格式如下data-*=""，例如

data-info="我是自定義屬性"複製程式碼

通過Node.dataset['info'] 我們便可以獲取到自定義的屬性值。

Node.dataset是以物件形式存在的，當我們為同一個DOM節點指定了多個自定義屬性時，Node.dataset則儲存了所有的自定義屬性的值。

假設某元素 <div id="demo" data-name="itcast" data-age="10">

var demo = document.querySelector('#demo');

1、讀取 demo.dataset['name'] 或者 demo.dataset['age']

2、設定demo.dataset['name'] = 'web developer'

注：當我們如下格式設定時，則需要以駝峰格式才能正確獲取

<div data-my-name="itcast"> 這樣獲取Node.dataset['myName']


相關文章