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 数组运用实现代码
Apr 13 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
Javascript中的call()方法介绍
Mar 15 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
JavaScript实现移动端带transition动画的轮播效果
Mar 24 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数据库类
2009/05/27 PHP
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
JQUERY操作JSON实例代码
2010/02/09 Javascript
Textarea根据内容自适应高度
2013/10/28 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
jQuery Ajax调用WCF服务详细教程
2015/03/31 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
python实现划词翻译
2020/04/23 Python
python抓取网页内容示例分享
2014/02/24 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
Python进程池Pool应用实例分析
2019/11/27 Python
python实现FTP循环上传文件
2020/03/20 Python
Python调用C语言程序方法解析
2020/07/07 Python
Python排序函数的使用方法详解
2020/12/11 Python
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
实习评语
2013/12/16 职场文书
小学生检讨书大全
2014/02/06 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL
python实现Nao机器人的单目测距
2021/09/04 Python
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers