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/>

 

 

 

posted @ 2020-02-11 13:26  jane_panyiyun  阅读(139)  评论(0编辑  收藏  举报