DOM之获取标签元素、属性和属性值

2023-11-17

1,获取标签元素

    docunment.getElementById('id')
        只能获取一个id标签
    docunment.getElementByClassName('class')
        获取class标签,结果是一个为数组,不能用forEach
    document.getElementsByTagName('标签名称')
        获取结果是一个伪数组
    document.getElementsByName('标签name属性值')
        获取结果是一个伪数组  可以forEach()循环
    document.querySelector('div')  
       获取第一个: 'div'获取div标签,'#div'获取id,'.div'获取class
    document.querySelectorAll('div')
       获取全部: 'div'获取div标签,'#div'获取id,'.div'获取class

2,给标签添加属性和属性值

    代码:
        var oDiv = document.querySelector('div');
        设置:oDiv.setAttribute('属性名',属性值);
        读取:oDiv.getAttribute('属性名',属性值);
        
        console.dir(oDiv)   //查看参数
        由于id和class属性,直接定义在了标签对象上,所以能直接使用,也可以使用.setAttribute('属性名',属性值)
        设置id为div1:oDiv.id = 'div1'
        设置class为class1:oDiv.ClassName = 'class1'
        获取属性值:var div1 = oDiv.id;var class1 = oDiv.ClassName;

        注意:title、name、type等虽然定义在了标签对象上,但不是所有浏览器都支持
                建议都是用setAttribute()、getAttribute()

3,value属性

    设定标签的数据/参数 属性
        input   select   textarea

        input :
            text  password  url  email   number.....
               可以输入数据的输入框
               value属性,可以获取输入的数据内容
               获取的结果都是字符串类型

            radio  checkbox   hidden ....
               不能通过输入,来输入数据
               只能是通过 标签的 value属性,来设定标签的数据/参数
               value获取的就是 标签 value属性 设定的数据

            select>option
               是一个组合,必须捆绑使用
               value属性,定义在option标签上
               获取,是通过select标签的value来获取

            还有两个特殊的, input>file    textarea
                input>file   不支持在标签中定义value属性
                             获取结果是空字符串
                             只能通过选择上传内容,来定义上传的文件等
                textatea     不支持在标签中定义value属性
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

DOM之获取标签元素、属性和属性值 的相关文章

