您的位置
主页 > 网站技术 > 语言编程 > » 正文

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

来源: 站长圈 点击:

如果要操作一个元素,首先要获取到它,下面为大家介绍下document节点对象的获取方式,有需要的朋友可以参考一下!

复制代码 代码如下:

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

.onep{ 

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

<p class="onep"> 

这是p中的内容 

</p> 

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




首页  - 关于站长圈  - 广告服务  - 联系我们  - 关于站长圈  - 网站地图  - 版权声明