首页 > 编程语言 >JavaScript中几种 获取元素的方式

JavaScript中几种 获取元素的方式

时间:2023-06-01 10:01:20浏览次数:41  
标签:inputs 元素 JavaScript 几种 获取 var document 选择器

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>

标签:inputs,元素,JavaScript,几种,获取,var,document,选择器
From: https://www.cnblogs.com/kn-zheng/p/17448110.html

相关文章

  • javascript 的 事件类型(事件)
    事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行。事件是文档或者浏览器窗口中发生的,特定的交互瞬间。事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字。事件是javaScript和DOM之间交互的桥梁。你若触发,我便执行——事件发生,调用......
  • 揭开 JavaScript 事件循环的神秘面纱
    Javascript是一种单线程语言,这意味着它一次只能执行一个任务。但是,它仍然设法同时执行多项任务。它通过使用一些复杂的数据结构给人一种多线程的错觉。为实现这一点,Javascript引擎有一个称为事件循环的重要组件。我们将了解什么是事件循环以及它如何在不阻塞主线程的情况下处理异......
  • python获取threading多线程的return返回值
    转载:(15条消息)python获取threading多线程的return返回值_pythonthreading返回值_星火燎愿的博客-CSDN博客我们正常使用threading模块创建的线程是无法获取它所执行方法的返回值的;如:w=threading.Thread(target=worker,args=(i,))一、重写线程,获取线程return返回值要想获......
  • 关于第一次学习JavaScript程序调试心得
    源程序如上,源代码来源(刘永富博士-ExcelVBA编程开发下册)。运行之后,网页无反应,alert不弹窗。经查询https://www.runoob.com/jsref/event-body-onload.htmlhttps://blog.csdn.net/sinat_29398599/article/details/65450485需添加onload事件。Bodyonload事件,onload事件在页......
  • JavaScript中的Hook技术:特性、优点、缺点和使用场景
    引言:随着JavaScript的不断发展,开发者们正在寻找更灵活和可扩展的方式来修改或扩展现有的代码。其中一种广泛应用的技术是"Hook",它允许开发者拦截和修改现有的函数或方法的行为。本文将详细介绍JavaScript中的Hook技术,包括其特性、优点、缺点和使用场景,并提供示例代码进行说明。什么......
  • Gorm - 使用gorm时进行执行自定义SQL的几种方式
    1、当只需要执行某个SQL而不需要进行获取返回值时//如果其中有变量,则使用?进行占位,sql:="要执行的SQL"//在Exec方法中在sql后面可以使用多个参数作为占位的补充//例如需要name=?,则写法可以使用util.Db.Exec(sql,"张三").Errorerr:=util.Db.Exec......
  • bat脚本在C:\Program Files (x86)使用普通权限运行与使用管理员权限运行获取当前路径
    bat脚本在C:\ProgramFiles(x86)使用管理员权限运行获取当前路径不对。bat脚本如下:@echooffset"current_dir=%cd%"echoCurrentdirectory:%current_dir%set"filepath=%current_dir%\1.txt"setlocalenabledelayedexpansionifexist"%filepath%"(......
  • 1688商品详情的获取以及应用
    要通过API接口从1688获取商品详情,需要进行以下步骤:1.获取AccessToken首先,您需要获取AccessToken。AccessToken是必需的,因为它是访问 API的身份验证凭证。2.构建API请求URL接下来,您需要构建一个包含所需参数的API请求URL。在请求中,您需要提供商品ID,应用程序......
  • 获取1688商品详情我们改如何使用
    在使用API接口获取1688商品详情时,我们可以获取到大量有用的信息,帮助我们更好地了解商品特性和市场趋势,从而做出更明智的决策。下面是一些步骤和技巧,在获取1688商品详情的过程中收集有用信息。首先,我们需要申请1688的API密钥,这样才能够调用API接口。接着,在API文档中找到“商品详......
  • linux获取程序当前所在路径的方法
    直接使用pwd不行,linux系统中有个符号链接:/proc/self/exe 它代表当前程序,我们可以用readlink读取它的源路径就可以获取当前程序的绝对路径。charcurrent_absolute_path[MAX_SIZE];//获取当前程序绝对路径intcnt=readlink("/proc/self/exe",current_absolute_path,MAX_SIZ......