javascript DOM操作
什么时候找到元素操作元素
1、找元素 返回元素对象
var obj = document.getElementById("dd");
document.getElementsByName(); name属性值
document.getElementsByTagName("div");
document.getElementsByClassName();
2、操作元素内容
非表单元素:obj.innerHTML=123
表单元素:obj.value
3、操作元素属性
<div></div>
obj.setAttribute("id","btn");
<div id="btn"></div>
obj.getAttribute("id"); =>btn
obj.removeAttribute("id");//删除属性
4、操作元素样式
obj.style.color
5、操作元素事件
obj.onclick = function(){}
obj.addEventListener('click',f1);
6、创建删除元素
obj.remove();
var div = document.createElement('div');
trDom.appendChile(tdDom)
定时器的事例:
var setDom = null;//定时器
var n = 0;//数组下标
var divDom = null, //显示div
startDom = null, //开始按钮
endDom = null;
//页面加载完成
window.onload = function(){
buchong();
// var btnDom = document.getElementById('btn');
// console.log(btnDom);
initDom(); //初始化变量
addEvent();//添加事件
// dianziTime();//电子时钟
setInterval(function(){
dianziTime();
},1000);
//验证码
yzmFun();
练习题
/*36选7 不重*/
function buchong(){
var num = [1,2,3,4,5,6,7,8,9,10,11,12,13];
var jiguo = [];
var nn = 0;
for(var i =0;i<7;++i){
var n = parseInt(Math.random()*num.length);
if(jiguo.indexOf(num[n]) < 0 ){
jiguo.push(num[n]);
}else{
i--;
}
nn++;
}
console.log(nn);
console.log(jiguo);
}