js元素获取

最新推荐文章于 2023-12-10 20:05:23 发布
最新推荐文章于 2023-12-10 20:05:23 发布
阅读量403 收藏
点赞数 1
分类专栏： Javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lidysun/article/details/51893320
版权 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>元素获取demo</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
        <form>
          请选择你爱好:<br>
          <input type="checkbox" name="hobby" id="hobby1">  音乐
          <input type="checkbox" name="hobby" id="hobby2">  登山
          <input type="checkbox" name="hobby" id="hobby3">  游泳
          <input type="checkbox" name="hobby" id="hobby4">  阅读
          <input type="checkbox" name="hobby" id="hobby5">  打球
          <input type="checkbox" name="hobby" id="hobby6">  跑步 <br>
          <input type="button" value = "全选" onclick = "checkall();">
          <input type="button" value = "全不选" onclick = "clearall();">
          <p>请输入您要选择爱好的序号，序号为1-6:</p>
          <input id="wb" name="wb" type="text" >
          <input name="ok" type="button" value="确定" onclick = "checkone();">
        </form>
        <script type="text/javascript">
        function checkall(){
            // document.getElementsByTagName,返回数组【图1】
            var hobby = document.getElementsByTagName("input");
            for(var i=0;i<hobby.length;i++){
                if(hobby[i].type=='checkbox'){
                    hobby[i].checked = true;
                }
            }

        }
        function clearall(){
            // document.getElementsByName, 返回数组【图2】
            var hobby = document.getElementsByName("hobby");
            for(var i=0;i<hobby.length;i++){
                hobby[i].checked = false;
            }

        }

        function checkone(){
            // document.getElementById,返回唯一id元素【图3】
            var ipt =document.getElementById('wb');
            var j=parseInt(ipt.value);
            var checkitem = document.getElementsByName('hobby');
            for(var i=0;i<checkitem.length;i++){
                checkitem[j-1].checked = true;
            };
            ipt.value='';
            ipt.focus();
        }

        </script>
    </body>
</html>

图1:
这里写图片描述

图2:
这里写图片描述

图3:
这里写图片描述

