js获取html元素并且修改属性,JavaScript中获取和修改元素属性的值
在上一篇关于《JavaScript中几个操作元素对象的函数方法》文章中记录了分别通过元素的ID属性,元素的标签名,Class类名来获取元素的节点对象。
今天记录两个函数可以用来获取和修改获取的元素对象的属性的值。
getAttribute()函数方法
getAttribute()是一个函数,并且它只有一个参数值,这个参数值就是你所要查询的元素对象的名字,比如元素的“title”属性等。
注意:getAttribute()不属于document(文档)对象函数方法,它只能通过元素节点对象函数调用,
比如getELementById()
getElementsByTagName()
getElementsByClassName()
语法:el.getAttribute(name);
//name:必须,元素的属性的名字
类似语法:getElementById.getAttribute("title");
例子:
获取文档中的ID属性为“li1”的列表项的“title”属性的值
HTML代码:
JS代码:var mochuid = document.getElementById("li1"); //获取ID为"li1"的元素对象
var mochutitle = mochuid.getAttribute("title"); //获取mochuid中的title属性的值
alert(mochutitle);//输出“title”的值
结果输出:feiniaomy
setAttirbute()函数方法
javascript中给我们提供了一个可以改变元素对象的属性的值的函数方法--setAttirbute(),它的写法和上面那个的函数写法有点想似,但一定得区分开。
setAttribute()函数与getAttribute()函数一样,只能用于元素节点对象,但是不同的是它可以改变元素节点对象的属性的值,并且它带有两个参数。
语法:el.setAttribute(name1,name2);
// name1:必须,要设置的属性名
// name2:必须,要设置的属性值
类似语法:getElementById.setAttribute("title","mochu");
例子:
获取文档中的ID属性为“li1”的列表项的“title”属性的值,并把“title”的值改为"mochu"
HTML代码:
JS代码:var mochuid = document.getElementById("li1"); //获取ID为"li1"的元素对象
var mochutitle = mochuid.getAttribute("title"); //获取mochuid中的title属性的值,可省略
alert(mochutitle);//输出未改变前的值
var mochusettitle = mochuid.setAttribute("title","mochu");//改变属性的值
alert(mochusettitle);//输出改变之后的值
结果会输出:mochu
注意:如果setAttribute()方法的的第一个参数中的属性名称在元素节点对象中没有,那么就会先创建其属性而后赋值。
注:以上内容来源本博主的自学笔记,如有错误还请在下方的评论中指出,谢谢哈!
js获取html元素并且修改属性,JavaScript中获取和修改元素属性的值相关推荐
- html获取子节点数量,Selenium-webdriver在JavaScript中获取子元素数
假设我的html是这样的 One 这个js测试文件能够运行,但我试图在选择列表中获取子元素的数量. var assert = require('assert'), test = require('se ...
- javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight ...
- html怎么获取设备宽度,css - 在javascript中获取设备宽度
css - 在javascript中获取设备宽度 有没有办法使用javascript获取用户设备宽度,而不是视口宽度? 正如我所说,CSS媒体查询提供了这一点 @media screen and (m ...
- html 获取文本框值,html - 如何在JavaScript中获取文本框值
html - 如何在JavaScript中获取文本框值 我正在尝试使用JavaScript从HTML文本框中获取值,但值不是在空格之后 例如: 我只得到:上面的"软件". 我正在使 ...
- 在 JavaScript 中获取对象的第一个键名
本文将演示如何提取对象第一个属性的键(键值对). 目录 1.在JavaScript中获取对象的第一个键名 2.用于object.entries()在JavaScript 中获取对象的第一个键名 3.用 ...
- JavaScript 中获取光标位置
1.概念和原理 DOM中并没有直接获取光标位置的方法,那么我们只能间接来获取光标位置.DOM支持获取光标选中的范围,我们可以以此为切入点,来获取或定位光标的位置,当选取范围起始点和结束点一样时,就是光 ...
- java+script+当前日期_如何在JavaScript中获取当前日期?
如何在JavaScript中获取当前日期? #1楼 您可以使用扩展了 Date对象的Date.js库,从而可以使用.today()方法. #2楼 如果您想对日期格式进行更多的粒度控制,我强烈建议您查看 ...
- 如何在 JavaScript 中获取当前日期?
问: 想要改进这篇文章?提供这个问题的详细答案,包括引文和解释为什么你的答案是正确的.没有足够细节的答案可能会被编辑或删除. 如何在 JavaScript 中获取当前日期? 答1: HuntsBot周 ...
- 如何在JavaScript中获取时间戳
如何在JavaScript中获取时间戳 +运算符 我们可以使用+运算符将日期对象直接转换为UNIX时间戳. 例如,我们可以这样写: +new Date() +日期对象之前操作者触发valueOf的方法 ...
最新文章
- 独家 | 11步转行数据科学家 (送给数据员/ MIS / BI分析师)
- spring boot + spring batch 读数据库文件写入文本文件读文本文件写入数据库
- Android端IM应用中的@人功能实现:仿微博、QQ、微信,零入侵、高可扩展
- 48. Rotate Image ~
- python位置参数_Python;argparse;如何指定位置参数的位置
- 从我开发过的Tensorflow、飞桨、无量框架看深度学习这几年
- mysql-5.1.73-8.el6_在centos中安装mysql详细步骤说明
- 花音机器人_【扑杀花音攻略组】超弩级光机器人攻略
- 【apollo6.0发行版(可以理解为简化版)安装全教程】
- 2×3卡方检验prism_SPSS之卡方检验
- win7 共享wifi 手机如何上网
- 解决Redis错误MISCONF Redis is configured to save RDB snapshots
- 学写网页 #05# CSS Mastery 笔记 1~3
- 网络能ping通,浏览器无法上网
- 在kaggle的论坛上上传图片
- ajax 报错 Content-Type is not allowed by Access-Control-Allow-Headers in preflight respon
- 凡子谷机器人创客教育_创客机器人教育基地
- 基于物理的渲染技术(PBR)系列一
- vba 为excel排序
- CF1569D Inconvenient Pairs
热门文章
- Jquery 小技巧
- linux硬盘分区为什么总有1M,3步实现制作并挂载自己的Linux硬盘分区
- python编程胡牌将是什么意思_OpenCV+Python识别车牌和字符分割的实现
- fc588热敏打印机驱动_为称重仪表设计热敏打印模块 - 工业自动化称重仪表
- win10动态壁纸怎么设置_电脑怎么设置动态桌面
- ipmitool介绍_ipmitool命令行使用详解
- 我们无法更新系统保留的分区_系统更新是我们手机的基本功能之一 安卓智能更新有哪些用途...
- 创意合成广告欣赏:让人脑洞大开的设计
- APP设计干货|切图基本知识点规范
- python中文字符串排序问题_Python字符串排序