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. host文件介绍

    默认位置为%SystemRoot%\system32\drivers\etc\,但也可以改变. 动态目录由注册表键\HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSe ...

  2. 牛客练习赛47 E DongDong数颜色 （树状数组维护区间元素种类数）

    链接:https://ac.nowcoder.com/acm/contest/904/E 来源:牛客网 DongDong数颜色 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 5242 ...

  3. 用IDesktopWallpaper接口设置png壁纸

    #include <Windows.h> #include <string> #include "Shobjidl.h" int main() { std: ...

  4. mysql怎么查看数据库中表的大小

    查看mysql数据库大小的四种办法,分别有以下四种:第一种:进去指定schema 数据库(存放了其他的数据库的信息)use information_schema第二种:查询所有数据的大小select ...

  5. 【JZOJ5430】【NOIP2017提高A组集训10.27】图

    题目 有一个n个点的无向图,给出m条边,每条边的信息形如\(<x,y,c,r>\) 给出q组询问形如\(<u,v,l,r>\) 接下来解释询问以及边的意义 询问表示,一开始你在 ...

  6. Tushare基础调用及处理

    创建索引: db.daily.createIndex({code:1,date:1,'index':1}) mongodb查看表有几列: map = function() { for (var key ...

  7. ConfigMap-k8s

    创建方式 创建ConfigMap的方式有4种: 1,通过直接在命令行中指定configmap参数创建,即--from-literal 2,通过指定文件创建,即将一个配置文件创建为一个ConfigMap ...

  8. mongodb性能测试：long时间戳与string格式时间

    string格式时间写入数据: { "_id" : ObjectId("5d314731a96f332d6c3193d4"), "news_id&qu ...

  9. css grid 随笔

    原文出自Arien的博客https://www.w3cplus.com/css3/line-base-placement-layout.html 首先定义一个网格 1.可以给父容器的display属性 ...

  10. 51 Nod 1627瞬间移动(插板法!)

    1627 瞬间移动  基准时间限制:1 秒 空间限制:131072 KB 分值: 80 难度:5级算法题  收藏  关注 有一个无限大的矩形,初始时你在左上角(即第一行第一列),每次你都可以选择一个右 ...