Copy the code code as follows:
<html>
<head>
<title></title>
<script>
/*
How to obtain the document node object:
*/
//The first one is obtained by id
function documentDemo(){
var tableNode = document.getElementById("tab_id");
tableNode.style.border = "5px solid #00ff00";
}
//Second, through the name attribute
function documentDemo2(){
var inputNode = document.getElementsByName("txt");
alert(inputNode.length);
alert(inputNode[0].value);
}
//The third type, through the tag name
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 object demonstration" onclick="documentDemo3()"><br/>
<div>
This is the content in the 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>This is a span area</span> <br/>
<a href="#">This is a hyperlink</a>
<body>
</html>