WebApis-获取,修改,绑定事件元素-Wenn's Publish

获取文档标签

1.单标签获取document.querySelector('#、.、tagName'),获取 id、类名或标签名所对应的标签；如果文档中有多个相同，仅获取文档第一个

2.多标签获取document.querySelectorAll('#、.、tagName'),获取 id、类名或标签名所对应的所有标签，以伪数组的形式展现

获取文档内容

innerText 只可以操作文本，并不可以设置标签;innerHTML可以识别标签内容，可以操作文档进行修改标签；

获取文档属性

变量名.属性名即是获取文档属性的形式

const 变量名 = document.querySelector('tagName');
变量名.color = '属性值';

修改文档样式

变量名.style.属性 = 值,简单属性只需要这样的语法写即可，若是如font-size: 32px这样样式属性需要将中间的中划线删除，并大写后面的属性的第一位字母，如fontSize = 32px即可；

修改类名

1.变量名.classNmae这种语法即可修改对应标签的类名，不过这样写是覆盖原先的类名，容易出现样式错误;

2.变量名.classList.add('ClassName')为保留原有的类名并进行新添加类名；

3.变量名.classList.remove('ClassNme')删除现有名为 ClassName 的类名；

4.变量名.classList.toggle('ClassName')为切换类名，如果这个变量有 ClassName 这个类名，那就删除这个类名；如果这个变量没有 ClassName 这个类名，那就添加这个类名

5.变量名.classList.contains('ClassName')检测类名，检测这个变量是否存在 ClassName 这个类名，如果拥有就返回 True，否则返回 False；

禁用元素

disabled = true禁用元素,默认为disabled = false；checked默认选中（单多选）；selected默认选中（下拉菜单选中）；

获取自定义属性

data-属性名:属性值，自定义属性的语法规则，即在自定义属性名前加入data-即可；获取自定义属性变量名.dataset.属性名，属性名可以直接选择data-之后的属性，并不需要添加data-;

定时器-间歇函数

创建定时器

setInterval(函数, 时间);时间是以毫秒为单位，即间隔时间这个值之后执行函数;

  setInterval(output, 1000);
  function output() {
      console.log('Hello,world');
  }
  //即在1秒之后调用output函数输出Hello,world

关闭定时器
- 定时器标识：在创建定时器时就存在，定时器会自动返回定时器标识
  
  clearInterval(定时器标识)
```
const timer = setInterval(output, 1000);
clearInterval(timer);
```

监听事件

事件源

事件触发源头，即那个元素触发这个事件，那它就是事件源
事件类型

触发的方式
事件处理函数

事件触发后要做的事

事件源.addEventListener('事件类型', 函数);为监听事件的语法，例：

        const btn = document.querySelector('.btn');
        btn.addEventListener('click', ouput);//单击事件，仅单次点击
        function output(){console.log('hello')};

        const box = document.querySelector('.box');
        box.addEventListener('dblclick', color);//双击事件
        function color(){box.style.background = '#0ff';}

其他事件版本,原先的on事件不支持C3某些新特性

//dom0
const btn = document.querySelector('.btn');
btn.onclick = function (){};
//dom2
btn.addEventListener('click', function);

事件类型

鼠标事件

点击事件,以上的例使用的就是click事件

经过

const div = document.querySelector('div');
div.addEventListener('mouseenter', function);//鼠标经过，调用函数

离开

const div = document.querySelector('div');
div.addEventListener('mouseleave', function);//鼠标离开，调用函数

移动

const div = document.querySelector('div');
div.addEventListener('mousemove', function);//鼠标移动，调用函数