手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >document节点对象的获取方式示例介绍
document节点对象的获取方式示例介绍
摘要:复制代码代码如下:/*document节点对象的获取方式:*///第一种,通过id获取functiondocumentDemo(){vart...

复制代码 代码如下:

<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对象演示"><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>

【document节点对象的获取方式示例介绍】相关文章:

JS/Jquery判断对象为空的方法

AngularJS中的一些常用指令介绍

srcElement表格样式

javascript中createElement的两种创建方式

JavaScript的9种继承实现方式归纳

JavaScript动态添加style节点的方法

Javascript节点关系实例分析

JS对字符串编码的几种方式使用

js跨域请求的5中解决方式

JavaScript中的fontsize()方法使用介绍

精品推荐
分类导航