摘要

例如：选择id为test的标签例如：选择class为test的标签例如：选择p标签(传回数组)

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