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元素的几种方法的更多相关文章

  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. 在linux环境下安装oracle的问题记录

    问题1 xhost:unable to open display 解决办法: 在linux虚拟机本机打开终端,执行 [root@bogon ~]# DISPLAY=:0.0;export DISPLA ...

  2. Oracle批量导出表数据到CSV文件

    需求:把oracle数据库中符合条件的n多表,导出成csv文本文件,并以表名.csv为文件名存放. 实现:通过存储过程中utl_file函数来实现.导出的csv文件放入提前创建好的directory中 ...

  3. libusb-test

    /******************************************************************************** * * File Name : li ...

  4. 第二章 Vue快速入门-- 27 字符串的padStart方法使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. tomcat 搭建网站

    基本概念 JDK(Java Development Kit)是Sun Microsystems针对Java开发人员的产品.自从Java推出以来,JDK已经成为使用最广泛的Java SDK.JDK 是整 ...

  6. HDU6736 2019CCPC秦皇岛赛区 F. Forest Program

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=6736思路:dfs+栈 判环           设图中环的大小分别为 c1, c2, ..., ck,不属 ...

  7. libkmcuda安装

    编译安装 1,前期准备 git clone https://github.com/src-d/kmcuda cd kmcuda/src/ 例如: cmake -DCMAKE_BUILD_TYPE=Re ...

  8. PHP教程-反序列化的方法

    序列化是将变量转换为可保存或传输的字符串的过程:反序列化就是在适当的时候把这个字符串再转化成原来的变量使用.这两个过程结合起来,可以轻松地存储和传输数据,使程序更具维护性.兄弟连PHP培训() 1. ...

  9. Codeforces 1213F Unstable String Sort

    cf题面 中文题意 求一个由最多26个.最少k个小写字母构成的,长度为n的字符串,这个字符串要满足的要求是--当其中字母按照p和q两个\(1\)~\(n\)的全排列重新排序时,新的字符串是按照升序排好 ...

  10. Python3学习笔记（十四）：可迭代对象、迭代器和生成器

    记得在刚开始学Python的时候,看到可迭代对象(iterable).迭代器(iterator)和生成器(generator)这三个名词时,完全懵逼了,根本就不知道是啥意识.现在以自己的理解来详解下这 ...