H5C3---H5-Dom扩展

H5-Dom扩展

 

获取元素

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

 

自定义属性

在HTML5中我们可以自定义属性，其格式如下data-*=""

​

<div id="demo" data-my-name="itcast" data-age="10">
<script>
/*
  Node.dataset是以对象形式存在的，当我们为同一个DOM节点指定了多个自定义属性时，
  Node.dataset则存储了所有的自定义属性的值。
  */
var demo = document.querySelector(反馈);
//获取
//注：当我们如下格式设置时，则需要以驼峰格式才能正确获取
var name = demo.dataset['myName'];
var age = demo.dataset['age'];
//设置
demo.dataset['name'] = 'web developer';
<script/>