<html>
<head>
<title>DOM对象</title>
<style type="text/css">
table {
border:1px solid green;
border-collapse:collapse;
300px;
}
td {
padding:5px;
border:1px solid green;
font-size:16px;
text-align:center;
}
table#tab {
border:1px solid green;
border-collapse:collapse;
128px;
}
#tab td {
border:1px solid green;
padding:1px;
}
#tab td img {
border:0;
}
</style>
<script type="text/javascript">
function showMsg(id) {
var val = document.getElementById(id);//节点
if(val.nodeName == "SPAN") {
alert(val.innerHTML);// 文本使用innerHTML
val.innerHTML = "oracle";//可以取值 赋值
} else {
alert(val.value);//文本框使用value属性取值
val.value="李四";
}
}
function checkAll(sta) {
// alert(sta);
var arr = document.getElementsByName("loves");//数组
//alert(arr.length);
//设置状态
for(var i = 0; i < arr.length; i++ ) {
arr[i].checked = sta;
}
}
</script>
</head>
<body>
<div>DOM对象</div>
1.document对象 getElementById() getElementsByName()<br/>
<script type="text/javascript">
/*
document.open();//打开流
document.close();
*/
document.write("document.body : ", document.body.nodeName , "<br/>");
document.write("document.cookie : ", document.cookie , "<br/>");
document.write("document.domain : ", document.domain , "<br/>");
document.write("document.lastModified : ", document.lastModified , "<br/>");
document.write("document.referrer : ", document.referrer , "<br/>");
document.write("document.title : ", document.title , "<br/>");
document.write("document.URL : ", document.URL , "<br/>");
/*
document.writeln("document.URL : " );
document.write("document.URL : " );
*/
</script>
<table>
<tr><td><span id="show">javascript</span></td></tr>
<tr><td><input type="text" name="username" id="username"/></td></tr>
<tr><td><input type="button" value="span" onclick="showMsg('show')"/>
<input type="button" value="文本框" onclick="showMsg('username')"/></td></tr>
<tr><td><input type="checkbox" name="control" onclick="checkAll(this.checked)"/>全选/全不选</td></tr>
<tr><td>
<input type="checkbox" name="loves" value="足球"/>足球
<input type="checkbox" name="loves" value="上网"/>上网
<input type="checkbox" name="loves" value="旅游"/>旅游
<input type="checkbox" name="loves" value="阅读"/>阅读
</td></tr>
</table><br/>
2.document对象 getElementsByTagName()<br/>
<script type="text/javascript">
function randomImg() {
var tab = document.getElementById("tab");//获取表格
//通过标记名获取img
var imgs = tab.getElementsByTagName("img");
//alert(imgs.length);
for(var i = 0; i < imgs.length; i++ ) {
imgs[i].src = "ICONS/0" + ( Math.round( Math.random() * 84) + 11) + ".BMP"
}
}
</script>
<table id="tab">
<tr>
<td><img src="ICONS/011.BMP"/></td>
<td><img src="ICONS/011.BMP"/></td>
<td><img src="ICONS/011.BMP"/></td>
<td><img src="ICONS/011.BMP"/></td>
</tr>
<tr>
<td><img src="ICONS/011.BMP"/></td>
<td><img src="ICONS/011.BMP"/></td>
<td><img src="ICONS/011.BMP"/></td>
<td><img src="ICONS/011.BMP"/></td>
</tr>
<tr>
<td><img src="ICONS/011.BMP"/></td>
<td><img src="ICONS/011.BMP"/></td>
<td><img src="ICONS/011.BMP"/></td>
<td><img src="ICONS/011.BMP"/></td>
</tr>
<tr>
<td><img src="ICONS/011.BMP"/></td>
<td><img src="ICONS/011.BMP"/></td>
<td><img src="ICONS/011.BMP"/></td>
<td><img src="ICONS/011.BMP"/></td>
</tr>
</td></tr>
</table><br/>
<input type="button" value="打散" onclick="randomImg()"/><br/>
3.集合<br/>
<a href="http://www.baidu.com">百度</a><br/>
<a href="http://www.sina.com">新浪</a><br/>
<a href="http://www.taobao.com">淘宝</a><br/>
<form><input type="button" value="提交" /></form>
<form action="DOM对象操作.htm">
<input type="button" value="提交" />
</form>
<img src="p1.jpg"/><br/>
<img src="p2.jpg"/><br/>
<script type="text/javascript">
document.write("document.links[1] .href : ", document.links[1] .href, "<br/>");
document.write("document.forms[1] .action : ", document.forms[1] .action, "<br/>");
document.write("document.images[17] .src : ", document.images[17] .src, "<br/>");
function replaceCon() {
document.links[1] .href = "http://www.163.com";
document.forms[1] .action = "内置对象.htm";
document.images[17] .src = "开发语言排行.jpg";
alert(document.forms[1] .action);
}
</script>
<input type="button" value="替换" onclick="replaceCon()" />
</body>
</html>
rs:
2.
