1.根据id获取元素

document.getElementById("id属性的值");

2.根据标签名字获取元素

document.getElementsByTagName("标签的名字");

3.根据name属性的值获取元素

document.getElementsByName("name属性的值");

4.根据类样式的名字获取元素

document.getElementsByClassName("类样式的名字");

5.根据选择器获取元素

1.document.querySelector("选择器");

2.document.querySelectorAll("选择器");
0.码仙励志

强者征服今天，懦夫哀叹昨天，懒汉坐等明天
1.根据id获取元素
document.getElementById("id属性的值");

返回值是一个元素对象

案例：点击按钮弹框

<body>
    <input type="button" value="弹框" id="btn">
    <script>
        //根据id属性的值从文档中获取这个元素
        var btnobj = document.getElementById("btn");
       //为当前的这个按钮元素(对象),注册点击事件,添加事件处理函数(匿名函数)
        btnobj.onclick = function () {
            //响应做的事情
            alert("码仙");
        };
    </script>
    </body>

2.根据标签名字获取元素
document.getElementsByTagName("标签的名字");

返回值是一个伪数组

案例:点击按钮改变多个p标签的文字内容

<body>
    <input type="button" value="改变" id="btn">
    <div id="dv">
        <p>哈哈,我又变帅了</p>
        <p>哈哈,我又变帅了</p>
        <p>哈哈,我又变帅了</p>
        <p>哈哈,我又变帅了</p>
        <p>哈哈,我又变帅了</p>
    </div>
    <script>
        //根据id获取按钮,注册点击事件,添加事件处理函数
        document.getElementById("btn").onclick = function () {
            //根据标签名字获取标签
            var pObjs = document.getElementsByTagName("p");
            //var pObjs=document.getElementById("dv1").getElementsByTagName("p");
            //循环遍历这个数组
            for (var i = 0; i < pObjs.length; i++) {
                //每个p标签,设置文字
                pObjs[i].innerText = "我们都是p";
            }
        };
    </script>
    </body>

3.根据name属性的值获取元素
document.getElementsByName("name属性的值");

返回值是一个伪数组

案例:案例:点击按钮,改变所有name属性值为name1的文本框中的value属性值

<body>
    <input type="button" value="显示效果" id="btn"/><br/>
    <input type="text" value="您好" name="name1"/><br/>
    <input type="text" value="您好" name="name2"/><br/>
    <input type="text" value="您好" name="name1"/><br/>
    <input type="text" value="您好" name="name3"/><br/>
    <input type="text" value="您好" name="name1"/><br/>
    <input type="text" value="您好" name="name1"/><br/>
    <script>
        //点击按钮,改变所有name属性值为name1的文本框中的value属性值
        document.getElementById("btn").onclick = function () {
            //通过name属性值获取元素-------表单的标签
            var inputs = document.getElementsByName("name1");
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].value = "我很好";
            }
        };
    </script>
    </body>

4.根据类样式的名字获取元素
document.getElementsByClassName("类样式的名字");

返回值是一个伪数组

案例:修改所有文本框的值

<body>
    <input type="button" value="修改文本框的值" id="btn"/><br/>
    <input type="text" value="" class="text"/><br/>
    <input type="text" value="" class="text"/><br/>
    <input type="text" value="" class="text"/>
    <script>
        //根据id获取按钮,为按钮注册点击事件,添加事件处理函数
        document.getElementById("btn").onclick = function () {
            //获取所有的文本框
            //根据类样式的名字获取元素
            var inputs = document.getElementsByClassName("text");
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].value = "码仙";
            }
        };
    </script>
    </body>

5.根据选择器获取元素
1.document.querySelector("选择器");

返回值是一个元素对象

案例：点击按钮弹框

<body>
    <input type="button" value="显示效果1" id="btn"/>
    <input type="button" value="显示效果2" class="btn"/>
    <script>
        //点击按钮弹出对话框
        //根据选择器的方式获取元素
        var btnObj1 = document.querySelector("#btn");
        btnObj1.onclick = function () {
            alert("我变帅了");
        };
        var btnObj2 = document.querySelector(".btn");
        btnObj2.onclick = function () {
            alert("哈哈,我又变帅了");
        };
    </script>
    </body>

2.document.querySelectorAll("选择器");

返回值是一个伪数组

案例:修改所有文本框的值

<body>
    <input type="button" value="修改文本框的值" id="btn"/><br/>
    <input type="text" value="" class="text"/><br/>
    <input type="text" value="" class="text"/><br/>
    <input type="text" value="" class="text"/>
    <script>
        document.getElementById("btn").onclick = function () {
            //根据选择器的方式获取元素
            var inputs = document.querySelectorAll(".text");
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].value = "码仙";
            }
        };
    </script>
    </body>

