javascript学习笔记(十八) 获得页面中的元素代码


Posted in Javascript onJune 20, 2012

1.获取元素

getElementById()方法,通过元素的id获取元素,接受一个参数即要获取元素的id,如果不存在这个id返回 null
注意不要让表单元素的name和别的元素的id相同,IE8以下的IE浏览器用这个方法通过元素的name属性可以获得该元素
以下面元素为例

<div id ="myDiv">这里是id为“myDiv”的div内容</div>var document.getElementById("myDiv"); //"myDiv"区分大小写,取得<div>元素的引用
getElementsByTagName()方法,通过元素的标签名获得元素,接受一个参数即要获取元素的标签名,返回包含0个或多个的NodeList

var images = document.getElementsByTagName("img"); //获取页面中的所有<img>元素 alert(images.length); //图像的数量 
alert(images[0].src); //第一个图片元素的src 
alert(images.item(0).src); //同上

getElementsByName()方法,通过元素的name属性获得元素,接受一个参数即要获取元素的name属性,常用来获取单选按钮
<ul> 
<li><input type="radio" name="color" value="red" id="colorRed"><label for="colorRed"></label></li> 
<li><input type="radio" name="color" value="green" id="colorGreen"><label for="colorGreen"></label></li> 
<li><input type="radio" name="color" value="blue" id="colorBlue"><label for="colorBlue"></label></li> 
</ul>var radios = document.getElementsByName("color"); //获取name="color"的所有单选按钮

2.获取元素子节点或元素子节点及其后代节点

<ul id="myList"> 
<li>项目一</li> 
<li>项目二</li> 
<li>项目三</li> 
</ul>

注意:IE认为<ul>元素有3个子节点,分别是3个元素,其他浏览器会认为有7个子节点,包括3个元素和4个文本节点,如果<ul>在一行中:

<ul id="myList"><li>项目一</li><li>项目二</li><li>项目三</li></ul>


任何浏览器都认为有3个子节点

获取元素的子节点:

var ul = document.getElementById("myList"); 
for (var i=0,len = ul.childNodes.length ; i < len ; i++ ) { 
if ( ul.childNodes.length[i].nodeType == 1) { //nodeType == 1 说明节点是元素节点,而不是文本节点 
//执行某些操作 
} 
}

获取元素的子节点及其后代节点:
var ul = document.getElementById("myList"); 
var items = ul.getElementsByTagName("li"); //li里的li也会被取得

3通过节点的属性查找其它节点
nextSibling属性指向当前节点的下一个兄弟节点
previousSibling属性指向当前节点的上一个兄弟节点
firstChild属性指向第一个子节点,lastChild指向最后一个子节点
childNodes保存着所有子节点(其实是NodeList对象),可以通过方括号的方法访问如 someNode.childNodes[0] 访问第一个子节点
parentNode属性指向父节点

节点关系如下:

javascript学习笔记(十八) 获得页面中的元素代码

NodeList是个数组对象,我们可以把它转换为数组,函数如下
function converToArray (nodes) { 
var arrary = null; 
try { 
array = Array.prototype.slice.call(nodes,0); 
} 
catch (ex) { 
array = new Array(); 
for (var i=0,len=nodes.length ; i<len ; i++) { 
array.push(nodes[i]); 
} 
} 
return array; 
} var div = document.getElementById("side"); 
alert(converToArray(div.childNodes));
Javascript 相关文章推荐
js实现收缩菜单效果实例代码
Oct 30 Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
javascript进行四舍五入方法汇总
Dec 16 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
Mar 26 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
JS字符串和数组如何实现相互转化
Jul 02 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 #Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 #Javascript
javascript学习笔记(十五) js间歇调用和超时调用
Jun 20 #Javascript
javascript学习笔记(十四) window对象使用介绍
Jun 20 #Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 #Javascript
javascript学习笔记(十二) RegExp类型介绍
Jun 20 #Javascript
javascript学习笔记(十一) 正则表达式介绍
Jun 20 #Javascript
You might like
第五节--克隆
2006/11/16 PHP
php zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
php全排列递归算法代码
2012/10/09 PHP
php实现加减法验证码代码
2014/02/14 PHP
php中实现精确设置session过期时间的方法
2014/07/17 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
href下载文件根据id取url并下载
2014/05/28 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
JavaScript自定义文本框光标
2017/03/05 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
Python使用plotly绘制数据图表的方法
2017/07/18 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
python创建文件备份的脚本
2018/09/11 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
Python devel安装失败问题解决方案
2020/06/09 Python
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
我有一个梦想演讲稿
2014/05/05 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
JS数组的常用方法整理
2021/03/31 Javascript
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript
使用JS实现简易计算器
2021/06/14 Javascript
python代码实现扫码关注公众号登录的实战
2021/11/01 Python
js 数组 fill() 填充方法
2021/11/02 Javascript
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL