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

发布时间：2023-09-05 14:26:24 所属栏目：教程来源：

导读：代码如下:

<html>

<head>

<title></title>

<script>

/*

document节点对象的获取方式：

*/

//第一种，通过id获取

function documentDemo(){

var tableNode = document.getEl

代码如下:

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

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!