h5新增加的DOM操作

Contents

1. 1. 新增加的DOM操作
   1. 1.1. 获取元素：
   2. 1.2. 类名操作：
   3. 1.3. 自定义属性：（这个的思想很重要）

新增加的DOM操作

获取元素：

code block

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节点，是一个通称。
//clss是没有点的。

自定义属性：（这个的思想很重要）

在HTML5中我们可以自定义属性，

• 其格式如下data-*=""，例如data-info=“我是自定义属性”
• 通过Node.dataset['info'] 我们便可以获取到自定义的属性值。
• Node.dataset是以对象形式存在的， 当我们为同一个DOM节点指定了多个自定义属性时，Node.dataset则存储了所有的自定义属性的值。

假设某元素:
<div id="demo" data-name="itcast" data-age="10">
var demo = document.querySelector('#demo');

• 读取 demo.dataset['name']或者 demo.dataset['age']
• 设置demo.dataset['name'] = 'web developer'
  注：当我们如下格式设置时，则需要以驼峰格式才能正确获取
  <div data-my-name="itcast"> 这样获取Node.dataset['myName']。