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篇
Oct 11 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
Sep 29 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 Javascript
jQuery超赞的评分插件(8款)
Aug 20 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
JS实现简易的图片拖拽排序实例代码
Jun 09 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
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
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
python操作MongoDB基础知识
2013/11/01 Python
python装饰器与递归算法详解
2016/02/18 Python
Python实现购物车程序
2018/04/16 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
Python3随机漫步生成数据并绘制
2018/08/27 Python
python对日志进行处理的实例代码
2018/10/06 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
惊艳的手工时装首饰:Migonne Gavigan
2018/02/23 全球购物
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
检举信的格式及范文
2014/04/04 职场文书
护士求职信范文
2014/05/24 职场文书
中秋晚会致辞
2015/07/31 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