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

最新推荐文章于 2024-08-14 17:45:54 发布

原创最新推荐文章于 2024-08-14 17:45:54 发布 · 9.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#table #input #div #function #html #c

dhtml 专栏收录该内容

2 篇文章

订阅专栏

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

示例 html代码：

</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使用