Chinaunix首页 | 论坛 | 博客

自由我世界

首页　| 　博文目录　| 　关于我

speakitnow

  • 博客访问： 7830922
  • 博文数量： 92
  • 博客积分： 10010
  • 博客等级： 上将
  • 技术积分： 5216
  • 用 户 组： 普通用户
  • 注册时间： 2006-02-15 17:17
文章分类

全部博文（92）

文章存档

2011年（1）

2008年（91）

我的朋友
最近访客
推荐博文
相关博文
获得HTML页面标签属性的几种方法

分类： 系统运维

2008-04-14 11:47:34

获得HTML页面标签属性的几种方法
getElementById:
语法： document.getElementById(id)
参数：id :必选项为字符串(String)
返回值：对象; 返回相同id对象中的第一个,如果无符合条件的对象，则返回 null
example：document.getElementById("id1").value;


getElementsByName:
语法： document.getElementsByName(name)
参数：name :必选项为字符串(String)
返回值：数组对象; 如果无符合条件的对象，则返回空数组
example：document.getElementsByName("name1")[0].value;
document.getElementsByName("name1")[1].value;


getElementsByTagName:
语法： object.getElementsByTagName(tagname) object可以是document或event.srcElement.parentElement等
参数：tagname:必选项为字符串(String)
返回值：数组对象; 如果无符合条件的对象，则返回空数组
example：document.getElementsByTagName("p")[0].childNodes[0].nodeValue;
document.getElementsByTagName("p")[1].childNodes[0].nodeValue;
例子:
getElementById 操作表单元素 2007-05-22 14:26<Script language="Javascript">
          function CopyStr()
          {
            //document.getElementById("TextBox2").value = document.getElementById("TextBox1").value;
          var oBox1 = document.getElementById("TextBox1");
              var oBox2 = document.getElementById("TextBox2");
              oBox2.value = oBox1.value;
   
     }
       Script>
     
      <form name="form1" method="post" action="Default.aspx" id="form1">
       <input name="TextBox1" type="text" id="TextBox1" OnKeyup="CopyStr()" /><br />
       <input name="TextBox2" type="text" id="TextBox2" />
      form>getElementById 方法 2007-05-22 12:49顾明思义，get-Element-By-Id，就是通过ID来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签，条件很简单就是给每个标签分配一个ID号：

document.getElementById("link").href;
document.getElementById("link").target;
document.getElementById("img").src;
document.getElementById("img").width;
document.getElementById("img").height;
document.getElementById("input").value;

那么如何取得<div>div>以及<a>a>之间的值呢？如<div id="div">aaadiv>中的aaa，<a href="#" id="link">bbba>中的bbb，也很简单，利用innerHTML就可以了：

document.getElementById("div").innerHTML;
document.getElementById("link").innerHTML; 
 
getElementById 的用法及实例(1) getElementById 方法
返回具有指定 ID 属性值的第一个对象的一个引用。

语法
oElement = document.getElementById(sIDValue)

参数
sIDValue 必选项。指明 ID 属性值的字符串

返回值
返回 ID 属性值与指定值相同的第一个对象。

注释
如果 ID 属于一个集合，getElementById 方法返回集合中的第一个对象。
getElementById 方法与使用 all 集合上的 item 方法等同。例如，以下代码样本表示如何从 document 对象中取回 ID 为 oDiv 的第一个要素。

使用 DHTML 对象模型：
var oVDiv = document.body.all.item("oDiv");
使用文档对象模型(DOM)：
var oVDiv = document.getElementById("oDiv");

示例
以下例子表示如何使用 getElementById 方法返回 ID 属性值 oDiv 的第一次出现。
<script>
function fnGetId(){
//          Returns the first DIV element in the collection.
          var oVDiv=document.getElementById("oDiv1");
}
script>
<DIV ID="oDiv1">Div #1DIV>
<DIV ID="oDiv2">Div #2DIV>
<DIV ID="oDiv3">Div #3DIV>
<INPUT TYPE="button" VALUE="Get Names" onclick="fnGetId()">
 
 
getElementById 的用法及实例(2) getElementById 方法
返回具有指定 ID 属性值的第一个比如说有个网页中有个text框的id叫text1 
getElementById(text1)就能得到这个text1框的对象,并使用text框的所有属性和方法

 

