本文详细介绍JavaScript中DOM的基本操作，涵盖传统选择器（getElement系列）与CSS选择器（querySelector系列）的使用，以及文本、HTML内容、样式和类名的修改方法。同时讲解事件绑定的两种模式及定时器（setTimeout/setInterval）的启动与关闭，帮助开发者掌握前端基础交互技能。
JavaScript中DOM与定时器基础操作概述
DOM元素操作方法
传统DOM选择器用法
通过ID获取元素
var elements = document.getElementById(id的名称);具体示例如下：
var elements = document.getElementById("test");获取ID为test的DOM节点
通过Class类名获取元素
var elements = document.getElementsByClassName(class的名称);具体示例如下：
var elements = document.getElementsByClassName("test");获取Class为test的DOM节点
通过标签名称获取元素
var elements = document.getElementsByTagName(标签名);具体示例如下：
var elements = document.getElementsByClassName("p");获取所有p标签（返回节点数组）
CSS3通用选择器select（HTML5标准）
基础选择语法：.id #class 标签名 [属性]
单个元素选择
var element = document.querySelector(css选择的格式);具体示例如下：
var elements = document.querySelector("a[target]");选取target属性为特定值的a标签
多个元素选择
var element = document.querySelectorAll(css选择的格式);具体示例如下：
var elements = document.querySelectorAll("#title");选取所有class为title的DOM元素
DOM元素属性与样式操作
更新元素文本内容（纯文本模式）
element.textContent = 文本内容;具体示例如下：
element.textContent = "hello";将当前元素文本替换为hello
更新元素HTML内容（富文本模式）
element.innerHTML = 替换的html代码;具体示例如下：
element.textContent = "<h1>hello</h1>";将当前元素内部HTML替换为<h1>hello</h1>
获取相邻、父子节点关系
//获取父元素：
var parent = element.parentNode;
//获取子元素：
var child = element.children;
//获取同级上一个元素：
var previous = element.previousElementSibling;
//获取同级下一个元素：
var next = element.nextElementSibling;动态修改元素class或id属性
//修改id名
//修改类名
element.className = "new-class";
//修改id名
element.id = "new-id";调整元素CSS样式（语法同CSS）：
常见属性列举（其余样式设置同理）
//修改宽高背景颜色
element.style.backgroundColor = "red";
element.style.width = "200px";
element.style.height = "100px";
//......事件监听机制（两种注册方式，以点击事件为例）
方式一：直接赋值事件处理器
```javascript element.事件处理器 = 事件回调函数; ```
例如:
···javascript
element.onclick = function() {
//你要执行的事件
console.log("Clicked!");
};方式二：使用事件监听器注册
```javascript element.addEventListener(事件名, 事件的回调函数); ```
例如：
···javascript
element.addEventListener("click",function(){
//你要执行的事件
console.log("Clicked!");
});注意：直接赋值处理器可能导致事件被覆盖，推荐使用第二种方式
定时器（Timer）机制
延时执行定时器
在指定延迟时间后仅执行一次回调
setTimeout(回调函数,延时时间(ms));具体示例如下：
setTimeout(function() {
console.log("Timeout!");
}, 1000);间隔执行定时器
按固定时间间隔重复执行回调
启动定时器实例
setInterval(回调函数,延时时间(ms));具体示例如下：
var timerid = setInterval(function() {
console.log("Timeout!");
}, 1000);停止定时器运行
clearInterval(定时器id);
···
```javascript
clearInterval(timerid);
···至此，关于JavaScript中DOM与Timer基础操作的教程结束，如需了解更多js dom和timer相关内容，请查阅本站往期文章或继续浏览后续文章，感谢大家的支持！