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. 记一次centos7内核可能意外丢失（测试直接干掉）恢复方法

    本次是虚拟机装的centos7的内核不知原因以外丢失造成无法开机,开机显示找不到内核! 恢复方法: 挂载新的ISO文件,然后进入bios选择dvd启动. 启动后进入Troublesshooting,然 ...

  2. Spark+IDEA单机版环境搭建+IDEA快捷键

    1. IDEA中配置Spark运行环境 请参考博文:http://www.cnblogs.com/jackchen-Net/p/6867838.html 3.1.Project Struct查看项目的 ...

  3. DS作业·写了一个链表

    用struct手写了个list 有push_back,push_front,insert,erase reserve,size,setpos,rbegin 功能. 坑:一开始想用template< ...

  4. 判断tableViewCell是否在可视区

    1.- (NSArray *)visibleCells; UITableview 的方法,这个最直接,返回一个UITableviewcell的数组. 对于自定义的cell,之后的处理可能会稍微复杂. ...

  5. Pragma: no-cache

    PHP Advanced and Object-Oriented Programming Larry Ullman   Last-Modified 最后修改时间 Expires 过期时间 Pragma ...

  6. sql中rownumber（）over（）的用法

    语法: ROW_NUMBER ( ) OVER ( [ PARTITION BY value_expression , ... [ n ] ] order_by_clause ) 通过语法可以看出 o ...

  7. 推荐两个国外网站-帮你优化网站SEO和预测下期的PR值

    第一个:http://www.domaintools.com/ (谷歌SEO网站优化伴侣)可以测试你优化网站的分数. 这里使用说明,简单说一下吧: 打开网站后输入自己的域名,点击搜索按钮 第二个查看分 ...

  8. BigDecimal精度与相等比较的坑

    先想一下,创建BigDecimal对象的时候一般是怎么创建的? new一个,传进去值 BigDecimal.valueOf方法,传进去值 作为一个数字类型,经常有的操作是比较大小,有一种情况是比较是否 ...

  9. tcp3次握手，https加密，ca认证

    参考: https://baijiahao.baidu.com/s?id=1570143475599137&wfr=spider&for=pc

  10. /etc/rc.d/rc.local 自定义开机启动程序

    /etc/rc.d/rc.local 用于用户自定义开机启动程序,可以往里写开机要执行的命令或脚本,线上的配置如下: [root@localhost ~]$ cat /etc/rc.d/rc.loca ...