如何通过js获取表单对象?

本文介绍如何通过JavaScript在HTML中定位元素,包括从页面点击表单元素获取相关信息、以指定对象为参照获取子对象和父对象的方法。适用于网页开发人员学习和参考。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

示例 html代码:

<div id ="div1">
<table id="table1"> 
    
<tr><td> 
        
<table id="table2"> 
            
<tr id ="tr1"><td id="td1"><input id ="input1" name="name" value="niexiong" onclick="mouseOver()">123</td></tr> 
            
<tr id ="tr2"><td id="td2">456</td></tr> 
        
</table> 
    
</td></tr> 
</table>   
</div>

一、从页面点击表单元素,获取其他相关表单信息

//从页面点击表单元素,获取其他相关表单信息
function mouseOver(){
  
var lObj;
  
if(event){
  lObj
=event.srcElement;   
  
while(lObj && lObj.tagName!="INPUT") lObj=lObj.parentNode; 
  }

  
var aa =lObj.id;
  alert(aa);
}

二、以某个对象为参照,获取子对象

//得到table2的id
alert(document.getElementById("table1").rows[0].cells[0].childNodes[0].id);

//获取内容
alert(document.getElementById("table1").rows[0].cells[0].childNodes[0].rows[0].cells[0].innerText);
alert(document.getElementById(
"table1").rows[0].cells[0].childNodes[0].rows[0].cells[0].innerHTML);
//可以通过childNodes获取
alert(document.getElementById("table1").childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].innerText );

//获得td1行号
alert(document.getElementById("table1").rows[0].cells[0].childNodes[0].rows[0].cells[0].cellIndex);
//获得tr1行号
alert(document.getElementById("table1").rows[0].cells[0].childNodes[0].rows[0].rowIndex);

三、以某个对象为参照,获取父对象

//获取父对象,以input1为例:
//
td1
alert(document.getElementById("input1").parentNode.id);
//tr1
alert(document.getElementById("input1").parentNode.parentNode.id);
//table2 
alert(document.getElementById("input1").parentNode.parentNode.parentNode.parentNode.id);
//获取tr2
alert(document.getElementById("input1").parentNode.parentNode.parentNode.parentNode.childNodes[0].childNodes[1].id);
//获取456
alert(document.getElementById("input1").parentNode.parentNode.parentNode.parentNode.childNodes[0].rows[1].cells[0].innerText);

四、注意

//注意获取父对象以tr1例:<table><tr> 关系有2层父关系(不理解)
//alert(document.getElementById("tr1").parentNode.parentNode.id);
//parentNode :W3C DOM使用
//parentElement DHTML DOM使用

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值