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对象[0]是什么含义?
Jul 31 Javascript
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
ES6中Array.includes()函数的用法
Sep 20 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 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
关于PHP5 Session生命周期介绍
2010/03/02 PHP
PHP clearstatcache()函数详解
2010/03/02 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
Zend Framework开发入门经典教程
2016/03/23 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
php连接微软MSSQL(sql server)完全攻略
2016/11/27 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
layui table数据修改的回显方法
2019/09/04 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
Python操作SQLite简明教程
2014/07/10 Python
Ubuntu下安装PyV8
2016/03/13 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
django 模版关闭转义方式
2020/05/14 Python
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
国窖1573广告词
2014/03/21 职场文书
会计实训报告范文
2014/11/04 职场文书
商务邀请函
2015/01/30 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python
使用Redis实现实时排行榜功能
2021/07/02 Redis
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python