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之获取标签元素、属性和属性值 的相关文章

  • 从 json 数组中获取成对的值

    首先 这是我从 php 源获取的 json 值 oid 2 cid 107 oid 4 cid 98 oid 4 cid 99 之后 我想要得到并且oid值以及相应的cid值例如 oid 2 and cid 107一口气 oid 4 and
  • 如何使用 HTML 元素阻止 THREE.js 光线投射?

    我希望页面上的 HTML 元素阻止 THREE js 光线投射 我该如何执行此操作 我遇到的问题是 当用户单击打开的 DIV 元素时 光线投射会检索场景中的对象 它会检索 DIV 后面的对象 我不想在 DIV 打开时禁用光线投射 我纯粹希望
  • model.save() 返回无效输出

    我正在使用本文中的 Node js mongodb 和express 对 REST Api 进行简单测试 MERN 第一部分 使用 Node js 和 Express 构建 RESTful API https medium com week
  • 如何阻止地址自动填充谷歌地点

    所以我在我的表单上有一个谷歌地图自动完成功能 当它到达一个位置时 它会占据该位置并格式化它 以便所有正确的信息都进入表单上的不同输入 我遇到的问题是在 place changed 事件触发自动完成填充输入之前 我想阻止最初的人口 而是填充我
  • 在 Nodejs/javascript 中的 Excel 中创建动态数量的列或标题

    我用过exceljsNodejs中用于将json数据导出到excel的模块 它工作正常 但必须在添加行之前预定义标题 列的名称 即列是固定的 添加行后 我无法动态添加列 我尝试了许多通过 npm 提供的模块 但它们都具有相同的功能 那么 有
  • 如何在 Jquery Chosen 插件中搜索乌尔都语?还有其他方法在 Selectbox 中搜索乌尔都语吗?

    基本上我想在选择框中有搜索选项 并在选择框中选择实现的 jquery 所有选项均采用乌尔都语语言 如何扩展所选搜索以匹配乌尔都语 或者还有另一种方法在选择框中搜索乌尔都语 任何其他建议 提前致谢 有一种非常简单的方法可以将所有正则表达式逻辑
  • Google App Script postMessage 与收件人窗口的来源不匹配

    我有一个 Google App 脚本部署为Web应用程序 https developers google com apps script guides web 它工作正常 直到今天晚上我发现它无法在 Firefox 或 Chrome 中加载
  • 根据用户的时间设置问候语(早上好,下午好......)

    任何人都可以推断如何根据用户的时间设置实现基本的 晚上好 或 早上好 也许 PHP 会获取服务器时间 但我希望用基于时间的适当问候语来问候网站访问者 并考虑到他们一天中的时间 E G 早上好 晚上好 下午好 基于它 getHours 日期对
  • 我可以阻止history.popstate在初始页面加载时触发吗?

    我正在开发一个通过 AJAX 提供内容的网站 如果您单击菜单中的某个项目 内容 div 会更新为 get回应 没什么花哨的 我正在实施history pushState允许使用浏览器的后退 前进按钮进行导航 我有以下内容可以在历史导航上加载
  • Javascript 函数,我如何开始理解它们?

    我完全理解 为了学习 javascript 我需要知道函数是如何工作的 我了解传递参数的基础知识 然后使用值调用函数以将某些内容添加到一起 等等 我读过无数关于函数的文章 例如以及书籍等 但我只是不明白它们是如何使用的以及何时应该使用它们等
  • 如何在jsp中使用javascript动态创建下拉框?

    我正在尝试动态创建下拉框 就像当我单击添加按钮时它必须创建新的下拉框 下拉列表还包含动态值 例如需要当前年份并且必须显示最多五年 请建议我这样做 谢谢 这是我尝试过的代码 JavaScript 代码 function Add var nam
  • 验证动态添加的输入字段

    我用过this http docs jquery com Plugins Validation以下表单的 jquery 验证插件
  • 当用户输入/删除时,使文本字段中的提示消失/重新出现[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 有谁知道我怎样才能在我的搜索栏中做出
  • Angular2,测试和解析数据:如何测试 ngOnInit?

    我正在通过Angular2 测试指南 https angular io docs ts latest guide testing html并希望编写一个测试ngOnInit 功能 那个来自编程指南的路由部分 https angular io
  • 包含括号的变量会导致问题[重复]

    这个问题在这里已经有答案了 简单的事情 当单击按钮并将其写入文本字段时 我读取选择框的值 选择框
  • 在Vue.js 3中添加全局变量

    如何在 Vue js 3 中添加全局变量 在 Vue js 2 中 我们在main js file Vue prototype myGlobalVariable globalVariable 最直接的替换就是app config globa
  • 角度距离计算

    我正在使用角度制作距离计算应用程序 Html
  • 如何让 Grunt.js 和 Meteor.js 协同工作?

    我想在我的 Meteor 应用程序中使用简单的复制和串联 但是当 Meteor 在服务器和客户端上运行所有 javascript 文件时 我遇到了问题 而我不希望它们在任何地方运行 它要么只是配置文件 例如Gruntfile js或我想以某
  • Chrome + 另一个进程:进程间通信比 HTTP/XHR 请求更快?

    我有一个进程 1 对视频流进行实时图像处理 我需要在 Chrome 中的 HTML 页面中渲染该视频 同一台计算机上的进程 2 在canvas or img or videoHTML5 元素 由于我有 1000x1000 像素 x 3 字节
  • 如何在输入时格式化 contenteditable div?

    我正在尝试编写一个函数 允许 contenteditable div 在用户输入 div 时执行一些自动格式化 到目前为止我只能让它在 IE 中运行 有人可以帮助我吗 function formatOnKeyUp if window get

随机推荐

  • 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