1.通过id获取html元素

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8. <div id="mydiv" style="border:1px solid red">我是div，我的id是mydiv</div>
  9. <script>
  10.     var x=document.getElementById("mydiv").innerHTML;
  11.     document.write(x+"(我是通过javascript获取的)");
  12. </script>
  13. </body>
  14. </html>

2.通过class来获取html元素

1）一个类名的情况

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8. <p style="border:1px solid red" class="aaa">我是p,我的类名是aaa</p>
  9. <span style="border:1px solid red" class="aaa">我是span,我的类名是aaa</span>
  10. <script>
  11.    function getByClass(iclass){  //封装函数
  12.        var Result=[];//存放结果的数组
  13.        var allElement=document.getElementsByTagName("*"); //得到所有元素
  14. //       遍历所有元素，如果和给定的参数匹配，则这个元素被放进Result数组中
  15.        for(var i=0;i<allElement.length;i++){
  16.            if(allElement[i].className==iclass){
  17.                Result.push(allElement[i]);
  18.            }
  19.        }
  20.        return Result;  //返回最后结果数组
  21.    }
  22. //    通过以下方法来调用
  23.     window.onload=function(){
  24.         var arr= getByClass("aaa");
  25. //        循环输出显示元素
  26.         for(var i=0;i<arr.length;i++){
  27.             document.write(arr[i].innerHTML+"(我是javascript获得的)<br>");
  28.         }
  29.     }
  30. </script>
  31. </body>
  32. </html>

2）两个类名的情况（例如class="aaa bb"）

①正则表达式的方法

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8. <p style="border:1px solid red" class="aaa bb c">我是p,我的类名是aaa bb c</p>
  9. <span style="border:1px solid red" class="bb c">我是span,我的类名是c</span>
  10. <script>
  11.    function getByClass(iclass){  //封装函数
  12.        var Result=[];//存放结果的数组
  13.        var allElement=document.getElementsByTagName("*"); //得到所有元素
  14. //       遍历所有元素，如果和给定的参数匹配，则这个元素被放进Result数组中
  15. //       正则模式
  16.        var re=new RegExp("\\b"+iclass+"\\b","g");
  17.        for(var i=0;i<allElement.length;i++){
  18. //           字符串search方法判断是否存在匹配
  19.            if(allElement[i].className.search(re)!=-1){
  20.                Result.push(allElement[i]);
  21.            }
  22.        }
  23.        return Result;  //返回最后结果数组
  24.    }
  25. //    通过以下方法来调用
  26.     window.onload=function(){
  27.         var arr= getByClass("bb");
  28. //        循环输出显示元素
  29.         for(var i=0;i<arr.length;i++){
  30.             document.write(arr[i].innerHTML+"(我是javascript获得的)<br>");
  31.         }
  32.     }
  33. </script>
  34. </body>
  35. </html>

②类名获取--数组方式

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8. <p style="border:1px solid red" class="aaa bb c">我是p,我的类名是aaa bb c</p>
  9. <span style="border:1px solid red" class="bb c">我是span,我的类名是bb c</span>
  10. <script>
  11.    function getByClass(iclass){  //封装函数
  12.        var Result=[];//存放结果的数组
  13.        var allElement=document.getElementsByTagName("*"); //得到所有元素
  14. //       遍历所有元素，将元素类名分割为字符串数组，再遍历字符串数组元素，如果与所给参数匹配，则这个元素被放进Result数组中
  15.        for(var i=0;i<allElement.length;i++){
  16.            var arr=allElement[i].className.split(/\s+/); //字符串分割为数组
  17.            for(var j=0;j<arr.length;j++){
  18.                if(arr[j]==iclass){
  19.                  Result.push(allElement[i]);
  20.                }
  21.            }
  22.        }
  23.        return Result;  //返回最后结果数组
  24.    }
  25. //    通过以下方法来调用
  26.     window.onload=function(){
  27.         var arr= getByClass("bb");
  28. //        循环输出显示元素
  29.         for(var i=0;i<arr.length;i++){
  30.             document.write(arr[i].innerHTML+"(我是javascript获得的)<br>");
  31.         }
  32.     }
  33. </script>
  34. </body>
  35. </html>

3.通过标签来获得html元素