wx_lidysun
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 获取元素的8种方法
qq_41363062的博客
01-17 1992
DOM 文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是 DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。我们用JavaScript对网页进行的所有操作都是通过DOM进行的。 JS获取DOM元素的八种方法 通过ID获取（getElementById） 通过name属性（getElementsByName）...
javascript获取元素离文档各边距离的方法
10-24
在JavaScript编程中，获取元素离文档各边的距离是一项常见的任务，这对于布局调整、滚动事件处理以及动态效果的实现等场景非常关键。本文将详细讲解如何使用JavaScript获取元素相对于文档的顶部、底部、左侧和右侧的...
js获取元素
weixin_48549175的博客
12-11 206
文档:一个页面就是一个文档，DOM中使用document表示 元素∶页面中的所有标签都是先素，DOM中使用element表示 节点∶网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示 根据ID获取 使用getElementByld()方法可以获取带有ID的元素对象。 <body> <input type="text" id="inp"> <script> var inp=document.getElementBy.
js获取元素的方法
RJ0403的博客
12-14 247
1、根据ID获取元素 <div id="box"></div> <script> var box = document.getElementById('box') </script> 2、根据标签名获取元素 <div></div> <div></div> <div></div> <script> var divs = document.getElementsByTagName
js中获取元素
最新发布
weixin_52350720的博客
12-10 420
12.10打卡
原生javascript实现获取指定元素下所有后代元素的方法
10-25
原生JavaScript实现获取指定元素下所有后代元素的方法是一个在Web开发中非常实用的技巧。后代元素指的是嵌套在给定元素内的所有子元素以及更深层级的元素。这些元素可能是直接子元素，也可能是嵌套在多层子元素内部...
JavaScript 获取元素在父节点中的下标(推荐)
10-19
在JavaScript中，获取元素在父节点中的下标是一项常见的任务，尤其在进行DOM操作和页面交互时。在jQuery中，我们可以方便地使用`$(this).index()`来获取元素在父节点同级元素中的索引位置。然而，在原生JavaScript中...
原生JS获取元素集合的子元素宽度实例
10-20
本文详细地介绍了如何使用原生JavaScript获取一系列元素集合中子元素的宽度，并据此动态调整相关元素的样式，具体来说就是通过计算右边内容的宽度来设置左边内容的marginRight值。 首先，我们需要了解一些HTML结构...
js获取Html元素的实际宽度高度的方法
10-22
首先，我们要了解的是JavaScript中获取元素尺寸的基本属性。文档中提到了两种主要情况：宽度和高度直接写在CSS样式表中，以及宽度和高度写在HTML元素的内联样式中。 当宽度和高度在CSS样式表中定义时，如`#div1 { ...
JS获取元素的方法
旺仔牛奶的博客
10-12 388
获取元素的方法 // 根据ID获取元素 document.getElementById(id) // 根据标签名获取元素 document.getElementsByTagName('标签名') element.getElementsByTagName('标签名') // H5新增获取元素方式 document.getElementsByClassName('类名') document.querySelector('选择器') document.querySelectorAll('选择器') // 获
JS获取元素方法
FaceCreazy
11-09 689
Document 对象方法 方法 描述 close() 关闭用 document.open() 方法打开的输出流，并显示选定的数据。 getElementById() 返回对拥有指定 id 的第一个对象的引用。 getElementsByName() 返回带有指定名称的对象集合。
JS获取元素的方式
weixin_45393020的博客
04-10 1640
JS获取元素的方式 JS获取元素的方式一共有8种，分为为： getElementById()，通过id获取 var a = document.getElementById('x'); getElementsByTagName()，通过标签名获取 var a = document.getElementsByTagName('x'); 获取的元素为一组，如果要获取一组当中的一个，只需添上相应元素的索引值‘[index]’即可。 getElementsByClassName()，通过类名获取 va
js 获取元素的方式
热门推荐
Dcripple的博客
05-20 1万+
js 获取元素5种的方式 1、标签获取元素 getElementsByTagName()方法返回一个动态的包含所有指定标签名的元素的集合。 语法： document.getElementsByTagName(‘元素的标签名’); <body> <p id="demo">Hello World!</p> <p id="pro">Hi Jhon!</p> </body> <script> //根据标签改变字...
JS中的元素获取
weixin_52484792的博客
05-04 1777
一、元素的获取方法 1.getElementsByTagName :根据标签名获取元素，返回一个数组； 2.getElementsByClassName：根据类名获取元素，返回一个数组； 3.getElementsById:根据id名获取元素; 4.querySelector:获取一个元素。推荐使用 用法类似写css； 5.querySelectorAll：返回一个元素数组。 console结果如图所示： 二、代码 <!DOCTYPE html> <ht.
JS--获取元素信息
悄悄接
11-13 482
版权声明：本文为博主原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。 目录 一、js中如何获取特定元素信息 1、获取父级元素 2、获取子级元素 3、获取前一个元素 4、获取下一个元素 一、js中如何获取特定元素信息 1、获取父级元素 $("body").on('blur',"input[name='name']",function(){ ...
JS中如何获取元素
weixin_30216561的博客
05-14 186
1.通过ID名称来获取元素： document get element by id 'link' document.getElementById('link'); 事件：鼠标事件、键盘事件、系统事件、表单事件、自定义事件 例：onclick 鼠标点击事件 onmouseover 鼠标移入事件 onmouseout 鼠标移出事件 如何添加事件： 元素.事...
js 点击元素获取元素
05-29
在 JavaScript 中，可以使用 `document.getElementById()` 方法获取指定 id 的元素。例如，如果要获取 id 为 "example" 的元素，可以使用以下代码： ```javascript var element = document.getElementById("example...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值