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. 001-CentOS 7系统搭建Rsyslog+LogAnalyzer解决交换机日志收

    日志功能对于操作系统是相当重要的,在使用中,无论是系统还是应用等等,出了任何问题,我们首先想到的便是分析日志,查找问题原因.自 CentOS 7 开始,我们的 CentOS 便开始使用 rsyslog ...

  2. SQL truncate 、delete与drop区别(转)

    相同点: 1.truncate和不带where子句的delete.以及drop都会删除表内的数据. 2.drop.truncate都是DDL语句(数据定义语言),执行后会自动提交. 不同点: 1. t ...

  3. Ubuntu下查看so文件的函数列表

    Ubuntu下查看so文件的函数列表   可使用如下命令: 1.nm -D XXX.so 2.objdump -tT  XXX.so   nm libcyusb.so | grep "usb ...

  4. 权限和ACL访问控制-02-特殊权限

    X(大写) X:给目录x权限,不给文件x权限(当文件本来就有x权限的话会重新赋予x权限) 例如: chmod -R +X dir2 SUID SUID属性一般运用在可执行文件上,当用户执行该执行文件时 ...

  5. noi.ac NA529 【神树的矩阵】

    表示今天一发A了这题拿了rk3...是个sb构造... 考虑除了\(n=1/m=1\)的情况,最小次数\(ans\)不会\(>3\). 对于\(n=1/m=1\),暴力即可. 然后考虑\(ans ...

  6. Robot Framework xpath定位不到元素

    不要使用Click Button关键字-严格来说,该关键字适用于该<button>类型的html元素. 而是使用Click Element-您的目标元素是<a>,然后Click ...

  7. node的安装和配置教程

    node,除了做数据服务处理,还是各大框架的环境依赖,作为前端开发人员,node是必不可少的.好了,接下来直接开始. 一.根据自己的安装环境(即你的电脑系统版本)下载对应安装包,官网地址:https: ...

  8. linux运维、架构之路-K8s通过Service访问Pod

    一.通过Service访问Pod 每个Pod都有自己的IP地址,当Controller用新的Pod替换发生故障的Pod时,新Pod会分配到新的IP地址,例如:有一组Pod对外提供HTTP服务,它们的I ...

  9. postman -- token全局变量

    var data = JSON.parse(responseBody);if (data.data.token) { tests["Body has token"] = true; ...

  10. Kaggle 网站上的练习

    快速的数据科学教程: https://www.kaggle.com/learn/overview