如何用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来打开页面 作者:时の卵
分享到：
相关推荐
通用javaScript的验证框架
在"JavaScirpt搜索关键字提示"这个主题中，我们主要讨论的是如何利用JavaScript实现一个搜索关键字的下拉提示功能，这种功能常见于搜索引擎或网站搜索框中，能够为用户提供便捷的搜索建议。 在描述中提到的"中英文...
在本主题中，我们将深入探讨JavaScript的基本语法、事件处理以及window对象。 首先，我们来了解一下JavaScript的基本语法。JavaScript语法与C++和Java有相似之处，但更宽松，它允许在一行内编写多条语句。...
在给定的“javascirpt树形菜单例子”中，我们可以深入探讨以下相关知识点： 1. **DOM操作**：JavaScript树形菜单的实现通常涉及对DOM（文档对象模型）的操作。通过创建、修改或删除DOM元素，我们可以动态地构建和...
在JavaScript中，类（Class）是ES6引入的一种新的语法糖，用来实现面向对象编程。在ES5之前，我们通常使用函数构造器和原型链来模拟类的行为，但ES6的类提供了一种更加简洁、易读的语法，使得代码更接近传统的面向...
JavaScript，简称JS，是Web开发领域中不可或缺的脚本语言，广泛用于网页和网络应用的交互与动态..."javascirpt光盘"这个文件可能包含了各种JavaScript的学习资源和示例代码，建议仔细研读，实践是检验理论的最好方式。
JavaScript是一种广泛应用于网页和网络应用的编程语言，它在网页开发中扮演着至关重要的角色，尤其是在动态交互方面。"JavaScript代码"这个主题涵盖了JavaScript在实际应用中的各种技巧和实例，如描述中提到的联动...
Furious.js 是 AMD 开发的 JavaScirpt 科学计算包，灵感来源于 NumPy。 标签：Furious
JavaScript 是一种广泛应用于网页和网络应用的脚本语言，它在浏览器环境中运行，为用户提供交互式体验。以下是一些JavaScript的小技巧和知识点： ...而 `event.srcElement.tagName` 和 `event.srcElement.type` 分别...
juggle是一个松耦合的JavaScirpt基础组件库。共1374行代码，平均每个组件100行代码，渐进并极易学习使用。包含事件、Tween、mv框架、http、websocket、资源、模块等，按需选择组件，不绑架开发者。
《javascirpt征途》全文pdf链接，130M自己去百度网盘下载 因为文件比较大，无法上传，但是提供分享链接，百度网盘的，自己去下载即可！
echarts_javascirpt
JavaScript是一种广泛应用于网页和网络应用中的编程语言，它在网页动态效果和用户交互方面起着至关重要的作用。本文将深入探讨如何使用JavaScript实现图片切换效果，以提升网站的用户体验。 首先，图片切换效果通常...
... JavaScript是一种强大的客户端脚本语言，用于增加网页的交互性。...ES6（ECMAScript 6）的推出为JavaScript提供了更多现代编程特性，如类、模块、箭头函数等。...CSS（Cascading Style Sheets）则负责网页的样式和布局...
js原生态扩展方法.包含string,array操作
### JavaScript中的对象与继承 #### 一、JavaScript对象的基础概念 在JavaScript中，对象是一种非常重要的数据类型，它能够存储键值对的形式来表示复杂的结构数据。这些键通常被称为属性名，而对应的值则称为属性...
一个包括一小段脚本的html文件.可以自行修改.