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 ...
随机推荐
- 从subversion开始(svn安装配置全过程（+全套安装文件与配置文件）)…..
从subversion开始(svn安装配置全过程(+全套安装文件与配置文件))-.. 博客分类: 工具使用 SVNsubversion配置管理Apache应用服务器 </div> 花了一 ...
- new一个有父类的对象时各代码块的执行顺序问题
public class QQ { public static void main(String[] args) { new B(); } } class A { static { System.ou ...
- target_link_libraries每次能连接1个？？？
target_link_libraries(usb-1.0)target_link_libraries(cyusb)
- 【HDU6635】Nonsense Time
题目大意:给定一个长度为 N 的序列,开始时所有的位置都不可用,每经过一个时间单位,都会有一个位置被激活.现给定激活顺序的序列,求每次激活之后全局的最长上升子序列的长度,保证数据随机. 题解: 引理: ...
- 轮子：读取config.ini文件
python: 把config.ini文件成map返回 def get_conf(conf_file): conf = {} ll=list(map(lambda x: x.replace('&quo ...
- 【UOJ#37】 [清华集训2014] 主旋律
题目链接 题目描述 给定一张强联通图,求有多少种边的存在情况满足图依然强联通. \(n\leq15\) Sol 首先正难则反,考虑用总数减去不强联通的. 考虑一张不强联通的图,缩点后一定是一个 DAG ...
- 2019春Python程序设计练习4(4.9-4.15)
1-1 如下代码可以实现当输入6的时候输出x>5,输入4的时候输出 3<x<=5,输入1的时候输出x<=3 x = int(input()) if x>5: print( ...
- HTML标签与属性
HTML中常用的一些标签和属性. 1.lang属性:搜索引擎 en:英文, zh:中文 2.meta:元数据 charset属性:字符集编码方式 3.h1~h6:标题 一级标题 ...
- java文件上传下载解决方案
javaweb上传文件 上传文件的jsp中的部分 上传文件同样可以使用form表单向后端发请求,也可以使用 ajax向后端发请求 1.通过form表单向后端发送请求 <form id=" ...
- [HG]走夜路 题解
前言 整个机房就我一个人在想动态规划. 想了半天发现一堆性质,结果由于DP中出现折线挂了. 题目描述 某NOIP普及组原题加强版. \(Jim\) 非常怕黑,他有一个手电筒,设手电筒的电量上限为 \( ...