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

全部博文(92)

文章存档

2011年(1)

2008年(91)

我的朋友

分类: 系统运维

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,<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的几种方法
<href="#" onclick="window['yourIframeId'].src='a.txt'">
<href=:"#" onclick="javascript:window.open('a.txt','tarpage','')">aaa>
<iframe name="tarpage" width="100" height="100">
<href="###" onclick="document.frame['frm'].location='1.txt'">txta>
<iframe name='frm' width=100 height=100>iframe>

<body>
<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>
<href="a.txt" target="tesion">连接a>
阅读(1521) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~