JavaScript中的DOM和Timer(简单易用的基本操作)

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);
···