首页 > 网络编程 > JavaScript > javascript技巧 > js dom和timer操作

JavaScript中的DOM和Timer的基本操作

2024-10-14 09:33:09 作者：ClownLMe

掌握JavaScript中的DOM操作可通过id、class、标签名及CSS选择器进行元素选择和内容修改,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);
···

到此这篇关于JavaScript中的DOM和Timer(简单易用的基本操作)的文章就介绍到这了,更多相关js dom和timer操作内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！