JavaScript获取网页中HTML元素

Neil@Sung 2012-03-31

展开全文

JavaScript获取网页中HTML元素的几种方法分析,参考MSDN说明和W3C School

getElementById getElementsByName getElementsByTagName 大概介绍

　　getElementById ，getElementsByName ，getElementsByTagName

　　后两个是得到集合，byid只是得到单个对象

　　getElementById 的用法

　　举个例子：

　　同一页面内的引用方法:

　　1、使用id：

　　link1.href，返回值为http://homepage.yesky.com

　　2、使用name：

　　document.all.linkname1.href，返回值为http://homepage.yesky.com

　　3、使用sourseIndex：

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

　　4、使用链接集合：

　　document.anchors(0).href

　　//全部的集合有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介绍。

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

5、getElementById：

　　document.getElementById("link1").href

　　6、getElementsByName：

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

　　7、getElementsByTagName：

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

　　8、tags集合：

　　document.all.tags("A")[0].href

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

　　除此之外：

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

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

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

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

　　上面是同一页面内的常见引用方法，另外还涉及到不同页面中的

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

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

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

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

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

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

　　也有例外:

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

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

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

　　注意getElementsByName 有s在里面

　　document.getElementById()可以控制某个id的tag

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

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

　　同一个name可以有多个element，所以用document.getElementsByName("theName")

　　他return 一个collection，引用的时候要指名index

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

　　id那个，是唯一的

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

文件对象：
代表当前HTML对象，是由<body>标签组构成的，对每个HTML文件会自动建立一个文件对象。
格式：
document.属性
document.方法（参数）

文件对象的属性：

linkColor	设置超链接的颜色
alinkColor	作用中的超链接的颜色
vlinkColor	链接的超链接颜色
links	以数组索引值表示所有超链接
URL	该文件的网址
anchors	以数组索引值表示所有锚点
bgColor	背景颜色
fgColor	前景颜色
classes	文件中的class属性
cookie	设置cookie
domain	指定服务器的域名
formName	以表单名称表示所有表单
forms	以数组索引值表示所有表单
images	以数组索引值表示所有图像
layers	以数组索引值表示所有layer
embeds	文件中的plug-in
applets	以数组索引值表示所有applet
plugins	以数组索引值表示所有插件程序
referrer	代表当前打开文件的网页的网址
tags	指出HTML标签的样式
title	该文档的标题
width	该文件的宽度（px）
lastModified	文件最后修改时间

文件对象的方法：

captureEvents(事件)	设置要获取指定的事件
close()	关闭输出字符流，强制显示数据内容
getSelection()	取得当前选取的字串
handleEvent(事件)	使事件处理器生效
open([mimeType,[replace]])	打开字符流
releaseEvents(事件类型)	释放已获取的事件
routeEvent(事件)	传送已捕捉的事件
write(字串)	写字串或数值到文件中
writeln(字串)	分行写字串或数值到文件中（<pre>..</pre>）

锚点对象：
网页中的锚点均会被自动看作锚点对象，并依顺序，分别表示为document.anchors[0]，document.anchors[1]...
定义锚点对象的格式：
字串.anchor(属性)
锚点对象的属性：

name 锚点名称
text 锚点字串

链接对象：
网页中的链接均会被自动看作链接对象，并依顺序，分别表示为document.links[0]，document.links[1]...
定义链接对象的格式：
字串.link(属性)
链接对象的属性：

hash URL中的锚点名称
host 主机域名或IP地址
hostname URL中的host+port
href 完整的URL字串
pathname URL中path部分
port URL中端口部分
protocol URL中通讯协议部分
search URL中查询字串部分
target 代表目标的窗口
text 表示A标签中的文字
x 链接对象的左边界
y 链接对象的右边界