`

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

    博客分类:
  • js
阅读更多
    getElementById getElementsByName getElementsByTagName 大概介绍
  getElementById ,getElementsByName ,getElementsByTagName

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

  getElementById 的用法

  举个例子:

  <a id="link1" name="link1" href=http://www.webjx.com>网页教学网</a>

  同一页面内的引用方法:

  1、使用id:

  link1.href,返回值为http://www.webjx.com

  2、使用name:

  document.all.link1.href,返回值为http://www.webjx.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来查找、修改...

    JS获取Table中td值的方法

    本文将详细介绍如何使用JavaScript获取表格中td元素的值,并通过实例分析一些操作技巧。 首先,当需要获取表格中多个行的任意td值时,可以为每个td元素分配一个共同的class。这样做的好处是可以通过class来选取所有...

    JavaScript获取HTML DOM节点元素的方法的总结

    JavaScript获取HTML DOM节点元素的方法是Web开发中的基础技能,尤其是在动态更新页面内容时。本文将对几种常见的DOM操作方法进行详细解释。 首先,我们可以通过顶层的`document`对象来获取元素: 1. `document....

    js 动态插入html元素

    插入HTML元素主要涉及以下几种方法: 1. **createElement()**: 这个方法创建一个新的HTML元素。例如,如果你想要创建一个`&lt;p&gt;`元素,你可以使用`document.createElement('p')`。 2. **innerHTML**: 这个属性可以让...

    详解JS获取HTML DOM元素的8种方法

    本文将详细介绍在JavaScript中获取HTML DOM元素的八种常用方法,这些方法在实际开发中有着广泛的应用,能够帮助开发者有效地管理和操作网页元素。 1. 通过ID获取(getElementById) getElementById是document对象的...

    通过js给html元素赋值

    JavaScript提供了多种方式来获取HTML元素,并对其进行修改。其中一种常用的方式是`document.getElementById()`,它可以返回具有指定ID的第一个对象的引用。例如: ```javascript var element = document....

    JS获取文件大小方法小结

    本文将介绍几种JavaScript获取文件大小的方法。 首先,我们来看方法一,使用ActiveX控件。这种方法适用于Internet Explorer浏览器,通过创建`ActiveXObject("Scripting.FileSystemObject")`来访问文件系统对象,...

    获取jsp中的所有某个标签中所有ID相同的元素

    在JSP或任何基于Web的技术中,通过JavaScript操作DOM来获取具有特定属性的HTML元素是一种常见的需求。理解DOM模型、HTML标签和JavaScript语法是完成这一任务的基础。在实际应用中,应确保遵循Web标准,如避免在同一...

    抓取网页图片,css和js

    网页抓取技术是一种获取网页内容的方法,通常用于数据挖掘、备份、分析或创建离线浏览体验。本话题主要关注如何抓取网页上的图片、CSS(层叠样式表)和JavaScript文件,以及处理CSS中内联的图片资源。下面将详细讨论...

    js获取Html元素的实际宽度高度的方法

    在Web开发中,经常需要获取HTML元素的实际宽度和高度,这些尺寸信息对于页面布局和响应式设计至关重要。文档中提供的方法是使用JavaScript(简称js)来实现这一功能。为了深入理解和掌握这些知识点,我们需要从几个...

    浅谈JS获取元素的N种方法及其动静态讨论

    本文将深入探讨几种常用的JS获取元素的方法及其在动态和静态环境中的应用。 首先,`getElementById()`是获取元素的最常见方式之一。这个方法通过指定的ID来查找元素,返回的是匹配的首个Element对象。如果文档中...

    html网页扒取工具(html,css,js,img)

    HTML网页扒取工具是一种高效的方法,用于批量获取网页上的HTML、CSS、JavaScript和图像资源,大大简化了网页内容的下载和存储过程。这种工具对于网页设计师、开发者、数据抓取人员以及想要离线查看网页内容的用户来...

    Javascript获取相同CSS样式的元素

    标题中的“Javascript获取相同CSS样式的元素”是一个关于JavaScript编程的话题,主要涉及到如何在JavaScript中检索和操作具有相同CSS样式的HTML元素。在Web开发中,JavaScript常常用于动态地改变页面样式,或者根据...

    提取alert提示框和按钮等中html元素中得文字工具

    综上所述,这个工具结合了HTML元素解析、JavaScript交互和文本提取技术,为Web开发者和数据分析师提供了一种便利的手段,帮助他们快速获取网页上的文本信息。使用这个工具时,用户需要注意其兼容性、使用方法以及...

    获取网页的Html文件 源代码

    首先,我们需要了解获取HTML源代码的几种常见方法: 1. **浏览器开发者工具**:大多数现代浏览器都内置了开发者工具,如Chrome的DevTools。在浏览器中打开目标网页,右键点击并选择“检查”或按下F12键,即可查看...

    js获取滚动距离的方法

    在介绍JavaScript获取滚动距离的方法时,首先要了解的是页面滚动条的机制和页面布局相关的一些基本概念。在Web开发中,页面的滚动一般指的是当页面内容超出了视窗(视图区域)的大小时,用户可以使用滚动条来查看未...

    js 获取表格内容

    根据提供的文件内容,本文将详细解释如何使用JavaScript来获取HTML表格中的行数、列数以及具体...以上就是关于使用JavaScript获取HTML表格内容的详细说明。希望这些内容能够帮助到正在学习或工作中遇到类似问题的朋友。

    js获取城市列表

    在JavaScript(简称JS)编程中,获取城市列表是一项常见的任务,尤其在开发涉及地理信息的Web应用时。这里,我们主要关注两个文件:`city.html` 和 `city.js`。`city.html` 可能是网页的主体部分,用于展示城市列表...

    正则表达式获取网页HTML,css,js,图片等

    正则表达式是一种强大的文本处理工具,用于在字符串中匹配特定模式。在互联网时代,它在获取网页资源,如HTML、CSS、JavaScript和图片等方面扮演着重要角色。本篇文章将详细探讨如何使用正则表达式来提取这些关键...

Global site tag (gtag.js) - Google Analytics