基本的window.document操作及实例

基本的window.document操作及实例

找元素

1.根据id找

var d1 = document.getElementById("d1");

alert(d1);

2.根据class找

var d2 = document.getElementsByClassName("d");

alert(d2[1]);

3.根据标签名找

var d3 = document.getElementsByTagName("div");

alert(d3[0]);

4.根据name找

var d4 = document.getElementsByName("aa");

alert(d4[0]);

操作元素

操作内容

非表单元素

var d1 = document.getElementById("d1");

1.获取文本

alert(d1.innerText);

2.设置文本

d1.innerText = "hello";

3.获取html代码

alert(d1.innerHTML);

4.设置html代码

d1.innerHTML = "<b>加粗文字</b>";

表单元素

var b1 = document.getElementById("b1");

1.赋值

b1.value = "ceshi";

2.获取值

alert(b1.value);

操作属性

1.添加属性

var d1 = document.getElementById("d1");

d1.setAttribute("bs","1");

2.获取属性

alert(d1.getAttribute("cs"));

3.移除属性

d1.removeAttribute("cs");

操作样式

function showa()

{

1.获取样式,只能获取内联样式

var d3 = document.getElementById("d3");

alert(d3.style.color);

}

function set()

{

var d3 = document.getElementById("d3");

2.设置样式

d3.style.backgroundColor = "red";

}

注册按钮选中可使用：

<input type="checkbox" id="ck" onclick="xiugai()" />同意

<input type="button" value="注册" id="btn" disabled="disabled" />

JS程序：

function xiugai()

{

//找到复选框

var ck = document.getElementById("ck");

//找到按钮

var btn = document.getElementById("btn");

//判断复选框的选中状态

if(ck.checked)

{

//移除按钮的不可用属性

btn.removeAttribute("disabled");

}

else

{

//设置不可用属性

btn.setAttribute("disabled","disabled");

}

}

鼠标选中背景文字颜色改变：

Css样式：<style type="text/css">

#caidan{

width:500px; height:35px; border:1px solid #60F;

}

.xiang{

width:100px;

height:35px;

text-align:center;

line-height:35px;

vertical-align:middle;

float:left;

}

</style>

Body程序：

<div id="caidan">

<div class="xiang" onmouseover="huan(this)" >首页</div>

<div class="xiang" onmouseover="huan(this)" >产品中心</div>

<div class="xiang" onmouseover="huan(this)" >服务中心</div>

<div class="xiang" onmouseover="huan(this)" >联系我们</div>

</div>

JS程序：

function huan(a)

{

//将所有的项恢复原样式

var d = document.getElementsByClassName("xiang");

for(var i=0;i<d.length;i++)

{

d[i].style.backgroundColor="white";

d[i].style.color = "black";

}

//换该元素的样式

a.style.backgroundColor = "red";

a.style.color = "white";

}

倒计时结束按钮可点击：

<span id="daojishi">10</span>

<input disabled="disabled" type="button" value="注册" id="anniu" />

</div>

JS程序：

<script type="text/javascript">

window.setTimeout("daojishi()",1000);

//功能：倒计时减1

function daojishi()

{

//找到span

var s = document.getElementById("daojishi");

//判断

if(parseInt(s.innerHTML)<=0)

{

document.getElementById("anniu").removeAttribute("disabled");

}

else

{

//获取内容，减1之后再交给span

s.innerHTML = parseInt(s.innerHTML)-1;

//每隔一秒调一次该方法

window.setTimeout("daojishi()",1000);

}

}

</script>