Javascript获取网页中HTML元素的集中方法分析(组图)

　　Javascript获取网页中HTML元素的集中方法分析(组图)

　　如何通过js获取HTML元素节点本文关键词：节点，元素，获取，方法，js

　　js方法可获取HTML元素节点。本文简介：分析通过Javascript获取网页中HTML元素的集中方法。 getElementById，getElementsByName和getElementsByTagName将引入getElementById，getElementsByName和getElementsByTagName。

　　如何通过js获取HTML元素的节点

　　使用Javascript获取网页HTML元素的集中方法分析

　　getElementById

　　getElementsByName

　　getElementsByTagName

　　关于简介

　　getElementById

　　，getElementsByName

　　，getElementsByTagName

　　最后两个是要获取一个集合，而byid只能是一个对象

　　getElementById

　　用法

　　例如：

　　网络陶艺酒吧

　　如何在同一页面中引用：

　　1、使用ID：

　　link 1. href，返回值为

　　2、使用名称：

　　document.all.linkname 1. href，返回值为

　　3、使用sourseIndex：

　　document.all（4) .href

　　//请注意，前面有HTML，HEAD，TITLE和BODY，所以它是4

　　4、使用链接采集：

　　document.anchors（0) .href

　　//所有集合包括全部，锚点，小程序，区域，属性，behaviorUrns，书签，boundElements，单元格，childNodes，子项，controlRange，元素，嵌入，过滤器，表单，框架，图像，导入，链接，mimeTypes，选项，插件，行，规则，脚本，styleSheets，tBodies，TextRectangle，请参阅MSDN简介。

　　实际上，方法3和方法4是相同的集合，只不过一个是全部，可以收录页面上的所有标签，而锚点仅收录链接。

　　5、 getElementById：

　　document.getElementById（“ link1”）。href

　　6、 getElementsByName：

　　document.getElementsByName（“ linkname1”）[0] .href

　　//这也是一个集合，即名称等于方法参数的所有标记的集合

　　7、 getElementsByTagName：

　　document.getElementsByTagName（“ A”）[0] .href

　　//这也是一个集合，所有标记名称等于该方法的参数的所有标记的集合

　　8、标签集合：

　　document.all.tags（“ A”）[0] .href

　　//与方法7相同，是通过标记名称获取集合

　　除：

　　event.scrElement可以获取对触发时间标签的引用；​​

　　document.elementFromPoint（x，y）可以获取元素在x和y坐标处的引用；

　　ponentFromPoint（event.clientX，event.clientY）可以获取对鼠标所在元素的引用；

　　您还可以引用元素的父子节点和同级节点的关系，例如nextSibling（当前节点的下一个节点），previousSibling（当前节点的上一个节点），childNodes，children，firstChild，lastChild ，parentElement等。对父子节点和兄弟节点的一些引用；不限于此。

　　以上是同一页面中的常见引用方法，也涉及到不同的页面

　　getElementsByName返回名称为指定值的所有元素的集合

　　“根据

　　NAME

　　tag属性的值获取对象的集合。 “

　　集合比数组宽松得多。集合中每个项目的类型可以不同。该集合只是将某些元素放在一起作为一个类别。相反，数组要严格得多。这是统一类型。

　　document.getElementsByName，document.getElementsByTagName，document.formName.elements

　　通过这种方法获得的结果都是集合。

　　示例：

　　代码

　　鱼

　　功能

　　get（）{

　　var

　　xx = document.getElementById（“ bbs”）

　　alert（“标签名称：” + xx.tagName）;

　　}

　　功能

　　getElementName（）{

　　var

　　ele

　　=

　　document.getElementsByName（“ happy”）;

　　alert（“不带元素的快乐数：” +

　　ele.length）;

　　}

　　获取文件指定的元素

　　document.getElementsByName（）此方法。它以相同的方式对待一个和多个，我们可以使用：

　　温度

　　=

　　document.getElementsByName（

　　开心

　　）引用

　　当只有一个Temp时，则为Temp [0]。如果有多个，则使用下标方法Temp [i]循环获取

　　有例外：

　　在即

　　在getElementsByName（“ test”）中，它返回id = test的对象数组，而firefox返回name =

　　一组测试对象。

　　根据w3c的规范，它应返回name =

　　一组测试对象。

　　firefox中的getElementByID与ie相同：正确获取

　　ID

　　tag属性是对指定值的第一个对象的引用。

　　请注意getElementsByName

　　里面有s

　　document.getElementById（）可以控制某个ID的标签

　　document.getElementsByName（），返回的文件具有相同的

　　名称

　　不是一个特定的属性元素的集合，请注意“ s”。

　　和

　　document.getElementsByTagName（）

