HTML5新增API之DOM 擴充套件

2021-09-24 08:02:08 字數 971 閱讀 1072

獲取元素

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則儲存了所有的自定義屬性的值。

假設某元素

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

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

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

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

這樣獲取node.dataset['myname']

HTML5一DOM相關的API

1.getelementsbyclassname 接受乙個引數,返回帶有指定類的所有元素的nodelist。傳入多個類名時,類名的先後順序不重要。2.classlist 每個元素都有乙個classlist屬性,它是domtokenlist的例項,以集合的形式表示元素的class屬性的值,它有如下方法...

HTML5新增內容

先附上原始碼 完成百分比 100 蘋果素有 水果之王 的美稱,它含有豐富的維生素c,能讓 細嫩 柔滑而白皙,蘋果 的做法很簡單,將蘋果去皮去核切塊後放入攪拌機攪成泥狀,乾性 的美眉在蘋果泥中加入新鮮的牛奶或蜂蜜,油性 的美眉則可加入少量蛋清,攪拌均勻後塗在臉上,敷10 15分鐘後洗淨,你會發現膚色有...

HTML5新增屬性

html5的input標籤新增了很多屬性,也是讓大家非常興奮的一件事,用簡單的乙個屬性搞定以前複雜的js驗證。input新增的這些屬性,使得html和js的分工更明確了,使用起來十分舒暢。size medium 新增屬性一 size autoconmplete autoconmplete可以賦值為 ...