进入旧版 | 服务项目 | 成功案例 | 联系方式 | 过客留言 | 友情链接
   
设为首页
加入收藏
联系我们
网站首页 | 新闻资讯 | 操作系统 | 办公软件 | 网络软件 | 工具软件 | 媒体动画 | 网页制作 | 网站开发 | 程序开发 | 平面设计
Photoshop视频教程 | Word入门 | Flash入门 | JScript | VBScript | ASP | PHP | ADO | 网页特效 | 3DS MAX6.0命令 | 系统进程
您当前的位置:GOODSGY电脑学习网 -> 网站开发 -> JavaScript -> 文章内容  
JS获取网页中HTML元素的几种方法分析

getElementById getElementsByName getElementsByTagName 大概介绍www.goodsgy.com

  getElementById ,getElementsByName ,getElementsByTagNamewww.goodsgy.com

www.goodsgy.com

  后两个是得到集合,byid只是得到单个对象www.goodsgy.com

  getElementById 的用法www.goodsgy.com

  举个例子:www.goodsgy.com

  <a id="link1" name="link1" href=http://homepage.yesky.com>网页陶吧</a>www.goodsgy.com

  同一页面内的引用方法:www.goodsgy.com

  1、使用id:www.goodsgy.com

  link1.href,返回值为http://homepage.yesky.comwww.goodsgy.com

  2、使用name:www.goodsgy.com

  document.all.link1.href,返回值为http://homepage.yesky.comwww.goodsgy.com

  3、使用sourseIndex:www.goodsgy.com

  document.all(4).href //注意,前面还有HTML、HEAD、TITLE和BODY,所以是4www.goodsgy.com

  4、使用链接集合:www.goodsgy.com

  document.anchors(0).hrefwww.goodsgy.com

  //全部的集合有all、anchors、applets、areas、attributes、behaviorUrns、 bookmarks、boundElements、cells、childNodes、children、controlRange、elements、 embeds、filters、forms、frames、images、imports、links、mimeTypes、options、 plugins、rows、rules、scripts、styleSheets、tBodies、TextRectangle,请参考MSDN介绍。www.goodsgy.com

  其实方法3和方法4是一样使用的集合,只是一个是all,可以包括页面所有标记,而anchors只包括链接。www.goodsgy.com

  5、getElementById:www.goodsgy.com

  document.getElementById("link1").hrefwww.goodsgy.com

  6、getElementsByName:www.goodsgy.com

  document.getElementsByName("link1")[0].href //这也是一个集合,是所有name等于该方法所带参数的标记的集合www.goodsgy.com

  7、getElementsByTagName:www.goodsgy.com

  document.getElementsByTagName("A")[0].href //这也是一个集合,是所有标记名称等于该方法所带参数的标记的集合www.goodsgy.com

  8、tags集合:www.goodsgy.com

  document.all.tags("A")[0].hrefwww.goodsgy.com

  //与方法7一样是按标记名称取得一个集合www.goodsgy.com

  除此之外:www.goodsgy.com

  event.scrElement可以获得触发时间的标记的引用;www.goodsgy.com

  document.elementFromPoint(x,y)可以获得x和y坐标处的元素的引用;www.goodsgy.com

  document.body.componentFromPoint(event.clientX,event.clientY)可以获得鼠标所在处元素的引用;www.goodsgy.com

  还可以通过元素的父子节点和兄弟节点关系来引用,如nextSibling(当前节点的后一节点)、previousSibling(当前节点的前一节点)、childNodes、children、firstChild、lastChild、parentElement等都是父子节点和兄弟节点的一些引用;还不仅限于此。www.goodsgy.com

  上面是同一页面内的常见引用方法,另外还涉及到不同页面中的www.goodsgy.com

  getElementsByName返回的是所有name为指定值的所有元素的集合www.goodsgy.com

  “根据 NAME 标签属性的值获取对象的集合。”www.goodsgy.com

  集合比数组要松散的多, 集合里每个子项的类型可以不同, 集合只是把某些元素放在一起作为一类来使用, 相比之下数组就严格多了, 每个子项都是统一的类型. document.getElementsByName, document.getElementsByTagName, document.formName.elements 这类方法所得到的结果都是集合.www.goodsgy.com

  例:www.goodsgy.com

www.goodsgy.com

