document对象的常用属性和方法介绍
常用的属性:bgColor 它用来设置文档的背景颜色
常用的方法:
getElementById() 根据HTML元素指定的ID,获得唯一的一个HTML元素,如访问DIV层对象、图片Img对象等
getElementsByName()
根据HTML元素指定的name,获得相同名称的一组元素,如访问表单元素(全选功能)
使用:
document.bgColor="red"; //设置背景颜色为红色
var a = document.getElementByIdx_x_x_x_x("text1").value;
//获取ID为"text1"中的值
var arr = document.getElementsByName("checkboxes");
//获取name为"checkboxes"的数组
function move(){
document.getElementByIdx_x_x_x_x("advLayer").style.pixelTop=advInitTop+document.body.srollTop;
}
为何使用pixelTop 属性,而不用top属性?
因为top属性返回带单位的值,如返回"100px" 是一个字符串,无法进行运算,必须转换类型后,方可运算
使用pixelTop属性,返回以像素为单位的数值,如返回 "129" 可直接进行运算
窗体滚动事件:
window.onscroll=move;
注意:onscroll小写,move是方法名,不加“括号”
如何隐藏\显示DIV层:
隐藏:document.getElementByIdx_x_x_x_x("div1").style.display="none";
显示:document.getElementByIdx_x_x_x_x("div1").style.display="block";
实现复选框全选和全不选效果:
先设置统一名称,如"isBuy"
function checkAll(boolValue){
var allCheckBoxs=document.getElementsByName("isBuy");
//获取名称为isBuy的数组
for(var i=0;i<allCheckBoxs.length;i++){
if(allCheckBoxs[i].type=="checkbox")
//可能有重名的其他类型元素,所以要判断
allCheckBoxs[i].checked=boolValue;
}
}
调用:
<a href="javascript:checkAll(this.checked)">全选</a>
<a href="javascript:checkAll(this.checked)"全不选</a>
参数传true,false,或this.checked都可,因为this.checked也返回一个Boolean类型,意思为是否已选中
通过DOM动态生成、获取元素:
<script language="javascript"> //这个script标签,放在HTML最后,因为HTML语言逐行解析
var newInput=document.create_r_r_rElement("input");
//想生成input标记,就在createElement_x_x_x()中写标记名
newInput.type="text"; //设置其type为文本框
newInput.value="aaa"; //其文本值为aaa
newInput.id="text1"; //其id为text1
div2.a(newInput); //添加到div2中,可先获取div2的对象,再向div2追加newInput
</script>
常见错误及排错方法:
问:在记事本中编辑HTML+JS代码,出错了,根据IE提示,寻找错误行,一行一行数很麻烦
答:首先,取消自动换行;其次按ctrl+G 输入错误所在的行号,点确定即可找到
问:插入DIV层后,显示不出层或看不到?
答:设置div标签中的style属性,
style="position:absolute;left:16px;top:129px;width=180px;height:230px;z-index=1;"
问:设置checkbox.checked的属性值为:checkbox1.checked="false";
和checkbox1.checked=false;有何区别?
答:第一种的.checked="false"
赋的值是字符串型,当checked属性为字符串时,永远保持是true的,必须为其转换类型为Boolean类型,例如: var c =
document.getElementByIdx_x_x_x_x("checkbox1").value=="true";