js-document 对象
1、获取标记对象:
css 中: class 、 id 、 标记选择器<p><span>
js 中: class 、 id 、 标记选择器 、 name
2、js中找到元素:
document.getElementById('id'); - 获取一个对象
document.getElementsByClassName('class'); - 获取的是一个数组
document.getElementsByTagName('标记'); - 获取的也是一个数组
document.getElementsByName('name'); - 获取的也是一个数组
3、掌握三个事件:
onclick - 点击事件
onmouseover - 鼠标移入事件
onmouseout - 鼠标移出事件
4、控制标记的样式:
标记对象.style.样式 = "值";
样式里带 “-” 要删掉,后面的第一个字母变为大写
放在等号右边是取值,可以看到元素内联样式的值
js里,对象的index属性,可以记录一个int类型的值
5、操作内容:(1)非表单元素:
获取内容:alert(a.innerText); 只取里面的文字
alert(a.innerHTML); 获取包括标签本身的内容
设置内容:a.innerHTML="<font color=red>hello word</font>";
a.innerText 会将赋的东西原样呈现,
清空内容:赋值个空字符串
(2)表单元素:
获取内容有两种方式:var a=document.f1.t1; 获取form表单中ID为f1里面的ID为t1的input;
var a=document.getElementById("id"); 直接用id获取;
alert(a.value); 获取input中的value值;
alert(a.innerHTML); 获取<textarea>这里的值</textarea>;
设置内容:a.value="内容改变";
6、操作样式和属性:
选择对象:var a=document.getElementById("id");
操作样式:a.style.样式=" "; 操作此ID样式的属性
样式为CSS中的样式,所有的样式都可以用代码进行操作。
document.body.style.backgrondColor="颜色"; 整个窗口的背景色。
操作样式的class:a.className="样式表中的classname" 操作一批样式
操作属性:a.setAttribute("属性名","属性值"); 设置一个属性,添加或更改都可以;
a.getAttribute("属性名"); 获取属性的值
a.removeAttribute("属性名"); 移除一个属性
7、定时器:
window.setTimeout("要执行的代码","间隔时间毫秒");
定时炸弹,延迟执行,只执行一次
window.setInterval(function(){},间隔的时间毫秒);
无限循环,每一次循环有间隔时间,一般不要小于20毫秒
它是有返回值的,可以用一个变量来接收这个定时器对象
window.clearInterval(要关闭的定时器对象);
一旦执行这句代码,会立刻停止此定时器对象的执行
window.clearTimeout(要关闭的对象);
清除延迟
对象.offsetWidth