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. Shell转义字符与变量替换

    转义字符 含义 \\ 反斜杠 \a 警报,响铃 \b 退格(删除键) \f 换页(FF),将当前位置移到下页开头 \n 换行 \r 回车 \t 水平制表符(tab键)  \v 垂直制表符 vim te ...

  2. POJ-2081 Recaman's Sequence

    Recaman's Sequence Time Limit: 3000MS Memory Limit: 60000K Total Submissions: 22392 Accepted: 9614 D ...

  3. ubuntu14.04下编译支持opengl的opencv

    在学习基于opencv的AR时,编译程序遇到报错,发现opencv不支持opengl.网上原因得知,在编译opencv时,opencv2.4以后的版本中默认ENABLE_OPENGL = NO,只需要 ...

  4. 【转】C#线程篇

    C# 温故而知新: 线程篇(一) C# 温故而知新: 线程篇(二) C# 温故而知新:线程篇(三) C# 温故而知新: 线程篇(四)

  5. Codeforces Round #439 (Div. 2)

    A. The Artful Expedient 题目链接:http://codeforces.com/contest/869/problem/A 题目意思:给你两个数列,各包含n个数,现在让你从上下两 ...

  6. Integral transform 积分变换

    总结: 1.为了更加便于求解,将方程从原域映射到另外一个域 Integral transform - Wikipedia https://en.wikipedia.org/wiki/Integral_ ...

  7. intptr_t、uintptr_t数据类型的解析

    https://blog.csdn.net/cs_zhanyb/article/details/16973379 2013年11月26日 22:20:09 binggo 阅读数:14066   最近开 ...

  8. Master Boot Record

    https://en.wikipedia.org/wiki/Master_boot_record https://zh.wikipedia.org/wiki/主引导记录 A master boot r ...

  9. Android内存泄漏的本质原因、解决办法、操作实例

    今年最后一个迭代终于结束了,把过程中碰到的不熟悉的东西拉出来学习总结一下   内存泄漏的本质是:[一个(巨大的)短生命周期对象的引用被一个长生命周期(异步生命周期)的对象持有]   这个东西分为两个部 ...

  10. android(五)----使用WakeLock使Android应用程序保持后台唤醒

    在使用一些产品列如微信.QQ之类的,如果有新消息来时,手机屏幕即使在锁屏状态下也会亮起并提示声音,这时用户就知道有新消息来临了. 但是,一般情况下手机锁屏后,Android系统为了省电以及减少CPU消 ...