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

猫头鹰日记

JavaScript中的DOM和Timer基本操作

DOM操作

传统的选择器

选择器id

1. var elements = document.getElementById(id的名称);

复制代码

例如：

1. var elements = document.getElementById("test");

复制代码

选择id为test的标签
选择器class

1. var elements = document.getElementsByClassName(class的名称);

复制代码

例如：

1. var elements = document.getElementsByClassName("test");

复制代码

选择class为test的标签
选择器标签名

1. var elements = document.getElementsByTagName(标签名);

复制代码

例如：

1. var elements = document.getElementsByClassName("p");

复制代码

选择p标签(传回数组)
包罗万象的select（css）选择器(H5)

简单的选择格式 .id  #class  标签名  [属性]
单选

1. var element = document.querySelector(css选择的格式);

复制代码

例如：

1. var elements = document.querySelector("a[target]");

复制代码

选择一个a标签的target属性
多选

1. var element = document.querySelectorAll(css选择的格式);

复制代码

例如：

1. var elements = document.querySelectorAll("#title");

复制代码

选择所有class为title的属性
标签元素的操作

修改标签文本内容(以文本的方式输出)

1. element.textContent = 文本内容;

复制代码

例如：

1. element.textContent = "hello";

复制代码

把该标签的文本内容改为hello
修改标签文本内容(以html的方式输出)

1. element.innerHTML = 替换的html代码;

复制代码

例如：

1. element.textContent = "<h1>hello</h1>";

复制代码

把该标签位该为hello


获取同级,父子元素

1. //获取父元素：
2. var parent = element.parentNode;
3. //获取子元素：
4. var child = element.children;
5. //获取同级上一个元素：
6. var previous = element.previousElementSibling;
7. //获取同级下一个元素：
8. var next = element.nextElementSibling;

复制代码

修改元素类名id名

1. //修改id名
3. //修改类名
4. element.className = "new-class";
5. //修改id名
6. element.id = "new-id";

复制代码

对元素样式进行修改(css相同)：

列举几个（其他的样式同理）

1. //修改宽高背景颜色
2. element.style.backgroundColor = "red";
3. element.style.width = "200px";
4. element.style.height = "100px";
5. //......

复制代码

EVENT操作(两种方式，以点击为例)

一：调用事件处理器

···javascript
element.事件处理器 = 事件回调函数;

1. 例如:
2. ···javascript
3. element.onclick = function() {
4.   //你要执行的事件
5.   console.log("Clicked!");
6. };

复制代码

二：调用事件函数

···javascript
element.addEventListener(事件名,事件的回调函数);

1. 例如：
2. ···javascript
3. element.addEventListener("click",function(){
4.   //你要执行的事件
5.   console.log("Clicked!");
6. });

复制代码

ps：调用事件处理器可能出现事件覆盖的情况，建议第二种

timer定时器

延时定时器

执行时延时一定的时间才开始执行

1. setTimeout(回调函数,延时时间(ms));

复制代码

例如：

1. setTimeout(function() {
2.     console.log("Timeout!");
3. }, 1000);

复制代码

间隔定时器

每隔一定的时间执行一次
启动定时器

1. setInterval(回调函数,延时时间(ms));

复制代码

例如：

1. var timerid = setInterval(function() {
2.     console.log("Timeout!");
3. }, 1000);

复制代码

关闭定时器

1. clearInterval(定时器id);
2. ···
3. ```javascript
4. clearInterval(timerid);
5. ···

复制代码

来源:https://www.cnblogs.com/ClownLMe/p/18454908
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！