Javascript 查找元素
DOM定义了多种查找元素的方法,除了我们常用的getElementById(),还有getElementsByTagName()和getElementsByName()。使用这几种方法方法我们可以查找html文档中的任意html元素。
getElementById()
首先来看下getElementById(),这个方法很简单,只需在参数中传入html标签的id属性值即可,由于html页面中的id具有唯一性,因此该方法返回的是单个元素对象。例如:
<script>
var oSpan = document.getElementById('span1'); //查找span元素
alert(oSpan.innerHTML); //弹出span标签中的内容
</script>
getElementsByTagName()
getElementsByTagName()参数需传入的是一个html标签名,它返回的是html文档中所有与之匹配的元素列表,这个列表具有部分数组的特性,因此也称其为类数组。当我们想操作某个特定的元素时,我们可以使用数组索引或item()来实现,例如:
var oDiv = document.getElementsByTagName('div'); //查找所有div元素,返回一个元素列表
/* 操作特定元素 */
alert(oDiv[0].innerHTML) //弹出第一个div中的内容
alert(oDiv.item(1).innerHTML) //弹出第二个div中的内容
</script>
当然我们还可以通过length属性来循环遍历节点:
var oDiv = document.getElementsByTagName('div');
for(var i = 0; i < oDiv.length; i++){
//do something
}
</script>
getElementsByName()
getElementsByName() 常用来查找表单元素,参数中传入html标签的name属性值,由于文档中多个html标签的name值可能相同(如单选按钮),因此该方法返回的也是一 个元素列表。具体操作方法与getElementsByTagName()类似,这里不在赘述。
var oIpt= document.getElementsByName('city'); //查找name值为city的元素
alert(oIpt[0].value);
alert(oIpt.item(1).value);
</script>
getByClass()
虽然使用上面的几种方法已经可以满足常见需求,但是为了更方便的访问元素节点,我们一般会自己封装一个通过class来查找元素的方法:
/** getByClass **/
function getByClass(oParent, sClass){
var aEle = oParent.getElementsByTagName('*');
var re = new RegExp('b' + sClass + 'b');
var aResult = [];
for(var i = 0; i < aEle.length; i++){
if(re.test(aEle[i].className)){
aResult.push(aEle[i]);
}
}
return aResult;
}
</script>
getByClass 需传入两个参数,其中oParent为参考节点,即在oParent节点中查找元素,sClass为要查找的元素class的值。通过循环将 oParent内的html标签的class值与传入的sClass值一一对比,符合条件的会存入到数组aResult中,最后再返回这个数组。
另外这里之所以用正则来匹配而没有直接用aEle[i].className == sClass,是避免标签的class值为多个时,出现匹配失效的情况。
Javascript 查找元素的更多相关文章
- JavaScript查找元素的方法
1.根据id获取元素 document.getElementById("id属性的值"); 2.根据标签名字获取元素 document.getElementsByTagName(& ...
- javascript中通过className灵活查找元素 例如我们要把根据class来进行修改样式
一.背景:一个表单中,要修改一些li中有class=box的样式,将它的background设置为red红色.一般的做法是我们可以先找到父级元素 ,然后由父级元素找到所有相关tagName,最后,来一 ...
- 使用Python学习selenium测试工具-4:查找元素
转自:https://blog.csdn.net/wd168/article/details/51819930 web通常包含了Hyper Text Markup Language (HTML).Ca ...
- js进阶 11-16 jquery如何查找元素的父亲、祖先和子代、后代
js进阶 11-16 jquery如何查找元素的父亲.祖先和子代.后代 一.总结 一句话总结:过滤或者查找的方法里面可以带参数进行进一步的选择. 1.parent()和parents()方法的区别是什 ...
- JavaScript通过元素id和name直接获取元素的方法
概览: 偶然的机会,我在JavaScript中直接用HTML元素的id属性来获取该元素,并设置该元素的其他属性值,竟然能够正确解析不报错!于是我去查阅相关资料,也有其他同行这么用. 虽然说这种用法不是 ...
- DOM查找元素
1. 查找元素5种: 1. 按id查找1个元素对象: var elem=document.getElementById("id值"); 何时使用:1. 元素必须有id 2. 精确查 ...
- javascript中元素的scrollLeft和scrollTop属性说明
再说意义之前,前说一下这两个属性的适用范围: 注意:这两个属性只能用于元素设置了overflow的css样式中.否者这两个属性没有任何意义.且overflow的值不能为visible,但可以为hidd ...
- Appium查找元素
记录一些需要记忆的查找元素的内容: 1. driver.findElement(By.name("DELETE"); //We can use the DELETE text ...
- jsoup使用选择器语法来查找元素
问题 你想使用类似于CSS或jQuery的语法来查找和操作元素. 方法 可以使用Element.select(String selector) 和 Elements.select(String sel ...
随机推荐
- $.ajax和$.post的区别(前者根据key-value/后者根据形参)
post不需要给key-value形式: $("#btn").click(function(){ var url=basePath+"/emp/login"; ...
- jquery指定div右键事件
<div class="nav_list_item">需要淡季右键的div</div> 我们要 给这个div注册鼠标右键的时候需要先禁用该div的网页右键菜 ...
- iOS数据持久化之数据库:SQLite和FMDB
SQLite: SQLite是一款轻量级型的数据库,资源占用少.性能良好和零管理成本,具有零配置(无需安装和管理配置).独立(没有额外依赖).储存在单一磁盘文件中的一个完整的数据库.源码完全的开源.比 ...
- Direct3D中的绘制
1.顶点缓存和索引缓存 一个顶点缓存是一个包含顶点数据的连续内存空间:一个索引缓存是一个包含索引数据的连续内存空间. 顶点缓存用接口IDirect3DVertexBuffer9表示:索引缓存用接口ID ...
- Android网络开发之OkHttp--基本用法实例化各个对象
1.实例化OkHttpClient对象,OkHttpClient包含了以下属性,以及set()和get()方法.但并没有包含具体的执行方法,详情见源码. //实例化OkHttpClent对象 priv ...
- Android学习笔记之Intent(1)
1.Intent指定启动目标组件 2.Intentfilter描述基本组件所在地址 3.其他包引入资源文件时记得引入R所在的包 package com.jikexueyuan.intent; impo ...
- Tomcat(.jsp)
定义: Tomcat服务器是一个免费的开放源代码的Web应用服务器.Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由 ...
- 说说Core Animation
前言 本次分享将从以下方面进行展开: 曾被面试官问倒过的问题:层与视图的关系 CALayer类介绍及层与视图的关系 CAShapeLayer类介绍 UIBezierPath贝塞尔曲线讲解 CoreAn ...
- CodeForces 620E New Year Tree
线段树+位运算 首先对树进行DFS,写出DFS序列,记录下每一个节点控制的区间范围.然后就是区间更新和区间查询了. 某段区间的颜色种类可以用位运算来表示,方便计算. 如果仅有第i种颜色,那么就用十进制 ...
- 全文搜索之 Elasticsearch
概述 Elasticsearch (ES)是一个基于 Lucene 的开源搜索引擎,它不但稳定.可靠.快速,而且也具有良好的水平扩展能力,是专门为分布式环境设计的. 特性 安装方便:没有其他依赖,下载 ...