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 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
JavaScript获得选中文本内容的方法
Dec 02 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
Nov 08 Javascript
使用jQuery jqPlot插件绘制柱状图
Dec 18 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
Vue.js实现网格列表布局转换方法
Aug 25 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
实例讲解JavaScript预编译流程
Jan 24 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 Javascript
vue项目中将element-ui table表格写成组件的实现代码
Jun 12 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
JavaScript Dom实现轮播图原理和实例
Feb 19 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新手上路(三)
2006/10/09 PHP
PHP DataGrid 实现代码
2009/08/12 PHP
php实现监控varnish缓存服务器的状态
2014/12/30 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
php在数据库抽象层简单使用PDO的方法
2015/11/03 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
Vue中img的src属性绑定与static文件夹实例
2017/05/18 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
详解Vue路由自动注入实践
2019/04/17 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
express框架下使用session的方法
2019/07/31 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python遍历小写英文字母的方法
2019/01/02 Python
使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)
2019/05/28 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
Django 多对多字段的更新和插入数据实例
2020/03/31 Python
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
公司司机岗位职责
2014/02/07 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python
JavaScript实例 ODO List分析
2022/01/22 Javascript