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 相关文章推荐
SWFObject Flash js调用类
Jul 08 Javascript
js 对小数加法精度处理示例说明
Dec 27 Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
Mar 13 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 Javascript
require.js的用法详解
Oct 20 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
vue.js实现刷新当前页面的方法教程
Jul 05 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
Sep 12 Javascript
flexible.js实现移动端rem适配方案
Apr 07 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
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
js中hash和ico的关联分析
2015/02/05 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
Python抓取框架 Scrapy的架构
2016/08/12 Python
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
在python中使用nohup命令说明
2020/04/16 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
python中字符串的编码与解码详析
2020/12/03 Python
Python之多进程与多线程的使用
2021/02/23 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
一款利用html5和css3实现的3D滚动特效的教程
2015/01/04 HTML / CSS
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
高级技校毕业生自荐信
2013/11/18 职场文书
综合办公室个人的自我评价
2013/12/22 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
学习教师法的心得体会
2014/09/03 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
护士长2014年终工作总结
2014/11/11 职场文书