　　返回的是一组相同的

　　标签

　　的集合

　　元素。

　　同一个名称可以收录多个元素，因此请使用document.getElementsByName（“ theName”）

　　他回来了

　　引用时，集合必须命名为索引

　　var

　　测试

　　=

　　document.getElementsByName（

　　testButton

　　）[0];

　　ID是唯一的

　　还应注意，类似属性没有名称属性，而其名称属性是伪属性document.getElementsByName（）

　　这将是无效的，当然TD可以设置ID属性

　　JavaScript获取HTML

　　DOM节点元素方法概述

　　在Web应用程序（尤其是Web 2. 0程序）的开发中，通常需要在页面中获取一个元素，然后更新该元素的样式和内容。如何获得要更新的元素是要解决的第一个问题。好消息是，有很多方法可以使用JavaScript获取节点。这是一个简短的摘要（以下方法已在IE7和Firefox 2. 0. 0. 11中进行了测试）：

　　1.

　　获取顶级文档节点：

　　（[1）

　　document.getElementById（elementId）：此方法可以通过节点的ID准确获取所需的元素。这是一个相对简单快捷的方法。如果页面上有多个具有相同ID的节点，则仅返回第一个节点。

　　如今，已经有许多JavaScript库，例如prototype和Mootools，它们提供了更方便的方法：$（id），参数仍然是节点的id。该方法可以看作是另一种编写document.getElementById（）的方法，但是$（）的功能更强大。有关特定用法，请参阅其各自的API文档。

　　（[2） document.getElementsByName（elementName）：此方法是根据节点名称获取节点。从名称中可以看出，此方法不返回节点元素，而是返回具有以下内容的节点数组然后，我们可以通过获取节点的某个属性来周期性地判断它是否是必需节点。

　　例如：在HTML中，复选框和单选框都使用相同的名称属性值来标识组中的元素。如果要立即获取选定的元素，请首先获取经过改组的元素，然后循环以确定该节点的选中属性值是否为真。

　　（[3） document.getElementsByTagName（tagName）：此方法是通过节点的标记获取节点，并且该方法还返回一个数组，例如：document.getElementsByTagName（

　　A

　　）将返回到页面上的所有超链接节点。在获取节点之前，通常会知道节点的类型，因此使用此方法相对简单。但是缺点也很明显，即返回的数组可能非常大，这将浪费大量时间。那么，这种方法没用吗？当然不是。此方法与以上两种方法不同。它不是文档节点的专有方法。也可以应用其他节点，下面将对此进行介绍。

　　2、通过父节点获得：

　　（[1） parentObj.firstChild：如果该节点是已知节点（parentObj）的第一个子节点，则可以使用此方法。此属性可以递归使用，即它支持parentObj.firstChild.firstChild。 firstChild的形式为。，因此您可以获得更深的节点。

　　（[2） parentObj.lastChild：显然，此属性用于获取已知节点的最后一个子节点（parentObj）。与firstChild一样，它也可以递归使用。

　　在使用中，如果将两者结合使用，将会获得更加令人兴奋的效果，即：parentObj.firstChild.lastChild.lastChild。

　　（[3） parentObj.childNodes：获取已知节点的子节点数组，然后可以通过循环或索引找到所需的节点。

　　注意：经过测试，发现直接子节点的数组是在IE7上获得的，所有子节点都是在Firefox 2. 0. 0. 11上获得的，包括子节点。

　　（[4） parentObj.children：获取已知节点的直接子节点数组。

　　注意：经过测试，它具有与IE7上的childNodes相同的效果，但是Firefox 2. 0. 0. 11不支持它。这就是为什么我使用与其他方法不同的样式的原因。因此，不建议这样做。

　　（[5） parentObj.getElementsByTagName（tagName）：不会重复使用该方法，它返回已知节点的所有子节点中具有指定值的子节点的数组。例如：parentObj.getElementsByTagName（

　　A

　　）返回已知子节点中的所有超链接。

　　3、从相邻节点获得：

　　（[1） nei*敏*感*词*ourNode.previousSibling：获取已知节点的前一个节点（nei*敏*感*词*ourNode），此属性似乎像前一个firstChild和lastChild一样可以递归使用。

　　（[2） nei*敏*感*词*ourNode.nextSibling：获取已知节点的下一个节点（nei*敏*感*词*ourNode），它也支持递归。

　　4、通过子节点获得：

　　（[1） childNode.parentNode：获取已知节点的父节点。

　　上述方法只是一些基本方法。如果使用JavaScript库（例如Prototype），则还可以获取其他不同的方法，例如通过节点的类获取。但是，如果您可以灵活使用上述方法，我相信它应该能够处理大多数程序