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 相关文章推荐
传递参数的标准方法(jQuery.ajax)
Nov 19 Javascript
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 Javascript
详解JQuery基础动画操作
Apr 12 jQuery
分享一个vue项目“脚手架”项目的实现步骤
May 26 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 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
《心理测量者3》剧场版动画预告
2020/03/02 日漫
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
JavaScript实现图片DIV竖向滑动的方法
2015/04/25 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
详解Python中with语句的用法
2015/04/15 Python
实例Python处理XML文件的方法
2015/08/31 Python
Python 安装第三方库 pip install 安装慢安装不上的解决办法
2019/06/18 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
python实现canny边缘检测
2020/09/14 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
雅虎笔试题(字符串操作)
2015/03/24 面试题
.net软件工程师面试题
2015/03/31 面试题
园艺师求职信
2014/04/27 职场文书
职代会闭幕词
2015/01/28 职场文书
个人自荐书怎么写
2015/03/26 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
党小组评议意见
2015/06/02 职场文书
草房子读书笔记
2015/06/29 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers