扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript中有哪些获取元素的方法
  • 744

0
分享到

JavaScript中有哪些获取元素的方法

2024-04-02 19:04:59 744人浏览 安东尼
摘要

这篇文章主要介绍“javascript中有哪些获取元素的方法”，在日常操作中，相信很多人在JavaScript中有哪些获取元素的方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解

这篇文章主要介绍“javascript中有哪些获取元素的方法”，在日常操作中，相信很多人在JavaScript中有哪些获取元素的方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”JavaScript中有哪些获取元素的方法”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

JavaScript中获取元素的方法有：1、根据id获取元素；2、根据标签名字获取元素；3、根据name属性的值获取元素；4、根据类样式的名字获取元素；5、根据选择器获取元素。

本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

1.根据id获取元素

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

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

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

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

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

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

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

5.根据选择器获取元素

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

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

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">
    <p id="dv">
        <p>哈哈,我又变帅了</p>
        <p>哈哈,我又变帅了</p>
        <p>哈哈,我又变帅了</p>
        <p>哈哈,我又变帅了</p>
        <p>哈哈,我又变帅了</p>
    </p>
    <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中有哪些获取元素的方法”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！

--结束END--

本文标题: JavaScript中有哪些获取元素的方法

本文链接: https://lsjlt.com/news/73565.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript中有哪些获取元素的方法
    这篇文章主要介绍“JavaScript中有哪些获取元素的方法”，在日常操作中，相信很多人在JavaScript中有哪些获取元素的方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解...
    99+
    2024-04-02
  • javascript获取元素的方式有哪些
    javascript中获取元素的方式有：1.根据id获取元素；2.根据标签名获取元素；3.根据name属性的值获取元素；4.根据class样式获取元素 ；5.根据选择器获取元素 ；javascript中获取元素的方式有以下几种根据id获取元...
    99+
    2024-04-02
  • python获取元素有哪些方法
    在python中获取元素的方法有以下两种利用索引获取元素通过索引只能获取一个值，且得到值的数据类型是由该值决定的。li=["name","age","gender"]print(li[1])#输出：age通过切片获取元素通过切片可以获取一个...
    99+
    2024-04-02
  • vue获取元素的方法有哪些
    在Vue中，获取元素的方法有以下几种：1. 使用`ref`属性：可以在模板中给元素添加`ref`属性，然后通过`this.$refs...
    99+
    2023-08-09
    vue
  • Vue中获取DOM元素的方法有哪些
    本文小编为大家详细介绍“Vue中获取DOM元素的方法有哪些”，内容详细，步骤清晰，细节处理妥当，希望这篇“Vue中获取DOM元素的方法有哪些”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。一、通过 $refs 获取...
    99+
    2023-07-05
  • javascript获取表单元素的方式有哪些
    javascript中获取表单元素的方式有：1.通过的元素id属性获取；2.通过元素的name属性获取；3.通过元素的index属性获取；javascript中获取表单元素的方式有以下几种通过元素的id属性获取表单元素var pass=do...
    99+
    2024-04-02
  • js获取html的元素方法有哪些
    JavaScript获取HTML元素的方法有以下几种：1. getElementById()：通过元素的id属性获取元素。例如：do...
    99+
    2023-08-09
    js html
  • javascript获取元素并删除的方法
    本篇内容主要讲解“javascript获取元素并删除的方法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“javascript获取元素并删除的方法”吧!javas...
    99+
    2024-04-02
  • javascript中数组元素删除方法有哪些
    这篇文章主要讲解了“javascript中数组元素删除方法有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“javascript中数组元素删除方法有哪些”吧！delete方法:delete...
    99+
    2023-06-03
  • javascript中怎么获取dom元素
    这篇文章给大家分享的是有关javascript中怎么获取dom元素的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。 获取方法：1、“document.g...
    99+
    2024-04-02
  • Go语言列表List获取元素的方式有哪些
    这篇文章主要介绍了Go语言列表List获取元素的方式有哪些的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Go语言列表List获取元素的方式有哪些文章都会有所收获，下面我们一起来看看吧。Golang的列表元素的获...
    99+
    2023-06-30
  • CSS元素居中的方法有哪些
    这篇文章主要介绍了CSS元素居中的方法有哪些的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇CSS元素居中的方法有哪些文章都会有所收获，下面我们一起来看看吧。# 内联元素水平居中...
    99+
    2024-04-02
  • JavaScript中怎么获取元素属性
    今天就跟大家聊聊有关JavaScript中怎么获取元素属性，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。首先我们需要把它们归类下：innerHTML...
    99+
    2024-04-02
  • JS获取表单中的元素和取值方法
    获取表单的四种方式 1、document.表单名称2、document.getElementById(表单 id);3、document.forms[表单名称]4、document....
    99+
    2024-04-02
  • javascript获取html页面值的方法有哪些
    这篇文章主要讲解了“javascript获取html页面值的方法有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“javascript获取html页面值的...
    99+
    2024-04-02
  • javascript获取数组长度的方法有哪些
    这篇文章主要介绍“javascript获取数组长度的方法有哪些”，在日常操作中，相信很多人在javascript获取数组长度的方法有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大...
    99+
    2024-04-02
  • JavaScript中获取数组最后一个元素方法汇总
    目录1. 数组 length 属性2. 数组 slice 方法3. 数组 pop 方法性能比较总结当需要从 JavaScript 中的数组中获取最后一个元素时，有多种选择，本文将提供...
    99+
    2023-02-06
    JavaScript获取数组最后一个元素 JavaScript获取数组最后一个元素方法 js 获取数组最后一个元素
  • css中元素的定位方法有哪些
    css 中，元素定位方法共有五种，包括：静态定位：默认定位，元素在页面中占据正常流位置。相对定位：相对于元素当前位置定位，脱离文档流但不影响其他元素。绝对定位：相对于包含元素定位，脱离文...
    99+
    2024-04-26
    css 绝对定位 相对定位 静态定位 固定定位 粘性定位
  • HTML中让元素居中的方法有哪些
    本文小编为大家详细介绍“HTML中让元素居中的方法有哪些”，内容详细，步骤清晰，细节处理妥当，希望这篇“HTML中让元素居中的方法有哪些”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识...
    99+
    2024-04-02
  • JavaScript中取整的方法有哪些
    这篇文章主要讲解了“JavaScript中取整的方法有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript中取整的方法有哪些”吧！ ...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作