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 相关文章推荐
JQuery 1.4 中的Ajax问题
Jan 23 Javascript
JavaScript Timer实现代码
Feb 17 Javascript
JQuery中each()的使用方法说明
Aug 19 Javascript
jQuery EasyUI API 中文文档 搜索框
Sep 29 Javascript
js跳转页面方法总结
Jan 29 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
解决vue-cli中stylus无法使用的问题方法
Jun 19 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
js+css实现打字效果
Jun 24 Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 Javascript
利用JS判断元素是否为数组的方法示例
Jan 08 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
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
用PHP的ob_start();控制您的浏览器cache!
2006/11/25 PHP
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
jquery dialog键盘事件代码
2010/08/01 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
常用DOM整理
2015/06/16 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
js实现简易聊天对话框
2017/08/17 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
webpack分离css单独打包的方法
2018/06/12 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
Python方法的延迟加载的示例代码
2017/12/18 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
python中关于数据类型的学习笔记
2020/07/19 Python
adidas美国官网:adidas US
2016/09/21 全球购物
教师求职信范文分享
2013/12/27 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
蜗居观后感
2015/06/11 职场文书
表扬信范文
2019/04/22 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers