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");选择一个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>";把该标签位该为hello
获取同级,父子元素
//获取父元素：
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);
···
来源:https://www.cnblogs.com/ClownLMe/p/18454908
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]