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 避免闭包引发的问题
Mar 17 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 Javascript
使用node.js 获取客户端信息代码分享
Nov 26 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 Javascript
浅谈js中对象的使用
Aug 11 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
ES6中Symbol、Set和Map用法详解
Aug 20 Javascript
layui 表格操作列按钮动态显示的实现方法
Sep 06 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
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
php常用Stream函数集介绍
2013/06/24 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
php生成Android客户端扫描可登录的二维码
2016/05/13 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
深入解析contentWindow, contentDocument
2013/07/04 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
js数据类型检测总结
2018/08/05 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
python爬取youtube视频的示例代码
2021/03/03 Python
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
建筑毕业生自我鉴定
2013/10/18 职场文书
会计专业自荐信范文
2013/12/02 职场文书
试用期辞职信范文
2015/03/02 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
和领导吃饭祝酒词
2015/08/11 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang
用python开发一款操作MySQL的小工具
2021/05/12 Python