如何用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]的值將變?yōu)?');
get_tables(i-1).border = 1;
}
</script>
</head>
<body onLoad=getTags()>
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href=">
</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來打開頁面 作者:時の卵
?
?