getElementsByTagName()详解

getElementsByTagName():方法的用途是寻找有着给定标签名的所有的元素。

element = document.getElementsByTagName(tagName);

这个方法返回一个节点的集合,这个集合可以当做一个数组来处理。这个集合的length属性等于当前文档里有着给定标签名的所有元素的总个数。这个数组里面的每个元素都是一个对象,他们都有着nodeName、nodeType、parentNode、childNodes等属性。

下面的例子将把当前文档里的所有文本段元素(p元素)全部搜索出来,getElementsBuTagName()方法返回的节点集合的length属性将被保存到变量howmany里:

var paras = document.getElementsByTagName("p");
var howmany = paras.length;

在getElementsByTagName()方法返回成功后,比较常见的后续手段是用一个for循环去遍历这个方法所有返回的集合里面的各个元素,在for循环里,我们可以使用setAttribute()、clone()或appendChild()等方法对各个有关元素进行查询处理。

下面的例子将遍历当前文件里面的所有文本段元素,并将其title属性全部设置为空字符串:

var paras = document.getElementsByTagName("p");
for ( var i=0;i<paras.length;i++ ) {
    paras[i].setAttribute("title","");
}

在上例中,变量paras的数据类型是nodeList。这个集合里的每一个元素可以像其他任何一个数组那样进行访问:paras[0]、paras[1]、paras[2]等等。当然也可以使用item()方法:paras.item[0]等等

getElementsByTagName()方法不必非得用在整个文档上,他也可以用来在某个特定的元素的子节点当中寻找持有者给定标签名的元素。

在下例中,在当前文档里包含着一个id属性值是content元素,为了找出content元素所包含的所有文本段元素,我们把getElementsByTagName()方法用在了content上:

var container = document.getElementById("content");
var paras = container.getElementsByTagName("p");
var howmany = paras.length;

执行完上面的这些语句后,变量howmany的值将是包含在content元素里的所有文本元素的总分数,而不是包含在文档里面文本段总个数。

时间: 2024-10-04 11:39:04

getElementsByTagName()详解的相关文章

App.Config详解

App.Config详解 应用程序配置文件是标准的 XML 文件,XML 标记和属性是区分大小写的.它是可以按需要更改的,开发人员可以使用配置文件来更改设置,而不必重编译应用程序.配置文件的根节点是configuration.我们经常访问的是appSettings,它是由.Net预定义配置节.我们经常使用的配置文件的架构是象下面的形式.先大概有个印象,通过后面的实例会有一个比较清楚的认识.下面的“配置节”可以理解为进行配置一个XML的节点. 1.  向项目添加 app.config 文件: 右击

JQuery技术详解

前面我们讲解了的J2EE的技术都是服务端的技术,下面我们来看一下前端的一些开发技术,这一篇我们来看一下jQuery技术 简介: jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team.jQuery是继prototype之后又一个优秀的Javascript框架.其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情.它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器

可以自动切换的tab选项卡实现过程详解

可以自动切换的tab选项卡实现过程详解:关于选项卡大家一定不会陌生,应用非常的频繁,通常选项卡都是需要点击或者划过才能够实现切换.本章节分享一个能够实现自动切换的选项卡功能,并给出它的具体实现过程.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.so

超级强大的SVG SMIL animation动画详解

本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordpress/?p=4333 //zxx: 本文的SVG在有缓存时候是无动画效果,此时您可以试着[右键-新标签页打开图片]. 一.SVG SMIL animation概览 1. SMIL是什么?SMIL不是指「水蜜梨」,而是Synchronized Multimedia Integration Language(同步多媒体集成语言)的首字母缩写简称,是有标准

jQuery内核详解与实践读书笔记1:原型技术分解2

上一篇已经搭建了一个非常简陋的jQuery框架雏形,如没有阅读搭建过程,请先阅读<jQuery内核详解与实践读书笔记1:原型技术分解1>初始搭建过程.接下来,完成书中介绍的剩下三个步骤: 7. 延续--功能扩展 jQuery框架是通过extend()函数来扩展功能的,extend()函数的功能实现起来也很简单,它只是吧指定对象的方法复制给jQuery对象或jQuery.prototype对象,如下示例代码就为jQuery类和原型定义了一个扩展功能的函数extend(). 1 var $ = j

新手入门:史上最全Web端即时通讯技术原理详解

前言 有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为流行,而网上关于原生IM(相关文章请参见:<IM架构篇>.<IM综合资料>.<IM/推送的通信格式.协议篇>.<IM心跳保活篇>.<IM安全篇>.<实时音视频开发>).消息推送应用(参见:<推送技术好文>)的通信原理介绍也较多

Web端即时通讯技术原理详解

前言 有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为流行,而网上关于原生IM(相关文章请参见:<IM架构篇>.<IM综合资料>.<IM/推送的通信格式.协议篇>.<IM心跳保活篇>.<IM安全篇>.<实时音视频开发>).消息推送应用(参见:<推送技术好文>)的通信原理介绍也较多

javascript运动详解

javascript运动详解 本文给大家详细介绍下如何使用javascript来实现运动效果,总结的十分全面,附上各种效果的详细示例和演示图,有需要的小伙伴可以参考下. 物体运动原理:通过改变物体的位置,而发生移动变化. 方法: 1.运动的物体使用绝对定位 2.通过改变定位物体的属性(left.right.top.bottom)值来使物体移动.例如向右或左移动可以使用offsetLeft(offsetRight)来控制左右移动. 步骤: 1.开始运动前,先清除已有定时器 (因为:是连续点击按钮,

jQuery内核详解与实践读书笔记1:原型技术分解1

一直以来都有研究一下jQuery源代码的想法,但是每次看到jQuery几千行的代码,头就大了,没有一点头绪,也不知道从哪里开始.昨天去图书馆无意间发现了这本<jQuery内核详解和实践>,翻看了一下里面的内容,这正是我寻觅多时剖析jQuery源码的好书. 废话不多说,直入正题吧.第一章介绍了一下jQuery的起步和一些历史故事,没什么重要内容.这里直接进入第二章,jQuery技术解密,从这一章开始就全部是干货了.这一章主要分四部分:jQuery原型技术分解,破解jQuery选择器接口,解析jQ