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

前端技术 2023/09/05 JavaScript
复制代码 代码如下:

<html>
<head>
<title></title>
<script>

/*
document节点对象的获取方式：

*/
//第一种，通过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>

本文地址：https://www.stayed.cn/item/12398

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案