getElementById getElementsByName getElementsByTagName 大概介绍

　　getElementById ，getElementsByName ，getElementsByTagName

###adv###

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

　　getElementById 的用法

　　举个例子:

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

　　同一页面内的引用方法:

　　1、使用id:

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

　　2、使用name:

　　document.all.link1.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("link1")[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 这类方法所得到的结果都是集合.

　　例:

以下是引用片段：
<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()这个方法.它对一个和多个的处理是一样的,我们可以用:

　　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"); 调用

JS获取网页中HTML元素的几种方法分析的更多相关文章

  1. JS基础入门篇（ 三 ）—使用JS获取页面中某个元素的4种方法以及之间的差别（ 一 ）

    1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...

  2. JS去除数组中重复值的四种方法

    JS去除数组中重复值的四种方法 1 /// <summary>            o[this[i]] = "";  }      }       newArr.p ...

  3. php获取数组中重复数据的两种方法

    分享下php获取数组中重复数据的两种方法. 1,利用php提供的函数,array_unique和array_diff_assoc来实现 <?php function FetchRepeatMem ...

  4. PHP从数组中删除元素的四种方法实例

    PHP从数组中删除元素的四种方法实例 一.总结 一句话总结:unset(),array_splice(),array_diff(),array_diff_key() 二.PHP从数组中删除元素的四种方 ...

  5. js 获取iframe中的元素

    今天要修改编辑器插件中的元素遇到的问题 jquery 在父窗口中获取iframe中的元素 1.Js代码 格式:$("#iframe的ID").contents().find(&qu ...

  6. C#获取网页中某个元素的位置，并模拟点击

    我们在开发中,往往要得到网页中某个元素的位置,并且点击它.要模拟一次鼠标点击并不难,只要调用一个API就行了,关键就是怎么样得到这个元素的位置,还有判断是否要滚动滚动条,要滚动多少行能让元素显示出来. ...

  7. js获取iframe中的元素以及在iframe中获取父级的元素（包括iframe中不存在name和id的情况）

      第一种情况:iframe中不存在name和id的方法:(通过contentWindow获取) var iframe = document.getElementsByTagName('iframe' ...

  8. 网页中插入javascript的几种方法

    网页中插入javascript的方法常见的有两种: 一.直接使用html标记 JavaScript 可以出现在 html的任意地方.使用标记<script>…</script> ...

  9. python-----删除列表中某个元素的3种方法

    python中关于删除list中的某个元素,一般有三种方法:remove.pop.del: 1.remove: 删除单个元素,删除首个符合条件的元素,按值删除举例说明: >>> st ...

随机推荐

  1. 全局变量引起的BUG

    花费3个小时解决了一个问题,时间比较长. 这次问题的原因是全局变量引起的,一个实例的函数用到了全局变量计算一个值,而全局变量的这个值会进行改变,所以在不同时期算出来的值是不一致的.而调用这个实例函数的 ...

  2. java多线程并发编程

    Executor框架 Executor框架是指java 5中引入的一系列并发库中与executor相关的一些功能类,其中包括线程池,Executor,Executors,ExecutorService ...

  3. Android WebView中显示一张或多张图片

    最近需要在平板中显示多张图片,调查了下,决定用WebView(说实话,我还不清楚有没有其他android控件能够显示多张图片的.....), 主要是用HTML的img来显示多张图片. google百度 ...

  4. 自动安装memcached服务端与PHP扩展Memcached

    该脚本基于阿里云服务器安装脚本,并只能运用于centos / aliyun os,该脚本使用时,需要与阿里云安装脚本的install.sh放在同一目录下.有缘人切忌乱用: #! /bin/bash # ...

  5. Asp.net MVC 单元测试 简要笔记

    首先要啰嗦几句. 单元测试是TDD的重要实践方法,也是代码质量的一种保证手段.在项目的工程化开发中,研发人员应该尽量保证书写Unit Test,即使不使用TDD. (VS中,我们可以直接使用微软提供的 ...

  6. memcached and redis

    http://hzp.iteye.com/blog/1872664 http://www.diggerplus.org/archives/190 Redis

  7. magento数据添加

    1.第一种方法是一个字段一个字段地添加! $record = Mage::getModel('warehouse/record');      $record->addData($postDat ...

  8. HDU 1896 Stones (优先队列)

    Problem Description Because of the wrong status of the bicycle, Sempr begin to walk east to west eve ...

  9. 【Sort】QuickSort

    快速排序,平均运行时间O(N log N),最坏运行时间O(N^2). 我觉得先看Python版的快排算法(http://www.cnblogs.com/fcyworld/p/6160558.html ...

  10. HTML5根据浏览器获取经度和纬度（百度API）

    网页获取用户位置信息的办法1 调用百度地图的地图标注功能,通过百度地图API获取对应的经度和纬度进而获取地区信息 优点是比较准确,缺点是需要用户自己选择位置2 通过H5 geolocation属性获取 ...