JS获取网页中HTML元素的几种方法分析 - javascript -

JS获取网页中HTML元素的几种方法分析

时间:2013-04-15 14:10:26   来源:   评论:加载中...   点击:加载中...
getElementById getElementsByName getElementsByTagName 大概介绍g...

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>


相关热词搜索:

 
上一篇:一组常用的弹出窗口用法总结
下一篇:网页最简短的拖动对象代码实例演示
收藏 将此文推荐给朋友
分享到: