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 相关文章推荐
用javascript父窗口控制只弹出一个子窗口
Apr 10 Javascript
一个用js实现的页内搜索代码
May 23 Javascript
JQuery 1.4 中的Ajax问题
Jan 23 Javascript
js中substring和substr的详细介绍与用法
Aug 29 Javascript
node.js中的forEach()是同步还是异步呢
Jan 29 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 Javascript
通过实例学习React中事件节流防抖
Jun 17 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
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
php无限极分类实现方法分析
2019/07/04 PHP
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
遗传算法之Python实现代码
2017/10/10 Python
python 读取文件并替换字段的实例
2018/07/12 Python
解决PyCharm import torch包失败的问题
2018/10/13 Python
NumPy中的维度Axis详解
2019/11/26 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
汉语专业应届生求职信
2013/10/01 职场文书
幼儿教师思想汇报
2014/01/10 职场文书
写给老师的表扬信
2014/01/21 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
思品教学工作总结
2015/08/10 职场文书