如何用Script语言访问网页的某个元素及其相关的应用 作者:时の卵
A.例子一:如何获得页面中的所有HTML元素?
<HTML>
<HEAD><TITLE>显示页面中所有的HTML元素</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function showElements() {
var tag_names = "";
for (i=0; i<document.all.length; i++)
tag_names = tag_names + document.all(i).tagName + " ";
alert("本页面中的元素有 " + tag_names);
}
</SCRIPT>
</HEAD>
<BODY onload="showElements()">
<H1>欢迎</H1>
<P>这是一个 <B>测试</B> 文件.</P>
</BODY>
</HTML>
B.例子二:如何获得元素的子元素？
<HTML id=theHTML>
<HEAD>
<TITLE>显示所有元素及theHTML的子元素</TITLE>
<SCRIPT language=JavaScript>
function showme() {
alert('theHTML下共有 ' + window.theHTML.all.length+' 个HTML的元素');
for (i=0; i < theHTML.all.length;i++)
{
alert(theHTML.all[i].tagName);
}
alert('theHTML下的子元素共有 ' + window.theHTML.children.length+' 个')
;
for (i=0; i < theHTML.children.length;i++)
{
alert(theHTML.children[i].tagName);
}
}
</SCRIPT>
</HEAD>
<BODY onload=showme()>
<DIV></DIV>
</BODY>
</HTML>
C.例子三:如何获得页面内某个元素的内容和改变它的某些属性?
<html>
<head>
<title>Untitled Document</title>
<script language="JavaScript">
function getTags(){
var get_tables = document.all.tags("TABLE");
for (i=0; i<get_tables.length; i++)
alert('第'+(i+1)+'个TABLE元素内的内容为:\n'+get_tables(i).innerHTML
+'\n'+'当你按下确定后这个TABLE的属性之一[BORDER]的值将变为1');
get_tables(i-1).border = 1;
}
</script>
</head>
<body onLoad=getTags()>
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="http://www.flashabc.com">HTTP://WWW.FLASHABC.COM</a></td>
</tr>
</table>
</body>
</html>
D.例子四:用另一种方法来改变元素的属性的值
<HTML>
<HEAD><TITLE>改改改!</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function showAndSetAlignment() {
alert(MyHeading.getAttribute("align"));
MyHeading.setAttribute("align","center");
}
</SCRIPT>
</HEAD>
<BODY onload="showAndSetAlignment()">
<H1 ID=MyHeading ALIGN="left">欢迎光临</H1>
<P>HTTP://WWW.FLASHABC.COM
</BODY>
</HTML>
E.例子五:显示出页中的元素结构
<HTML>
<HEAD><TITLE>Elements: Hierarchy</TITLE>
<SCRIPT LANGUAGE="JScript">
function showHierarchy() {
var depth = 0;
var msg = document.all(0).tagName;
for (i=1; i<document.all.length; i++) {
if (document.all(i-1).contains(document.all(i))==true) {
depth = depth + 1;
} else {
var elParent = document.all(i-1).parentElement;
for ( ; depth>0; depth--) {
if (elParent.contains(document.all(i))==true)
break;
elParent = elParent.parentElement;
}
}
msg = msg + "\n";
for (j=1; j<=depth; j++)
msg = msg + " ";
msg = msg + document.all(i).tagName;
}
alert("这个页面中包含的元素为\n" + msg);
}
</SCRIPT>
</HEAD>
<BODY onload="showHierarchy()">
<H1>欢迎光临</H1>
<P>你看到预想的<B>结果</B> 了吗.
</BODY>
</HTML>
还有几个小例子,你自己看看就会明白是做什么用途啦
var coll = document.all.tags("H1");
if (coll.length>0)
coll(0).align="center";
var coll = document.all.tags("IMG");
if (coll.length>0)
coll(0).src="newimage.gif";
var coll = document.all.tags("H1");
for (i=0; i<coll.length; i++)
coll[i].style.color = "green";
下一篇:用showModalDialog来打开页面 作者:时の卵