随机推荐

  • 8-3编码器,3-8译码器的verilog实现

    在数字系统中 由于采用二进制运算处理数据 因此通常将信息变成若干位二进制代码 在逻辑电路中 信号都是以高 低电平的形式输出 编码器 实现编码的数字电路 把输入的每个高低电平信号编成一组对应的二进制代码 设计一个输入为8个高电平有效信号 输出
  • 回到十七世纪,让我来编算一本常用对数表(对数结果是小数,要有分数的思想,指数的幂是分数,这样可以实现小数分数转化位整数的幂的求法)

    原文地址 回到十七世纪 让我来编算一本常用对数表作者 小牛 自十八 九岁学习了对数后 就觉得造对数表真不简单 据说十七世纪那时 说如果谁发现了对数表上有一个数字错 就奖一两黄金 据百科百度 纳皮尔 1550 1617年 苏格兰数学家 对数的
  • GBK/GBK2312字库寻址及使用原理

    一 字符编码 1 1 ASCII编码 我们知道 我们所见到的所有字符编码 对于计算机来说都是0 1 更具不同位上的0 1 一个字节 8位 共有256中排列方式 因此一个字节就可以表示256个不同的字符 在这个前提下 ASCII编码就由美国制
  • 因材施教,有道发布“子曰”教育大模型,落地虚拟人口语教练等六大应用

    因材施教的教育宗旨下 大模型浪潮中 网易有道凭借其对教育场景的深入理解和对商业化的理性思考 为行业树立了垂直大模型的典范 7月26日 教育科技公司网易有道举办了 powered by 子曰 教育大模型应用成果发布会 会上重磅推出了国内首个教
  • 游戏与创新

    一 严肃游戏的概念 严肃游戏的出现 最早可以追溯到公元前1400年 当时在古埃及 有一款名为播棋的棋类游戏 这种游戏以植物种子或石子作为道具 在地面或棋盘上 目的是把对方的棋子吃掉 同时 播棋也在日常交易中 被用作计算数量的商业辅助工具 严
  • 5G 速率介绍

    本文就对如何计算最大速率不做介绍 主要介绍的是NSA和SA速率的差别 以及上下行速率的差异 由于5G单用户下行可以到4流 上行可以到2流 而且上下行都支持256QAM 2 6G频率 5ms单周期 配置下 NSA和SA终端下行峰值速率约1 6
  • 用FFmpeg制作WebP动图

    去年写过一篇文章 是教大家用FFmpeg制作GIF动画的 今天在讨论到项目中碰到的一个 apng动画素材引起的程序崩溃时 有位同学建议 我们为啥不用WebP来代替 apng 是啊 why not 网上搜到一篇文章 自己试了一下 发现强大的F
  • SQL Server Management Studio (SSMS) 指定端口Port连接, 用逗号, 例如: localhost,1433

    Microsoft SQL Server Management Studio SSMS 指定端口连接 用 逗号 例如 localhost 1433 localhost 等效 localhost 逗号 1433
  • QT 解决“ qt creator 修改UI后,运行无改变”问题

    只需要将 项目 中的 Shadow build 勾选去掉 重新构建项目 运行即可看到修改后的效果
  • 三、-切换frame&css选择器

    等待元素出现 隐式等待 用WebDriver 对象的implicitly wait方法 这个方法有一个参数 指明等待最长时间 driver implicitly wait 10 显式等待 Selenium里面还有一种称之为显式等待的 可以为
  • Spring的自动装配 byName和byType的区别

    Spring的自动装配 好处 大幅度减少Spring配置 坏处 依赖不能明确管理 可能会有多个bean同时符合注入规则 没有清晰的依赖关系 在装配的时候会有两种方式 byName和byType两种 byName 根据属性名自动装配 此选项将
  • el-checkbox如何同时获得value值和label的值

    在使用el checkbox时有时候需要往后台传送value值 定义的code 和label值 el checkbox组件默认获取的都是label属性中的值 如果label中设置的是code 那如何获取el checkbox的显示文字 la
  • 第一节 初识C语言

    第一节 初识C语言 目录 一 什么是C语言 二 第一个C语言程序 三 数据类型 四 变量与常量 五 字符串 转义字符 注释 六 结构 七 函数 八 数组 九 操作符 十 常见关键字 十一 define定义常量和宏 十二 指针 十三 结构体
  • 通过filebeat、logstash、rsyslog采集nginx日志的几种方式

    由于nginx功能强大 性能突出 越来越多的web应用采用nginx作为http和反向代理的web服务器 而nginx的访问日志不管是做用户行为分析还是安全分析都是非常重要的数据源之一 如何有效便捷的采集nginx的日志进行有效的分析成为大
  • postgresql教程

    postgreSQL教程目录 postgreSQL 创建数据库的方式 postgreSQL删除数据库的方式 PostgreSQL 创建表格 postgre删除表格 postgreSQL INSERT INTO 语句 postgreSQL S
  • Android中使用AES加密和解密

    Android中如何使用AES进行加密和解密 作为初入社会的IT行业的大专实习生 只能在公司里被当牛一样每天工作到半夜十二点以后 在这里也是第一次写博客 目的只有两个 1 记录技术实现 尽可能的帮助网友解决困难 2 吐槽公司 不多说了 直接
  • [每日设计] 01、小贱钟,基于STM32的手写机器人

    每日设计 01 小贱钟 基于STM32的手写机器人 原创 starger District 46实验室 3月25日 看厌了圆形的钟表 数字显示又太生硬 相信很多人和我一样 想换一个与众不同的方式看时间 小贱钟就是这样一个有趣的东东 它可以用
  • flask SQLAlchemy-ORM增删改查

    ORM介绍 随着项目越来越大 采用原生SQL的方式在代码中会出现大量的SQL语句 对项目的进展非常不利 SQL语句重复利用率不高 越复杂的SQL语句条件越多 代码越长 会出现很多相近似的SQL语句 很多SQL语句是在业务逻辑中拼出来的 如果
  • 文件ajax上传方式

    直接看代码 1 html table class layui table thead tr td width 20 产品信息 td td 产品信息 td tr thead tbody tr td 产品名称 td td td tr tbody
  • DOM之获取标签元素、属性和属性值

    1 获取标签元素 docunment getElementById id 只能获取一个id标签 docunment getElementByClassName class 获取class标签 结果是一个为数组 不能用forEach docu