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


Posted in Javascript onDecember 24, 2013
<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>
Javascript 相关文章推荐
javascript英文日期(有时间)选择器
May 02 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
js中关于String对象的replace使用详解
May 24 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 Javascript
angular 用Observable实现异步调用的方法
Dec 27 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 #Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 #Javascript
jquery自动切换tabs选项卡的具体实现
Dec 24 #Javascript
从数组中随机取x条不重复数据的JS代码
Dec 24 #Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 #Javascript
JS控制图片等比例缩放的示例代码
Dec 24 #Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 #Javascript
You might like
PHP实现的功能是显示8条基色色带
2006/10/09 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
js下获取div中的数据的原理分析
2010/04/07 Javascript
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
防止文件缓存的js代码
2013/01/10 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
jQuery实现加入购物车飞入动画效果
2015/03/14 Javascript
javascript中Array()数组函数详解
2015/08/23 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
Flask解决跨域的问题示例代码
2018/02/12 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
django 模型中的计算字段实例
2020/05/19 Python
全球性的在线购物网站:Zapals
2017/03/22 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
物理专业大学生职业生涯规划书
2014/02/07 职场文书
初中班主任评语
2014/04/24 职场文书
爱护草坪标语
2014/06/24 职场文书
2015年入党决心书
2015/02/05 职场文书
商场广播稿范文
2015/08/19 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android