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. Sql Server 常用日期格式

    SQL Server中文版的默认的日期字段datetime格式是yyyy-mm-dd Thh:mm:ss.mmm 例如: select getdate() 2004-09-12 11:06:08.17 ...

  2. Hdu第八场 树形dp+基环树

    Card Game 每个牌背面的数字朝正面的数字连一条有向边 则题目变为问你最少翻转多少次 能使得每个数字的入度不超过1 首先判断图中每个连通块是不是树或者基环树 因为只有树或者基环树能使得每个点的入 ...

  3. Java 基础知识点滴（1）

    1. ==与equals的区别 ==是用来判断两个变量的值是否相等.要比较两个基本变量或引用变量是否相等,只能用==: equal用来判断两个独立对象里面的内容是否一样. 例子: String s1 ...

  4. shoeBox超实用的雪碧图（Sprite）图制作工具-使用

    从前端优化说起 浏览器载入单张图片的速度基本取决于图片的大小,但是载入多张图片的速度却和另一个要素息息相关-网络请求数,在图片大小和一致的情况下,图片张数越少其请求数越少其载入速度也就越快.所以在使用 ...

  5. adb简介

    Android 调试桥 (adb) 是一种功能多样的命令行工具,可让您与设备进行通信.adb 命令便于执行各种设备操作(例如安装和调试应用),并提供对 Unix shell(可用来在设备上运行各种命令 ...

  6. vue admin element

    vue.package.js    修改  publicPath: './',

  7. 关于mysql，sqlserverl，与oracle数据库连接总结

    首先准备工具类,其中需要修改的地方分别做标注 代码一sqlserver为例,不同数据库只需修改我所标记的第一处和第二处 mysql     第一处应为:com.mysql.jdbc.Driver   ...

  8. html中删除表格的一行(有弹窗)

    html中删除表格一行其实很简单,但是加上一个提示弹窗后,点击确定后却获取不到要删除的是哪一行,下面是一个demo html: <tr> <td> <input type ...

  9. qt5-Qt Creator使用

    设置编码: 工具-->选项-->文本编辑器-->行为-->编辑器 中文编译失败的解决: 编辑-->--> 在头文件中增加:--解决乱码问题(文本所在的头文件) #i ...

  10. [JZOJ6244]【NOI2019模拟2019.7.1】islands【计数】【图论】

    Description n<=1e9,M,K<=100 Solution 显然任选m个港口的答案是一样的,乘个组合数即可. 考虑枚举m个港口的度数之和D 可以DP计算 记\(F_{m,D} ...