这个是JS的一个方法，意思是通过控件ID取得元素的值，如一个form里包函text、label等，他们都是FORM的元素，有一个分配的ID，getElementById()是取得这些元素的text值的。 

.


document.formname.name.value 
document.getElementById("name"); 

这两个话的意思一样

.
程序举例

<html>
<head>
<script type="text/javascript">
function alignRow()
{
var x=document.getElementById('myTable').rows
x[0].align="right"

}
script>
head>

<body>
<table width="60%" id="myTable" border="1">
<tr>
<td>行1 单元格1td>
<td>行1 单元格2td>
tr>
<tr>
<td>行2 单元格1td>
<td>行2 单元格2td>
tr>
<tr>
<td>行3 单元格1td>
<td>行3 单元格2td>
tr>
table>
<form>
<input type="button" onclick="alignRow()" value="右对齐第一行文字">
form>
body>

html>



.

支队一个单元隔进行对齐

<html>
<head>
<script type="text/javascript">
function alignCell()
{
var x=document.getElementById('myTable').rows[0].cells 
x[0].align="center"

}
script>
head>

<body>
<table id="myTable" border="1" width="100%">
<tr>
<td>单元格1td>
<td>单元格2td>
tr>
<tr>
<td>单元格3td>
<td>单元格4td>
tr>
table>
<form>
<input type="button" onclick="alignCell()" value="居中对齐第一个单元格的内容">
form>
body>

html>

..

改变colspan的值

<html>
<head>
<script type="text/javascript">
function setColSpan()
{
var x=document.getElementById('myTable').rows[0].cells
x[0].colSpan="2"
x[1].colSpan="6"
}
script>
head>

<body>
<table id="myTable" border="1">
<tr>
<td colspan="4">单元格1td>
<td colspan="4">单元格2td>
tr>
<tr>
<td>单元格3td>
<td>单元格4td>
<td>单元格5td>
<td>单元格6td>
<td>单元格7td>
<td>单元格8td>
<td>单元格9td>
<td>单元格10td>
tr>
table>
<form>
<input type="button" onclick="setColSpan()" value="改变colspan值">
form>
body>

html>
 



JS实现跳转的几种方式
js实现页面跳转的几种方式
第一种：
<script language="javascript" type="text/javascript">
window.location.href="login.jsp?backurl="+window.location.href; 
script>

第二种：
<script language="javascript">
alert("返回");
window.history.back(-1);
script>

第三种：
<script language="javascript">
window.navigate("top.jsp");
script>

第四种：
<script language="JavaScript">
self.location='top.htm';
script>

第五种：
<script language="javascript">
alert("非法访问！");
top.location='xx.jsp';
script> 



判断页面中的ID是否定义
<script language=javascript>
function syId(){
var obj =document.getElementById("syId");
if (obj ){
    alert("是个对象！！！");
}
else{
    alert("不是对象或对象不存在！！！");
}
}
script>
<Div id=syId >这是一个Div id为“syId”Div>
<input type=button value="查SYID" onclick="syId();">


判断变量未定义的方法
<script language = "javascript">
if(typeof(t2)!="undefined"){   
  //存在  
alert(t1.href); 
}
script>


链接控制iframe的几种方法
<a href="#" onclick="window['yourIframeId'].src='a.txt'">
或
<a href=:"#" onclick="javascript:window.open('a.txt','tarpage','')">aaa>
<iframe name="tarpage" width="100" height="100">
或
<a href="###" onclick="document.frame['frm'].location='1.txt'">txta>
<iframe name='frm' width=100 height=100>iframe>

或
<body>
<a href="###" onclick="document.all.frm.src='1.txt'">txta>
<iframe id='frm' width=100 height=100>iframe>
body>
或
<iframe name="tesion" width=100 height=100 src="">iframe>
<a href="a.txt" target="tesion">连接a>
阅读(1522) | 评论(0) | 转发(0) |
0

上一篇：HTML、CSS里面关于 id、class、name 属性的区别和用法

下一篇：JavaScript实用的一些技巧

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6