获取元素
- 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 切换 https://www.cnblogs.com/houfee/p/9352090.html
来源: http://www.bubuko.com/infodetail-2961888.html