JavaScript中几种 获取元素的方式的更多相关文章

  1. Hibernate中两种获取Session的方式

    转自:https://www.jb51.net/article/130309.htm Session:是应用程序与数据库之间的一个会话,是hibernate运作的中心,持久层操作的基础.对象的生命周期 ...

  2. JavaScript DOM三种创建元素的方式

    三种创建元素的方式: document.write() element.innerHTML document.createElement() 初始HTML内容: <button>btn&l ...

  3. java中几种获取项目路径方式

    转自http://caodaoxi.iteye.com/blog/1234805     在jsp和class文件中调用的相对路径不同. 在jsp里,根目录是WebRoot 在class文件中,根目录 ...

  4. java(JSP)中几种获取项目路径方式

    在jsp和class文件中调用的相对路径不同. 在jsp里,根目录是WebRoot 在class文件中,根目录是WebRoot/WEB-INF/classes 当然你也可以用System.getPro ...

  5. JavaScript中四种不同的属性检测方式比较

    JavaScript中四种不同的属性检测方式比较 1. 用in方法 var o = {x:1}; "x" in o; //true "y" in o; //fa ...

  6. Spring中三种配置Bean的方式

    Spring中三种配置Bean的方式分别是: 基于XML的配置方式 基于注解的配置方式 基于Java类的配置方式 一.基于XML的配置 这个很简单,所以如何使用就略掉. 二.基于注解的配置 Sprin ...

  7. JavaScript中两种类型的全局对象/函数【转】

    Snandy Stop, thinking is the essence of progress. JavaScript中两种类型的全局对象/函数 这里所说的JavaScript指浏览器环境中的包括宿 ...

  8. Request三种获取数据的方式

    今天在做ajax请求后台代码时,发现ajax的方法都对,但就是请求不了后台代码,后来在同事帮助下才发现前台定义了两个相同参数导致请求出错. 下面记录一下request三种获取数据的方式: 1. Req ...

  9. 两种获取connectionString的方式

    两种获取connectionString的方式 1. public static string connectionString = ConfigurationManager.ConnectionSt ...

随机推荐

  1. Spark2 生存分析Survival regression

    在spark.ml中,实现了加速失效时间(AFT)模型,这是一个用于检查数据的参数生存回归模型. 它描述了生存时间对数的模型,因此它通常被称为生存分析的对数线性模型. 不同于为相同目的设计的比例风险模 ...

  2. java 中常见的一些错误

    1.NosuchMethodError java 类中找不到该方法! 可能该类所在的同一个包下有一个相同的相同的类,然后那个类中没有我们所要调用的类. 解决方法:若那个类不需要,可以删除class! ...

  3. 从经典面试题看java中类的加载机制

    1.概述 类加载是Java程序运行的第一步,研究类的加载有助于了解JVM执行过程,并指导开发者采取更有效的措施配合程序执行,对理解java虚拟机的连接模型和java语言的动态性都有很大帮助. 由于Ja ...

  4. ElasticSearch报 EsThreadPoolExecutor[search, queue capacity = 1000, org.elasticsearch.common.util.concurrent.EsThreadPoolExecutor@c0efba

    ElasticSearch报以下错误的解决办法: "type": "es_rejected_execution_exception", "reason ...

  5. 迷宫城堡--hdu1269（连通图）

    题目链接 连通图模板题:   #include<cstdio> #include<cstdlib> #include<cmath> #include<iost ...

  6. 优云软件助阵ArchSummit全球架构师峰会

    由极客邦科技与 InfoQ 中国主办的 ArchSummit 全球架构师峰会深圳站,于 7 月 7 日 - 8 日在深圳华侨城洲际酒店举办. 本次大会特邀 100 多位国内外技术专家,与1000余名技 ...

  7. 【JMeter】JMeter进行简单的数据库（mysql)压力测试

    JMeter进行简单的数据库(mysql)压力测试 1.点击测试计划,再点击“浏览”,把JDBC驱动添加进来: 注:JDBC驱动一般的位置在java的安装地址下,路径类似于:    \java\jre ...

  8. Dom最常用的API

    document方法: getElementById(id) Node 返回指定结点的引用 getElementsByTagName(name) NodeList 返回文档中所有匹配的元素的集合 cr ...

  9. 简单mysql常用命令

    在命令行 输入 mysql -uroot -p123456 (-u账号 -p密码)登入mysql服务器 1.设置mysql密码set password for 'root'@'localhost' = ...

  10. Biorhythms(中国剩余定理)

    http://shuxueshi.jie.blog.163.com/blog/static/13611628820104179856631/ 这篇博客写的很棒! #include<stdio.h ...