随笔 - 0, 文章 - 75, 评论 - 0, 引用 - 0
数据加载中……

DOM编程-document对象

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";

posted on 2012-04-22 15:12 hantai 阅读(197) 评论(0)  编辑  收藏


只有注册用户登录后才能发表评论。


网站导航: