20150422 DOM操作

DOM操作
window
history
location
document
status
每一个对象都有属性和方法
一、Dom结构
window对象
alert(msg)
confirm(msg) 返回bool型的值
open(url,target,features) 打开新窗口,返回被打开的那个窗口对象。
close()
setInterval(code,delay);
setTimeout(code,delay);
history对象
go(整数)
location对象
href属性:获得或指定一个url网址。
document对象
找到对象
操作属性
操作样式
操作内容
操作相关元素


二、document对象
(一)找到对象
var a = document.getElementById("id"); 返回的是个对象
var a = document.getElementsByName("name"); 返回的是个数组
var a = document.getElementsByTagName("tagname"); 返回的是个数组
(二)操作属性
1.获取属性值
var s = obj.getAttribute("属性名");
2.设置或修改属性值
obj.setAttribute("属性名","属性值");
3.移除属性值
obj.removeAttribute("属性名")

(三)操作样式
1.操作内联样式
obj.style.backgroundColor=
obj.style.xxxx

2.操作样式表的class
obj.className="class名"
obj.setAttribute("class","class名")

(四)操作内容
1.表单元素。
赋值:obj.value="";
取值:var s = obj.value;

2.非表单元素。
赋值:obj.innerHTML = "";
取值:var s = obj.innerHTML;

(五)操作相关元素

 ..

 QQ页面设置

<style type="text/css">
#qqPane
{
250px;
border:1px solid navy;
}
.divTitle
{
background-color:navy;
color:white;
text-align:center;
font-weight:bold;
padding-top:5px;
padding-bottom:5px;
margin-top:1px;
}
.divContent
{
height:300px;
background-color:#FF9;
display:none;
}
</style>
<script language="javascript">
function doShow(sid)
{
//找要显示的div
var dd = document.getElementById(sid);
//把所有divContent都给隐藏
var divs = document.getElementsByTagName("div"); //获取所有的div
for(var i=0;i<divs.length;i++)//遍历所有的div
{
if(divs[i].className=="divContent") //筛选出divContent
{
divs[i].style.display="none"; //把divContent统统隐藏
}
}
//切换显示状态
if(dd.style.display != "block")
{
dd.style.display="block";
}
else
{
dd.style.display = "none";
}
}

</script>
</head>

<body>
<div id="qqPane">
<div class="divTitle" onclick="doShow('haoyou')">我的好友</div>
<div id="haoyou" class="divContent"></div>
<div class="divTitle" onclick="doShow('heimingdan')">黑名单</div>
<div id="heimingdan" class="divContent"></div>
<div class="divTitle" onclick="doShow('moshengren')">陌生人</div>
<div id="moshengren" class="divContent"></div>
</div>
</body>
</html>

 按钮几秒后能点击

<body>
<form id="form1" name="form1" method="post" action="">
<p>asdfasdf</p>
<p>asd</p>
<p>f</p>
<p>asdf</p>
<p>asdgasdgasdg</p>
<p>
<input disabled="disabled" type="submit" name="btn" id="btn" value="同意(10)" />
</p>
</form>
</body>
</html>
<script language="javascript">
var num =10;
function showNumber()
{
num--;
var btn = document.getElementById("btn");                      
btn.value = "同意("+num+")";

if(num == 0)
{
btn.value="同意";
btn.removeAttribute("disabled");
}
else
{
window.setTimeout("showNumber()",1000);
}
}
showNumber();
</script>

原文地址:https://www.cnblogs.com/m123/p/4449784.html