document节点对象的获取方式示例介绍

时间：2021-05-28

复制代码 代码如下:
<html>
<head>
<title></title>
<script>


//第一种，通过id获取
function documentDemo(){
var tableNode = document.getElementById("tab_id");
tableNode.style.border = "5px solid #00ff00";
}
//第二种，通过name属性
function documentDemo2(){
var inputNode = document.getElementsByName("txt");
alert(inputNode.length);
alert(inputNode[0].value);

}
//第三种，通过标签名
function documentDemo3(){
var tdNode = document.getElementsByTagName("td");
alert(tdNode.length);
for(var x = 0 ; x < tdNode.length;x++){
alert(tdNode[x].innerText);
}
}
</script>

<style type="text/css">
.onediv{
width:200px;
height:100px;
border:1px solid #f00;
margin-top:20px;
}

table ,td{
border:1px solid #00f;
width:200px;
margin-top:20px;
text-align:center;
}
</style>

</head>

<body>
<input type="button" value="document对象演示" onclick="documentDemo3()"><br/>
<div class="onediv">
这是div中的内容
</div>

<input type="txt" name="txt" >
<input type="txt" name="txt" >


<table cellspacing="0" id="tab_id">
<tr>
<td>java</td>
<td>php</td>
</tr>
<tr>
<td>.net</td>
<td>ios</td>
</tr>
</table>

<span>这是一个span区域</span> <br/>
<a href="#">这是一个超链接</a>
<body>

</html>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章