(一)操作属性
1.对象.setAttribute('属性名','属性值'); --- 添加属性
例子:把所有class为div的,字体改为30px;
var a document.getElementById('div');
for(var i=o;i<a.length;i++){
a[i].setAttribute('style','font-size=30px');或者用a[i].style.fontSize='30px';
}
2.对象.getAttribute('属性名'); - 获取属性值,如无此属性,那么返回null
3.对象.removeAttribute('属性名'); - 移除属性
例子1:设置2个按钮,第一个不能点击,点击第二个,解锁第一个,可以点击
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <input type="button" value="第一个按钮" disabled="disabled" id="but1"/> <input type="button" value="第二个按钮" id="but2"/> </body> </html> <script type="text/javascript"> document.getElementById('but2').onclick = function () { var a = document.getElementById('but1'); a.removeAttribute('disabled'); } </script>
例子2.判断2个数的和是否正确
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> 5+5 <input type="text" da="10" id="text1" value=""/> <input type="button" id="but1" value="验证"/> </body> </html> <script type="text/javascript"> var a = document.getElementById('but1'); var b = document.getElementById('text1'); a.onclick = function () { //alert(b.value); //alert(b.getAttribute('da')); if (b.value == b.getAttribute('da')) { alert('正确'); } else { alert('错误'); } } </script>
(二)定时器
1.window.setTimeout(function(){},间隔时间毫秒);
定时触发,延迟执行,只能执行一次
2.window.setInterval(function(){},间隔时间毫秒);
无限循环,每次都有间隔时间,一般大于20毫秒,有返回值,可以用变量来接受这个定时器的对象
3.window.clearInterval(要关闭的定时器对象);
执行停止定时器的执行
例子:用定时器制作简单的动画
一个按钮,一点击,按钮会往屏幕右边移动,离屏幕左边500px的时候停止
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> #but1 { position:absolute; top:0px; left:0px; } </style> </head> <body> <input type="button" id="but1" value="请点击开始"/> </body> </html> <script type="text/javascript"> var a = document.getElementById('but1'); a.onclick = function () { var aa = window.setInterval(function () { if (a.offsetLeft > 500) {//如果当前元素距离左边的距离超过500px;就会执行停止条件 window.clearInterval(aa); } a.style.left = a.offsetLeft + 10 + 'px';//每循环一次,a标签距离左边的距离等于它本身距离左边的距离加上10 }, 20); } </script>
(三)操作元素
1对象.innerHTML = '值';
赋值:标记会被编译执行
取值:标记会取出 var s = 普通元素.innerHTML;
2对象.innerText = '值';
赋值:内容直接全部输入
取值:只取文字内容 var s = 普通元素.innerText;
3.注意:表单元素 --- 只能用value来取值赋值
表单元素.value = '值';
var a = 表单元素.value;
(四)操作相关元素
1.找到同辈的相关元素
a.nextSibling --- 找到a的下一个(位置)同辈元素
a.previousSibling --- 找到a的上一个(位置)同辈元素
注意:如果有回车空格也算,需要继续加(nextSibling或者previousSibling)
2.父辈元素
a.parentNode --- 找到a的上一级(包含a的元素)父辈元素
3.子元素
a.childNodes --- 找出的是数组,
a.firstChild --- 找出的是第一个子元素
a.lastChild --- 找出的是最后一个子元素
a.childNodes[n] --- 找第几个,
alert(nodes[i] instanceof Text);判断是不是文本,是返回true,不是返回flase,用if判断,如果是flase,可以去除空格
(五)元素的创建、添加、删除
1. var a = document.createElement('标记名'); - 动态创建元素,并赋值给a;
a.appendChild(a); --- 像a标签中添加一个子元素
a.removechild(对象); --- 删除一个子元素