1. 程式人生 > >JavaScript 之 dom擴展

JavaScript 之 dom擴展

code get java www 實現 dom -- demo rip

獲取元素

document.getElementsByClassName (‘class‘); 
//通過類名獲取元素,以偽數組形式存在。

document.querySelector(‘selector‘);
//通過CSS選擇器獲取元素,符合匹配條件的第1個元素。

document.querySelectorAll(‘selector‘); 
//通過CSS選擇器獲取元素,以偽數組形式存在。

類名操作

Node.classList.add(‘class‘); 
//添加class

Node.classList.remove(‘class‘); 
//移除class

Node.classList.toggle(
‘class‘); //切換class,有則移除,無則添加 Node.classList.contains(‘class‘); //檢測是否存在class

自定義屬性

<div id="demo" data-my-name="itcast" data-age="10">
<script>
/*
  Node.dataset是以對象形式存在的,當我們為同一個DOM節點指定了多個自定義屬性時,
  Node.dataset則存儲了所有的自定義屬性的值。
  */
var demo = document.querySelector(反饋);
//獲取
//註:當我們如下格式設置時,則需要以駝峰格式才能正確獲取
<!--10. dom上的屬性的定義 不支持大寫 寫了也轉換成小寫--> var name = demo.dataset[‘myName‘]; var age = demo.dataset[‘age‘]; //設置 demo.dataset[‘name‘] = ‘web developer‘; <script/>

小栗子:

使用classList和dataset實現tab切換

JavaScript 之 dom擴展