Javascript获取html元素的几种方法的更多相关文章

  1. javascript 获取html元素的三种方法

    操作HTML元素 你首先找到该元素. 三种方法来做这件事: 通过id找到HTML元素 通过标签名找到HTML元素 通过类名找到HTML元素 通过id查找HTML元素 在DOM中查找HTML元素的最简单 ...

  2. JS获取DOM元素的八种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...

  3. JavaScript获取样式值的几种方法学习总结

    本人经过整理总结出以下获取样式值的方法,如有错误请各位大佬指正. 有四种方法:style,currentStyle,getComputedStyle,rules 与 cssRules方法. 1. st ...

  4. Javascript获取value值的三种方法及注意点

    JavaScript获取value值,主要有以下三种: 1.用document.getElementById(“id名”).value来获取(例1): 2.通过form表单中的id名或者name名来获 ...

  5. jQuery -&gt; 获取后代元素的三种方法

    假设我们有内容例如以下的html文件,那么怎样选取包括在<p>元素内的<i>元素呢? 邪馬台国の謎と弥生時代 紀元前1000年ごろ.水稲工作の技術をもつ集団が大挙して日本に移住 ...

  6. JavaScript获取鼠标位置的三种方法

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的游览器下会有不同的结果甚至是有的游览器下没结果,这篇文章就鼠标点击位置坐标获取做一些简单的总结. 获取鼠 ...

  7. Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID

    query取得iframe中元素的几种方法 在iframe子页面获取父页面元素代码如下: $('#objId', parent.document);// 搞定... 在父页面 获取iframe子页面的 ...

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

    什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...

  9. javascript 获取iframe元素的方法

    javascript  获取iframe元素的方法 第一种: $("#IframeID").contents().find("div"); 第二种: $(win ...

随机推荐

  1. pmf文件

    1.首先是视频软件,其次还是DISKGENI(磁盘分区软件),当作镜像文件恢复文件到磁盘(类似ISO).2.PMF文件为主要与primarily Pegasus Mail Message Attach ...

  2. arm开发板make编译时遇到 make[2]:*** [s-attrtab] 已杀死 问题的解决方案

    未验证 出现“make[2]: *** [s-attrtab] 已杀死”log 是由于内存不足 解决方案 增加swapfile 步骤如下: 1. 查看当前swapfile状态 root@ubuntu: ...

  3. ios json数据null的处理

    此处我把json数据中的null转换成了@"",防止出现null程序崩掉,可以把下边宏代码复制到pch中,就可以在整个程序中引用了 #define DSStringValue(va ...

  4. inode、软硬链接

    关于inode是什么,可以看这篇文章:http://www.cnblogs.com/adforce/p/3522433.html 如何查看inode ll -di /boot / /app查看文件和文 ...

  5. UVA - 1640 The Counting Problem (数位dp)

    题意:统计l-r中每种数字出现的次数 很明显的数位dp问题,虽然有更简洁的做法但某人已经习惯了数位dp的风格所以还是选择扬长避短吧(说白了就是菜啊) 从高位向低位走,设状态$(u,lim,ze)$表示 ...

  6. poj1740 A New Stone Game[博弈]

    有若干堆石子,每一次需要从一堆石子中拿走一些,然后如果愿意的话,再从这堆石子中拿一些(揣度题意应该是不能拿出全部)分给其它任意不为空的堆.不能操作的人为负. 一直不会博弈啊..感觉完全就是个智商题,虽 ...

  7. LightOJ-1079-Just another Robbery(概率, 背包)

    链接: https://vjudge.net/problem/LightOJ-1079#author=feng990608 题意: As Harry Potter series is over, Ha ...

  8. 语法注释格式；格式化输出；input在py2和py3中的区别；数据的基本类型；运算符；

    一.Python中的注释 Python的注释是代码的评论,是让代码让人能更加清晰明确.代码的注释可分为单行注释和多行注释,单行注释用“#”,多行注释用三对单引号或者三对双引号来表示. ps:# 单行注 ...

  9. UOJ #460. 新年的拯救计划 神仙题+构造

    对于这个神仙题,我还能说什么~ 第一个答案=$n/2$ 还是比较好猜的. 对于构造这个树,大概就是先从 $1$ 号节点向 $n/2$ 距离以内都连一条边,再在第 $n/2$ 个节点进行这个操作,然后从 ...

  10. jQuery_attr()操作

    下面来介绍jQuery的属性attr()操作: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...