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

Javascript教程 2025-08-08

复制代码代码如下:

< 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 >

这是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 >