几种常见的获取页面元素数据的方法

简介: 几种常见的获取页面元素数据的方法

页面之所以是动态的,其实不仅仅是因为他是具有js的动态效果的,还有一部分是因为他的数据是动态的,所以页面才会显得很有活性,但是很多的时候获取数据是一个很恶心的事情,动不动就拿不到数据,作为一个前端,其实很大一部分时间也都是在处理数据,今天简单的将常见的几种获取数据的办法记录一下,不为别的,以后可以直接用,虽然简单的要死,但是还是记录一下比较好,说不定哪天脑子抽风忘记了....

源码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <!--第一种 form层级取数据 -->
  <form name="test">
    <input type="text" name="ftest" value="我是form层级取出来的数据"/><br />
  </form> 
  <!--dom操作name取数据-->   
  <input type="text" name="test_name" value="我是操作dom的name取出来的数据"/><br />
  <!--dom操作id取数据-->
  <input type="text" id="test_id" value="我是操作dom的id取出来的数据"/><br />
  <!--Jquery根据class获取数据-->
  <input type="text" class="Jquery_class" value="我是jquery根据class取出来的数据"/><br />
  <!--Jquery根据id获取数据-->
  <input type="text" id="Jquery_id" value="我是jquery根据id取出来的数据"/><br />
  </body>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript">
    window.onload = function(){
      /*第一种*/
    var test1 = document.test.ftest.value;
    console.log("第一种取出来的数据是:"+test1);
    /*第二种*/
    var test2 = document.getElementsByName("test_name");
    console.log("第二种取出来的数据是:"+test2.length);
    /*第三种*/
    var test3 = document.getElementById("test_id").value;
    console.log("第三种取出来的数据是:"+test3);
    /*第四种*/
    var test4 = $(".Jquery_class").val();
    console.log("第四种取出来的数据是:"+test4);
    /*第五种*/
    var test5 = $("#Jquery_id").val();
    console.log("第五种取出来的数据是:"+test5);
    }
  </script>
</html>
PS:页面操作dom元素的时候,如果是操作的是name,那么是不可以直接拿到数据的,是因为页面上是允许多个name属性的,所以nana取得其实是元素,不是数据,也就是说您可以在一个页面上面写很多的name,最后获取的是所有的长度。

相关文章
|
7月前
|
JavaScript 前端开发
页面插入元素
页面插入元素
57 8
|
19天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
7月前
|
前端开发 JavaScript 索引
改变数组页面重新渲染的操作/那些操作不会重新渲染页面以及解决方法
改变数组页面重新渲染的操作/那些操作不会重新渲染页面以及解决方法
51 2
|
7月前
|
容器
微搭低代码实现下拉框动态填充值
微搭低代码实现下拉框动态填充值
|
7月前
|
算法 前端开发
前端算法-移除元素
前端算法-移除元素
|
7月前
|
JavaScript
【sgDrag】自定义组件:基于Vue开发支持批量声明拖拽元素、被碰撞元素,拖拽全过程监听元素碰撞检测并返回拖拽原始元素、克隆元素及其getBoundingClientRect对象和碰撞接触元素数组。
【sgDrag】自定义组件:基于Vue开发支持批量声明拖拽元素、被碰撞元素,拖拽全过程监听元素碰撞检测并返回拖拽原始元素、克隆元素及其getBoundingClientRect对象和碰撞接触元素数组。
|
JavaScript
jQuery动态增加一行元素和删除一行元素
jQuery动态增加一行元素和删除一行元素
32 0
|
前端开发
前端 video 元素总是浮在最上方,增加一个 z-index 属性
前端 video 元素总是浮在最上方,增加一个 z-index 属性
|
数据库 开发者 索引
列表增加元素|学习笔记
快速学习列表增加元素
列表增加元素|学习笔记