我要评论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操作内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论