Javascript获取html元素的几种方法
1.通过id获取html元素
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="mydiv" style="border:1px solid red">我是div，我的id是mydiv</div>
<script>
var x=document.getElementById("mydiv").innerHTML;
document.write(x+"(我是通过javascript获取的)");
</script>
</body>
</html>
2.通过class来获取html元素
1）一个类名的情况
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p style="border:1px solid red" class="aaa">我是p,我的类名是aaa</p>
<span style="border:1px solid red" class="aaa">我是span,我的类名是aaa</span>
<script>
function getByClass(iclass){ //封装函数
var Result=[];//存放结果的数组
var allElement=document.getElementsByTagName("*"); //得到所有元素
// 遍历所有元素，如果和给定的参数匹配，则这个元素被放进Result数组中
for(var i=0;i<allElement.length;i++){
if(allElement[i].className==iclass){
Result.push(allElement[i]);
}
}
return Result; //返回最后结果数组
}
// 通过以下方法来调用
window.onload=function(){
var arr= getByClass("aaa");
// 循环输出显示元素
for(var i=0;i<arr.length;i++){
document.write(arr[i].innerHTML+"(我是javascript获得的)<br>");
}
}
</script>
</body>
</html>
2）两个类名的情况（例如class="aaa bb"）
①正则表达式的方法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p style="border:1px solid red" class="aaa bb c">我是p,我的类名是aaa bb c</p>
<span style="border:1px solid red" class="bb c">我是span,我的类名是c</span>
<script>
function getByClass(iclass){ //封装函数
var Result=[];//存放结果的数组
var allElement=document.getElementsByTagName("*"); //得到所有元素
// 遍历所有元素，如果和给定的参数匹配，则这个元素被放进Result数组中
// 正则模式
var re=new RegExp("\\b"+iclass+"\\b","g");
for(var i=0;i<allElement.length;i++){
// 字符串search方法判断是否存在匹配
if(allElement[i].className.search(re)!=-1){
Result.push(allElement[i]);
}
}
return Result; //返回最后结果数组
}
// 通过以下方法来调用
window.onload=function(){
var arr= getByClass("bb");
// 循环输出显示元素
for(var i=0;i<arr.length;i++){
document.write(arr[i].innerHTML+"(我是javascript获得的)<br>");
}
}
</script>
</body>
</html>
②类名获取--数组方式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p style="border:1px solid red" class="aaa bb c">我是p,我的类名是aaa bb c</p>
<span style="border:1px solid red" class="bb c">我是span,我的类名是bb c</span>
<script>
function getByClass(iclass){ //封装函数
var Result=[];//存放结果的数组
var allElement=document.getElementsByTagName("*"); //得到所有元素
// 遍历所有元素，将元素类名分割为字符串数组，再遍历字符串数组元素，如果与所给参数匹配，则这个元素被放进Result数组中
for(var i=0;i<allElement.length;i++){
var arr=allElement[i].className.split(/\s+/); //字符串分割为数组
for(var j=0;j<arr.length;j++){
if(arr[j]==iclass){
Result.push(allElement[i]);
}
}
}
return Result; //返回最后结果数组
}
// 通过以下方法来调用
window.onload=function(){
var arr= getByClass("bb");
// 循环输出显示元素
for(var i=0;i<arr.length;i++){
document.write(arr[i].innerHTML+"(我是javascript获得的)<br>");
}
}
</script>
</body>
</html>
3.通过标签来获得html元素
Javascript获取html元素的几种方法的更多相关文章
- javascript 获取html元素的三种方法
操作HTML元素 你首先找到该元素. 三种方法来做这件事: 通过id找到HTML元素 通过标签名找到HTML元素 通过类名找到HTML元素 通过id查找HTML元素 在DOM中查找HTML元素的最简单 ...
- JS获取DOM元素的八种方法
JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...
- JavaScript获取样式值的几种方法学习总结
本人经过整理总结出以下获取样式值的方法,如有错误请各位大佬指正. 有四种方法:style,currentStyle,getComputedStyle,rules 与 cssRules方法. 1. st ...
- Javascript获取value值的三种方法及注意点
JavaScript获取value值,主要有以下三种: 1.用document.getElementById(“id名”).value来获取(例1): 2.通过form表单中的id名或者name名来获 ...
- jQuery -> 获取后代元素的三种方法
假设我们有内容例如以下的html文件,那么怎样选取包括在<p>元素内的<i>元素呢? 邪馬台国の謎と弥生時代 紀元前1000年ごろ.水稲工作の技術をもつ集団が大挙して日本に移住 ...
- JavaScript获取鼠标位置的三种方法
在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的游览器下会有不同的结果甚至是有的游览器下没结果,这篇文章就鼠标点击位置坐标获取做一些简单的总结. 获取鼠 ...
- Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID
query取得iframe中元素的几种方法 在iframe子页面获取父页面元素代码如下: $('#objId', parent.document);// 搞定... 在父页面 获取iframe子页面的 ...
- JS获取HTML DOM元素的8种方法
什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...
- javascript 获取iframe元素的方法
javascript 获取iframe元素的方法 第一种: $("#IframeID").contents().find("div"); 第二种: $(win ...
随机推荐
- 文件hash、上传，实现文件上传重复验证
在平台开发中,我们往往对性能要求十分严苛,每一个字段.接口都有严格的要求. 系统中文件流操作十分占用资源,这里为大家介绍对文件上传进行哈希校验---同一文件只允许上传一次到服务器,其他的上传只要指向文 ...
- java序列化和反序列化及序列化方式
平时我们在Java内存中的对象,是无 法进行IO操作或者网络通信的,因为在进行IO操作或者网络通信的时候,人家根本不知道内存中的对象是个什么东西,因此必须将对象以某种方式表示出来,即 存储对象中的状态 ...
- Python版本号比较函数 LooseVersion 和StrictVersion
- UVA - 11996 Jewel Magic (Treap+二分哈希)
维护一个01序列,一共四种操作: 1.插入一个数 2.删除一个数 3.反转一个区间 4.查询两个后缀的LCP 用Splay或者Treap都可以做,维护哈希值,二分求LCP即可. 注意反转序列的时候序列 ...
- js/html 判断ie浏览器版本
1.html判断浏览器:<!--[if !IE]><!-->除ie外都可以识别<!--<![endif]--><!--[if IE]>所有ie可以 ...
- vs2017 2019 下载更新慢的解决方法
国庆期间 下载的速度只有20多kb. 1.去掉网络适配器里面的 ip6勾选. 2.修改电脑的自动dns, 修改为1.1.1.1 , 修改为8.8.8.8 更快. 记得禁用再启用网络: dns为1. ...
- CSS3 的动画属性
通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. ㈠@keyframes 规则 ⑴浏览器支持 Firefox 支持替代的 @-moz-ke ...
- CF G. Indie Album 广义后缀自动机+树链剖分+线段树合并
这里给出一个后缀自动机的做法. 假设每次询问 $t$ 在所有 $s$ 中的出现次数,那么这是非常简单的: 直接对 $s$ 构建后缀自动机,随便维护一下 $endpos$ 大小就可以. 然而,想求 $t ...
- javascript中继承方式及优缺点(二)
一.原型链继承 方式1: 原型链继承 (1)流程: 1.定义父类型构造函数. 2.给父类型的原型添加方法. 3.定义子类型的构造函数. 4.创建父类型的对象赋值给子类型的原型. 5 ...
- Spark译文(三)
Structured Streaming Programming Guide(结构化流编程指南) Overview(概貌) ·Structured Streaming是一种基于Spark SQL引擎的 ...