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"); 调用
相关推荐
在分析网页时,我们主要关注以下几种获取元素的方法: 1. **DOM(Document Object Model)操作**:DOM是HTML或XML文档的结构化表示,它将网页内容转化为树形结构。通过JavaScript,我们可以利用DOM API来查找、修改...
本文将详细介绍如何使用JavaScript获取表格中td元素的值,并通过实例分析一些操作技巧。 首先,当需要获取表格中多个行的任意td值时,可以为每个td元素分配一个共同的class。这样做的好处是可以通过class来选取所有...
JavaScript获取HTML DOM节点元素的方法是Web开发中的基础技能,尤其是在动态更新页面内容时。本文将对几种常见的DOM操作方法进行详细解释。 首先,我们可以通过顶层的`document`对象来获取元素: 1. `document....
插入HTML元素主要涉及以下几种方法: 1. **createElement()**: 这个方法创建一个新的HTML元素。例如,如果你想要创建一个`<p>`元素,你可以使用`document.createElement('p')`。 2. **innerHTML**: 这个属性可以让...
本文将详细介绍在JavaScript中获取HTML DOM元素的八种常用方法,这些方法在实际开发中有着广泛的应用,能够帮助开发者有效地管理和操作网页元素。 1. 通过ID获取(getElementById) getElementById是document对象的...
JavaScript提供了多种方式来获取HTML元素,并对其进行修改。其中一种常用的方式是`document.getElementById()`,它可以返回具有指定ID的第一个对象的引用。例如: ```javascript var element = document....
本文将介绍几种JavaScript获取文件大小的方法。 首先,我们来看方法一,使用ActiveX控件。这种方法适用于Internet Explorer浏览器,通过创建`ActiveXObject("Scripting.FileSystemObject")`来访问文件系统对象,...
在JSP或任何基于Web的技术中,通过JavaScript操作DOM来获取具有特定属性的HTML元素是一种常见的需求。理解DOM模型、HTML标签和JavaScript语法是完成这一任务的基础。在实际应用中,应确保遵循Web标准,如避免在同一...
网页抓取技术是一种获取网页内容的方法,通常用于数据挖掘、备份、分析或创建离线浏览体验。本话题主要关注如何抓取网页上的图片、CSS(层叠样式表)和JavaScript文件,以及处理CSS中内联的图片资源。下面将详细讨论...
在Web开发中,经常需要获取HTML元素的实际宽度和高度,这些尺寸信息对于页面布局和响应式设计至关重要。文档中提供的方法是使用JavaScript(简称js)来实现这一功能。为了深入理解和掌握这些知识点,我们需要从几个...
本文将深入探讨几种常用的JS获取元素的方法及其在动态和静态环境中的应用。 首先,`getElementById()`是获取元素的最常见方式之一。这个方法通过指定的ID来查找元素,返回的是匹配的首个Element对象。如果文档中...
HTML网页扒取工具是一种高效的方法,用于批量获取网页上的HTML、CSS、JavaScript和图像资源,大大简化了网页内容的下载和存储过程。这种工具对于网页设计师、开发者、数据抓取人员以及想要离线查看网页内容的用户来...
标题中的“Javascript获取相同CSS样式的元素”是一个关于JavaScript编程的话题,主要涉及到如何在JavaScript中检索和操作具有相同CSS样式的HTML元素。在Web开发中,JavaScript常常用于动态地改变页面样式,或者根据...
综上所述,这个工具结合了HTML元素解析、JavaScript交互和文本提取技术,为Web开发者和数据分析师提供了一种便利的手段,帮助他们快速获取网页上的文本信息。使用这个工具时,用户需要注意其兼容性、使用方法以及...
首先,我们需要了解获取HTML源代码的几种常见方法: 1. **浏览器开发者工具**:大多数现代浏览器都内置了开发者工具,如Chrome的DevTools。在浏览器中打开目标网页,右键点击并选择“检查”或按下F12键,即可查看...
在介绍JavaScript获取滚动距离的方法时,首先要了解的是页面滚动条的机制和页面布局相关的一些基本概念。在Web开发中,页面的滚动一般指的是当页面内容超出了视窗(视图区域)的大小时,用户可以使用滚动条来查看未...
根据提供的文件内容,本文将详细解释如何使用JavaScript来获取HTML表格中的行数、列数以及具体...以上就是关于使用JavaScript获取HTML表格内容的详细说明。希望这些内容能够帮助到正在学习或工作中遇到类似问题的朋友。
在JavaScript(简称JS)编程中,获取城市列表是一项常见的任务,尤其在开发涉及地理信息的Web应用时。这里,我们主要关注两个文件:`city.html` 和 `city.js`。`city.html` 可能是网页的主体部分,用于展示城市列表...
正则表达式是一种强大的文本处理工具,用于在字符串中匹配特定模式。在互联网时代,它在获取网页资源,如HTML、CSS、JavaScript和图片等方面扮演着重要角色。本篇文章将详细探讨如何使用正则表达式来提取这些关键...