以下是引用片段:
<html>
<head>
<title>fish</title>
<script language="javascript">
function get(){
var xx=document.getElementById("bbs")
alert("标记名称:"+xx.tagName);
}
function getElementName(){
var ele = document.getElementsByName("happy");
alert("无素为happy的个数:" + ele.length);
}
</script></head>
<body>
<h2 id="bbs">获取文件指定的元素</h2>
<hr>
<form>
<input type="button" onclick="get()" value="获取标题标记">
<input type="button" name="happy" onclick="getElementName()" value="click "><input type="button" name="happy" onclick="getElementName()" value="click "><input type="button" name="happy" onclick="getElementName()" value="click "><input type="button" name="happy" onclick="getElementName()" value="click "><input type="button" name="happy" onclick="getElementName()" value="click ">
</form>
</body>
</html>

  document.getElementsByName()这个方法.它对一个和多个的处理是一样的,我们可以用:www.goodsgy.com

  Temp = document.getElementsByName('happy')来引用www.goodsgy.com

  当Temp只有1个的时候,那么就是Temp[0],有多个的时候,用下标法Temp[i]循环获取www.goodsgy.com

  也有例外:www.goodsgy.com

  在ie 中getElementsByName(“test“)的时候返回的是id=test的object数组,而firefox则返回的是name= test的object的数组。www.goodsgy.com

  按照w3c的规范应该是返回的是name= test的object的数组。www.goodsgy.com

  firefox和ie中的getElementByID相同:获取对 ID 标签属性为指定值的第一个对象的引用。www.goodsgy.com

  注意getElementsByName 有s在里面www.goodsgy.com

  document.getElementById()可以控制某个id的tagwww.goodsgy.com

  document.getElementsByName(),返回的是一个具有相同 name 属性的元素的集合,而不是某个,注意有“s”。www.goodsgy.com

  而 document.getElementsByTagName() 返回的是一组相同 TAG 的元素集合。www.goodsgy.com

  同一个name可以有多个element,所以用document.getElementsByName("theName")www.goodsgy.com

  他return 一个collection,引用的时候要指名indexwww.goodsgy.com

  var test = document.getElementsByName('testButton')[0];www.goodsgy.com

  id那个,是唯一的www.goodsgy.com

  还应该注意:对类似没有name属性,对它name属性为伪属性document.getElementsByName() 会失效,当然TD可以设置ID属性,然后用 document.getElementsByID("DDE_NODAY"); 调用www.goodsgy.com

在百度中搜索:JS获取网页中HTML元素的几种方法分析
在Google中搜索:JS获取网页中HTML元素的几种方法分析
在Yahoo中搜索:JS获取网页中HTML元素的几种方法分析

收藏到网摘:新浪VIVI 365key 我摘 POCO网摘 博采中心 YouNote 和讯网摘 天天收藏
[] [返回上一页] [打 印] [收 藏]

 相关文章    最新文章
· 用JS解决网站防挂iframe木马的方案
· JSF框架中使用的设计模式介绍
· 提升JSP页面响应速度的七大秘籍绝招
· IE浏览器中一个值得关注的JS问题
· 在JS中使用RecordSet对象的GetRows方法
· 服务端VBScript与JScript几个相同写法
· JS的IE和Firefox兼容性汇编
· 链接中的JS 特效功能代码大放送
· 一段非常简单的让图片自动切换js代码
· javascript:JS实现的滑动展开与折叠效果
 
· 用JS解决网站防挂iframe木马的方案
· 技巧 JavaScript常用判断函数
· IE浏览器中一个值得关注的JS问题
· 简易实现DIV圆角的JavaScript代码
· Javascript调用XML制作连动下拉框
· Javascript实现页内查找关键词实例
· JavaScript的系统函数学习
· JavaScript仿Windows关机效果
· javascript弹出窗口问题总结
· 在JS中使用RecordSet对象的GetRows方法

∷相关文章评论∷    (评论内容只代表网友观点,与本站立场无关!) [更多评论…]
站内搜索

精彩图文
  网站导航  
操作系统 办公软件 网络软件
Vista Windows2003 WindowsXP Windows2000/NT Windows9X/ME Linux 其他 Word Excel Powerpoint Outlook 金山系列 其他 网页浏览 上传下载 联络聊天 邮件工具 服务器软件 网络辅助
工具软件 媒体动画 网页制作
系统工具 媒体工具 压缩工具 图文处理 文件管理 其他 3DMAX Authorware Director Maya 视频处理 其他 Flash Dreamweaver FireWorks FrontPage LiveMotion Golive HTML/CSS 其它
网站开发 平面设计 程序设计
ASP JSP PHP CGI JavaScript VBScript XML/SOAP Web服务器 Photoshop PhotoImpact CorelDraw Illustrator Freehand 设计欣赏 其他 VB VC .NET C/C++ DELPHI JAVA

冀ICP备05019428号
Copyright © 2004-2008 电脑学习网 Inc.All rights reserved.
TEL:13832340607
QQ:39873155
E_Mail:goodsgy(#)hotmail.com   (把(#)替换成@)
MSN:goodsgy(#)hotmail.com   (把(#)替换成@)