JavaScript中的DOM和Timer基本操作
DOM操作
传统的选择器
选择器id
var elements = document.getElementById(id的名称);
例如：
var elements = document.getElementById("test");
选择id为test的标签
选择器class
var elements = document.getElementsByClassName(class的名称);
例如：
var elements = document.getElementsByClassName("test");
选择class为test的标签
选择器标签名
var elements = document.getElementsByTagName(标签名);
例如：
var elements = document.getElementsByClassName("p");
选择p标签(传回数组)
包罗万象的select（css）选择器(H5)
简单的选择格式 .id #class 标签名 [属性]
单选
var element = document.querySelector(css选择的格式);
例如：
var elements = document.querySelector("a[target]");
选择一个a标签的target属性
多选
var element = document.querySelectorAll(css选择的格式);
例如：
var elements = document.querySelectorAll("#title");
选择所有class为title的属性
标签元素的操作
修改标签文本内容(以文本的方式输出)
element.textContent = 文本内容;
例如：
element.textContent = "hello";
把该标签的文本内容改为hello
修改标签文本内容(以html的方式输出)
element.innerHTML = 替换的html代码;
例如：
element.textContent = "<h1>hello</h1>";
把该标签位该为<h1>hello</h1>
获取同级,父子元素
//获取父元素：
var parent = element.parentNode;
//获取子元素：
var child = element.children;
//获取同级上一个元素：
var previous = element.previousElementSibling;
//获取同级下一个元素：
var next = element.nextElementSibling;
修改元素类名id名
//修改id名
//修改类名
element.className = "new-class";
//修改id名
element.id = "new-id";
对元素样式进行修改(css相同)：
列举几个（其他的样式同理）
//修改宽高背景颜色
element.style.backgroundColor = "red";
element.style.width = "200px";
element.style.height = "100px";
//......
EVENT操作(两种方式，以点击为例)
一：调用事件处理器
···javascript
element.事件处理器 = 事件回调函数;
例如:
···javascript
element.onclick = function() {
//你要执行的事件
console.log("Clicked!");
};
二：调用事件函数
···javascript
element.addEventListener(事件名,事件的回调函数);
例如：
···javascript
element.addEventListener("click",function(){
//你要执行的事件
console.log("Clicked!");
});
ps：调用事件处理器可能出现事件覆盖的情况，建议第二种
timer定时器
延时定时器
执行时延时一定的时间才开始执行
setTimeout(回调函数,延时时间(ms));
例如：
setTimeout(function() {
console.log("Timeout!");
}, 1000);
间隔定时器
每隔一定的时间执行一次
启动定时器
setInterval(回调函数,延时时间(ms));
例如：
var timerid = setInterval(function() {
console.log("Timeout!");
}, 1000);
关闭定时器
clearInterval(定时器id);
···
```javascript
clearInterval(timerid);
···