`
alex8946
  • 浏览: 364603 次
  • 性别: Icon_minigender_1
  • 来自: 广东广州
社区版块
存档分类
最新评论

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

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

  getElementById ,getElementsByName ,getElementsByTagName

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

  getElementById 的用法

  举个例子:

  网页陶吧

  同一页面内的引用方法:

  1、使用id:

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

  2、使用name:

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

  例:



<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>

获取文件指定的元素















  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元素的几种方法分析

    ### JS 获取网页中 HTML 元素的几种方法分析 在 Web 开发中,JavaScript 是一种常用的客户端脚本语言,能够动态地控制网页的行为与样式。本文将深入探讨 JavaScript 获取网页中 HTML 元素的多种方法及其应用场景。 ...

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

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

    分析网页对网页元素的获取方法提供参考

    在分析网页时,我们主要关注以下几种获取元素的方法: 1. **DOM(Document Object Model)操作**:DOM是HTML或XML文档的结构化表示,它将网页内容转化为树形结构。通过JavaScript,我们可以利用DOM API来查找、修改...

    JavaScript制作的几个简单网页

    在项目中,你可能会看到如何通过JavaScript获取DOM元素,例如使用`document.getElementById`、`document.querySelector`或`document.querySelectorAll`等方法。 事件处理是JavaScript与用户交互的关键。在描述中...

    Javascript获取相同CSS样式的元素

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

    JavaScript+网页特效

    在网页特效方面,JavaScript可以实现以下几种常见的效果: 1. 图片轮播:通过JavaScript,我们可以创建一个自动切换的图片展示,用户可以通过按钮或滑动来浏览图片。 2. 滚动条特效:例如,页面滚动到指定位置时,...

    JS获取Table中td值的方法

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

    javascript经典特效---在网页中运行代码.rar

    JavaScript在网页中的运行方式主要有以下几种: 1. **内联方式**:在HTML元素内部的`&lt;script&gt;`标签中直接编写JavaScript代码。 2. **外部引用**:通过`&lt;script src="path/to/your/js/file.js"&gt;&lt;/script&gt;`引用外部的...

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

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

    javascript网页版计算器

    JavaScript网页版计算器是一种基于Web的计算工具,利用JavaScript这门客户端脚本语言实现。JavaScript,简称JS,是由 Netscape 公司开发的,主要用于增强网页的交互性,它被广泛应用于网页和应用开发,实现动态内容...

    网页设计实验 Javascript的使用

    2. **表格元素赋值**:在JavaScript中,可以通过DOM(Document Object Model)来操作HTML元素。首先,需要获取到目标元素,然后设置其内容。例如,给第一行第二列的单元格赋值,可以这样做: ```javascript var cell...

    JavaScript网页特效案例教程PPT

    2. **DOM操作**:DOM(文档对象模型)是网页内容的结构化表示,JavaScript通过DOM可以对HTML元素进行增删改查。教程可能包括如何选择元素、改变元素属性、添加或删除元素等内容。 3. **事件处理**:JavaScript通过...

    html教案、javascript

    HTML(HyperText Markup Language)是用于创建网页的标准标记语言,而JavaScript则是一种解释型的、轻量级的编程语言,主要用于增加网页的动态性与用户交互。 HTML教案: 在教学过程中,HTML教案通常会涵盖以下几个...

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

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

    HTML+Javascript+CSS测试题

    它可以直接在浏览器中运行,通过DOM(Document Object Model)操作HTML元素,改变网页内容。例如,可以使用`document.getElementById()`获取元素,`element.innerHTML`改变元素内容,`addEventListener()`添加事件...

    javascript动态判断html元素并执行不同的操作.docx

    通过上述方法,我们可以有效地在JavaScript中动态判断HTML元素,并根据这些元素执行不同的操作。这对于提高Web应用的灵活性和可维护性至关重要。开发者可以根据具体需求灵活运用这些技巧,以实现更复杂的交互逻辑。

    获取网页的Html文件 源代码

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

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

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

    [HTML5资料]Canvas教程,通过脚本(通常是JavaScript)绘图的HTML元素

    下面介绍几种常见的绘制方法: **4.1 绘制矩形** 使用`fillRect`方法可以绘制填充的矩形。 ```javascript ctx.fillRect(x, y, width, height); ``` 其中,`x`和`y`分别表示矩形左上角的坐标,`width`和`height`...

    html获取天气预报

    3. **JavaScript/jQuery**:由于HTML本身不具备动态获取和更新数据的能力,开发者通常会使用JavaScript或jQuery来异步请求天气API,并将返回的数据插入到HTML元素中。jQuery简化了DOM操作,使得与服务器交互和更新...

Global site tag (gtag.js) - Google Analytics